Mern Stack

Mern Projects and tips and tricks here..

The MERN stack is a popular web development technology stack that consists of four key technologies: MongoDB, Express.js, React.js, and Node.js. It is used for building dynamic web applications and websites that require real-time data updates and highly interactive user interfaces.

1. MongoDB: MongoDB is a NoSQL database that stores data in JSON-like documents. It is highly scalable and can handle large amounts of data. MongoDB is used in MERN stack development to store data for web applications.
2. Express.js: Express.js is a web application framework for Node.js. It provides a set of features for building web applications such as middleware, routing, and templates. Express.js is used in MERN stack development to create web APIs and handle server-side requests.
3. React.js: React.js is a JavaScript library for building user interfaces. It allows developers to create reusable UI components that can be easily updated in real-time. React.js is used in MERN stack development to create highly interactive user interfaces for web applications.
4. Node.js: Node.js is a JavaScript runtime environment that allows developers to run JavaScript on the server-side. It is used in MERN stack development to handle server-side logic and communicate with databases.

To build this web application using the MERN stack, we would use the following technologies:

1. MongoDB: We would use MongoDB to store the articles submitted by users.
2. Express.js: We would use Express.js to create a RESTful API that handles requests to create and retrieve articles from the database.
3. React.js: We would use React.js to create the user interface for the web application. We would create a homepage that displays all articles and a form where users can submit new articles.
4. Node.js: We would use Node.js to run the server-side logic for the web application. We would communicate with the MongoDB database using the MongoDB Node.js driver.

MERN stack e-commerce application with some code snippets to illustrate how the different technologies work together.

1. MongoDB

Let’s define a schema for the products collection using Mongoose, a MongoDB object modeling tool for Node.js:

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  image: { type: String, required: true }
});

const Product = mongoose.model('Product', productSchema);

module.exports = Product;

This schema defines a product with a name, description, price, and image.

2. Express.js

Let’s create a route that retrieves all products from the database:

const express = require('express');
const router = express.Router();
const Product = require('../models/product');

router.get('/products', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

This route uses the Product model defined earlier to retrieve all products from the database and return them as JSON.

3. React.js

Let’s create a component that displays all products:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get('/api/products');
      setProducts(response.data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {products.map(product => (
        <div key={product._id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <p>${product.price}</p>
          <img src={product.image} alt={product.name} />
        </div>
      ))}
    </div>
  );
}

export default ProductList;

This component uses the Axios library to fetch all products from the API and store them in state. It then maps over the products array to render a card for each product with its name, description, price, and image.

4. Node.js

Let’s create a route that processes orders:

const express = require('express');
const router = express.Router();
const Order = require('../models/order');

router.post('/orders', async (req, res) => {
  const { name, email, address, cart } = req.body;

  try {
    const order = new Order({
      name,
      email,
      address,
      cart
    });
    await order.save();
    res.json(order);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

This route accepts a POST request with information about a new order, including the user’s name, email, address, and cart contents. It then creates a new order in the database using the Order model and returns the order as JSON.

Project	Mern Stack Project
1.	Blog App Backend nodejs project scretch to Advance