MERN Stack Tutorial with Deployment – Beginner's Course

Introduction

In this tutorial, you'll learn how to build full-stack web applications using the MERN stack, which consists of MongoDB, Express.js, React, and Node.js. This guide will walk you through setting up your development environment, creating RESTful APIs, managing databases, and developing interactive front-end interfaces. By the end of this course, you'll have a solid foundation in MERN stack development and the skills to deploy your applications.

Step 1: Setting Up the Server

1. Install Node.js: Ensure you have Node.js installed on your machine. Download it from the official website.

2. Create a new project folder:

   • Open your terminal or command prompt.
   • Use the command:

     mkdir mern-stack-tutorial
     cd mern-stack-tutorial
     

3. Initialize a new Node.js project:

   • Run:

     npm init -y
     

   • This creates a package.json file for managing dependencies.

4. Install Express.js:

   • Execute:

     npm install express
     

Step 2: Setting Up MongoDB

1. Create a MongoDB Atlas account: Go to MongoDB Atlas and sign up.
2. Create a new cluster: Follow the prompts to set up your database cluster.
3. Obtain your connection string:
   • Navigate to your cluster dashboard and click on "Connect".
   • Choose "Connect your application" and copy the connection string.
4. Install Mongoose: In your project folder, run:

   npm install mongoose
   

Step 3: SQL vs NoSQL

• Understand the difference:
  • SQL: Structured Query Language databases (like MySQL) are relational and use tables.
  • NoSQL: MongoDB is a NoSQL database, which stores data in flexible JSON-like documents.

Step 4: Creating a Product Model

1. Create a new folder for models:
   • Run:

     mkdir models
     

2. Create a Product model:
   • Inside the models folder, create a file named Product.js.
   • Add the following code:

     const mongoose = require('mongoose');
     
     const productSchema = new mongoose.Schema({
       name: { type: String, required: true },
       price: { type: Number, required: true },
       description: { type: String },
     });
     
     module.exports = mongoose.model('Product', productSchema);
     

Step 5: Building the API

1. Create a new folder for routes:

   • Run:

     mkdir routes
     

2. Set up the API routes:

   • Inside the routes folder, create a file named productRoutes.js.
   • Include the following code to handle API requests:

     const express = require('express');
     const Product = require('../models/Product');
     const router = express.Router();
     
     router.post('/products', async (req, res) => {
       const product = new Product(req.body);
       await product.save();
       res.status(201).send(product);
     });
     
     router.get('/products', async (req, res) => {
       const products = await Product.find();
       res.send(products);
     });
     
     module.exports = router;
     

3. Integrate routes into your application:

   • In your main server file (e.g., server.js), import and use your routes:

     const express = require('express');
     const mongoose = require('mongoose');
     const productRoutes = require('./routes/productRoutes');
     
     const app = express();
     app.use(express.json());
     app.use('/api', productRoutes);
     
     mongoose.connect('your-mongo-connection-string', { useNewUrlParser: true, useUnifiedTopology: true });
     

Step 6: Building the Frontend

1. Set up React:

   • In your project folder, run:

     npx create-react-app client
     

   • Navigate into the client folder:

     cd client
     

2. Install Axios for making API requests:

   • Run:

     npm install axios
     

3. Create components for your application:

   • Build components like ProductList and ProductForm to display and submit products.

Step 7: Deployment

1. Prepare for deployment:

   • Ensure your application is production-ready by testing thoroughly.
   • Use environment variables for sensitive information.

2. Choose a deployment platform (e.g., Heroku, Vercel):

   • Follow the platform’s instructions for deploying a Node.js and React application.

Conclusion

You have now built a full-stack application using the MERN stack, from setting up the server and database to creating an interactive frontend and deploying the application. To continue learning, consider exploring advanced topics such as user authentication, state management with Redux, or integrating third-party APIs. For additional support and questions, join the Discord community linked in the video description.