Building an E-commerce Website using MERN Stack

Introduction

• Welcome to Gigs for Gigs YouTube channel
• Today we'll build an awesome e-commerce website using the MERN stack
• The website will include features like adding products, selling them, adding to cart, favorites, etc.
• Technologies Used: ReactJS (Frontend), MongoDB (Database), Express and NodeJS (Backend server)

Website Features

• E-commerce functionalities focused on clothing branding
• Categories, bestsellers, product details, shop page, sign-in, and sign-up pages
• Filtering options on the shop page include size and price
• Responsive design for mobile devices
• Authentication includes login/logout management
• Full-stack development covering frontend and backend

Setup & Initialization

1. Frontend Setup

   • Create a new React app using npx create-react-app
   • Create a server directory in the root directory
   • Go to the server directory and initialize with npm init
   • Install server dependencies: nodemon, express, dotenv, etc.
   • Start the React app using npm start (runs on port 3000 or 3001)
   • Install client dependencies: styled-components, Material UI (MUI), Axios, Redux, etc.

2. Folder Structure

   • Clone utils folder from drive including buttons, text input, error handling, etc.
   • Clean the initial files from the src directory
   • Import necessary files and prepare the app
   • Create directories for components and pages
   • Setup styled components and MUI themes
   • Configure navigation and routing using react-router-dom

Navbar and Routing

• Create a Navbar component to feature logo, links, buttons, and icons
• Implement responsive navigation behavior (hamburger menu for mobile devices)
• Create and structure various pages: Home, Orders, New Arrivals, Favorites, Shop Listing, Cart, Authentication, etc.
• Use routes and route elements for navigation
• Setup default routes with BrowserRouter

Sign-In/Sign-Up Pages

• Implement sign-in and sign-up forms with validation and state management
• Use styled-components for a consistent UI
• Create form input fields and buttons
• Enable toggle between sign-in and sign-up forms
• Ensure the authentication forms work with the backend end-points

Homepage

• Design a visually appealing homepage with categories, bestsellers, etc.
• Fetch and display data for products dynamically
• Implement product categories card and product card components
• Ensure responsiveness and animations

Shop Listing Page

• Build shop listing page featuring products with filters for size and price
• Implement product filtering by category, price, and size
• Display products list dynamically

Cart and Favorites

• Create cart and favorite pages
• Implement actions to add/remove items from cart and favorites
• Display the cart summary including total amounts, delivery options, etc.
• Allow user to place orders from the cart page

Product Details Page

• Design a product details page accessed by clicking on a product
• Show detailed information including images, description, price, rating, and sizes
• Implement add to cart and favorite functionalities from the details page

Backend Development

1. Server Setup

   • Initialize server folder and install necessary packages
   • Connect to MongoDB and set up schemas for users, products, and orders
   • Implement Express server to handle routes
   • Create error handler middleware

2. Models and Schemas

   • Define schemas for users, products, and orders in models
   • Implement relations between schemas using Mongoose

3. Controllers

   • Implement controllers for user registration, login, and CRUD operations
   • Develop routes for user actions and product-related actions
   • Setup JWT authentication middleware

4. API Testing

   • Use Postman to test all API endpoints including user registration, login, product CRUD, and cart management

Frontend-Backend Integration

• Create an API file to manage all axios calls
• Define Redux slices for state management (user and snackbar slice)
• Connect Redux to React efficiently
• Implement dispatch actions for various API calls
• Manage loading states and error handling with snackbars

Deployment

• Push the project to GitHub
• Deploy the frontend with Netlify and backend with Render
• Set environment variables for deployment

Conclusion

• Ensure all pages are fully functional and responsive
• Authenticate, add to cart, favorites, and purchase flows should work seamlessly
• Review all components for potential improvements
• Share, like, and subscribe for more content