GizmoBuy: A Comprehensive Full Stack E-Commerce Project by babulakterfsd

In this tutorial, we will be building a full stack e-commerce project called GizmoBuy. This project will allow users to browse through different products, add them to their cart, and make purchases. We will be using React for the frontend, Node.js for the backend, and MongoDB for the database.

Before we get started, make sure you have Node.js and MongoDB installed on your machine. You can download Node.js from the official website and MongoDB from the official website as well. Once you have done that, you can proceed with the following steps:

1. Setting up the backend:

   • Create a new directory for your project and navigate to it in your terminal.
   • Create a new Node.js project by running the following command: npm init -y
   • Install the necessary dependencies by running the following command: npm install express mongoose body-parser
   • Create a new file called server.js and add the following code:

     
     const express = require('express');
     const mongoose = require('mongoose');
     const bodyParser = require('body-parser');

   const app = express();
   const PORT = process.env.PORT || 3001;

   app.use(bodyParser.json());

   mongoose.connect(‘‘, {
   useNewUrlParser: true,
   useUnifiedTopology: true
   });

   app.listen(PORT, () => {
   console.log(Server is running on port ${PORT});
   });

   
   - Replace `<YOUR_MONGODB_CONNECTION_STRING>` with your actual MongoDB connection string.
   - Run the server using the following command: `node server.js`

2. Creating the database schema:

   • Create a new directory called models and create a new file called productModel.js.
   • Add the following code to the productModel.js file:

     
     const mongoose = require('mongoose');
     const { Schema } = mongoose;

   const productSchema = new Schema({
   name: String,
   price: Number,
   image: String,
   description: String
   });

   const Product = mongoose.model(‘Product’, productSchema);

   module.exports = Product;

3. Setting up the routes:

   • Create a new directory called routes and create a new file called productRoutes.js.
   • Add the following code to the productRoutes.js file:

     
     const express = require('express');
     const Product = require('../models/productModel');

   const router = express.Router();

   router.get(‘/products’, async (req, res) => {
   const products = await Product.find();
   res.json(products);
   });

   module.exports = router;

   
   - Import the `productRoutes.js` file in the `server.js` file and use it as middleware.

4. Setting up the frontend:

   • Create a new directory called client and navigate to it in your terminal.
   • Generate a new React app by running the following command: npx create-react-app .
   • Install the necessary dependencies by running the following command: npm install axios react-router-dom
   • Create a new file called api.js in the src directory and add the following code:

     
     import axios from 'axios';

   const API_URL = ‘http://localhost:3001‘;

   export const getProducts = async () => {
   const response = await axios.get(${API_URL}/products);
   return response.data;
   }

   - Create a new file called `ProductList.js` in the `src` directory and add the following code:
   ```javascript
   import React, { useState, useEffect } from 'react';
   import { getProducts } from './api';
   
   const ProductList = () => {
      const [products, setProducts] = useState([]);
   
      useEffect(() => {
          const fetchProducts = async () => {
              const data = await getProducts();
              setProducts(data);
          }
          fetchProducts();
      }, []);
   
      return (
          <div>
              <h1>Products</h1>
              {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;

   • Import the ProductList.js component in the App.js file and render it.
5. Testing the project:
   • Run the backend server using the following command: node server.js
   • Run the frontend server using the following command: npm start
   • Open your browser and navigate to http://localhost:3000 to see the GizmoBuy app in action.

Congratulations! You have successfully built a full stack e-commerce project called GizmoBuy. You can now customize and improve the project further by adding more features such as user authentication, product search, and cart functionality. Happy coding!