This project refers to the implementation of an e-commerce application containing a structured front-end and a back-end; the front end is responsible for the user's interface and experiences, while back-end is engaged in business logics, operations with databases and APIs.
This project is a simple, modern login page made using React.js and CSS. Features include: Email and Password input fields "Remember Me" checkbox "Forgot Password?" link Submit button Sign-up option Icons for email input and password visibility toggle
Responsive UI Designed for smooth customer experience with varying screen sizes.
- Password Visibility Toggle: Users can toggle the password visibility.
- Validation (Optional): Can be extended with form validation.
- React.js - Component-based UI development
- CSS - Styling for the form and layout
- React Icons - Icons for email and password fields
With Milestone 2 complete, we built the frontend foundation of our e-commerce application. In Milestone 3, we focused on setting up the backend by: Structuring backend folders Setting up a Node.js & Express server Connecting the project to MongoDB Implementing basic error handling
This ensures that our application has a strong backend to support future development.
- Organized Backend Folder Structure We created a well-structured backend setup:
graphql
Copy
Edit
backend/
│── controllers/ # Handles API logic
│── models/ # Defines database schemas
│── routes/ # Manages API endpoints
│── middleware/ # Custom middlewares (error handling, authentication, etc.)
│── config/ # Database connection setup
│── server.js # Main server file
2. Server Setup with Express.js
Installed Express.js and configured the backend server.
Used dotenv to manage environment variables.
Server runs on PORT 5000 (or from .env file).
3. Database Connection (MongoDB Atlas)
Connected the backend to MongoDB Atlas for data storage.
Used Mongoose to define models for products, users, and orders.
Verified the database connection with logs.
4. Implemented Basic Error Handling
Added middleware to catch errors and return clear error messages.
Improved debugging and user-friendly API responses.
Node.js & Express.js – Backend framework MongoDB Atlas & Mongoose – Database management dotenv – Manage environment variables Cors & Body-Parser – Middleware for API requests
In this milestone, we focused on setting up key backend features for user management and file uploads. With guidance from our mentor, we completed: User Model – Defines how user data is structured in MongoDB. User Controller – Handles API logic for user-related operations. Multer Setup – Enables image/file uploads for user profiles and products.
- Created the User Model (User.js) Defined a Mongoose schema for user data, including: name, email, password (with encryption using bcrypt). role (Admin/User distinction). profileImage field to store uploaded images.
In this milestone, we focused on creating a Sign-Up Page where users can register an account. We also implemented form validation to ensure users enter correct and valid data before submitting the form. This helps improve the user experience and ensures the backend receives clean and structured information.
- Built the Sign-Up Page (HTML, CSS, React.js) Designed a clean and user-friendly registration form. Used React.js for interactivity and CSS for styling.
- Implemented Form Validation Name Field: Ensures the name is entered. Email Validation: Checks if the email is in the correct format. Password Validation: Requires at least 8 characters, one uppercase letter, and one number. Error Messages: Displays real-time feedback when input is invalid.
React.js – Frontend Framework HTML & CSS – Form Structure & Styling JavaScript (ES6) – Form Validation Logic
Milestone 6: Backend Signup Endpoint & Secure Password Storage
Overview In Milestone 5, we built the Signup Page in the frontend. Now, in Milestone 6, we are implementing a backend endpoint for signup that: Accepts user registration requests Encrypts passwords before storing them Saves user data securely in the MongoDB database
This ensures that user credentials are protected from attacks like data breaches & password leaks.
Key Achievements
- Created a Secure Signup API Endpoint (/api/auth/signup) Users can now register securely with: Name Email Encrypted Password User Role (Default: User) API validates user input before saving.
- Used bcryptjs for Password Encryption Before storing passwords, we encrypt them using bcrypt hashing. This prevents plain-text passwords from being saved in the database.
- Stored User Data in MongoDB (Mongoose Schema) Created a User Model to store user details in MongoDB Atlas.
- Tested Signup API Using Postman Successfully registered users via Postman API testing. Technologies Used Node.js & Express.js – Backend Framework MongoDB Atlas & Mongoose – Database Management bcryptjs – Password Encryption dotenv – Securely manage environment variables Postman – API Testing
Welcome to Milestone 7! In this milestone, you’ll create a backend endpoint for user login, focusing on validating user credentials and verifying encrypted passwords stored in the database. Let’s break it down step by step.
Learning Goals By the end of this milestone, you will:
Understand how to validate user credentials during login.
Learn how to compare the encrypted password with the user’s input.
Why Encrypt Passwords? Protect User Data: Keeps passwords safe even if the database is compromised.
Privacy: Ensures passwords aren’t stored in plain text.
Compliance: Meets security standards like GDPR and PCI-DSS.
Prevents Password Theft: Hashed passwords are difficult to decipher, increasing security.
How Login Authentication Works User Enters Credentials:
The user provides their email/username and password on the login page.
Fetch User Data from Database:
The backend retrieves the user record based on the provided email/username.
If the user is not found, return an error: "User does not exist."
Compare Encrypted Passwords:
Process the user's input password using the same hashing algorithm (e.g., bcrypt).
Compare the resulting hash to the stored hashed password.
If they match, the user is authenticated; if not, send an error.
Welcome to Milestone 8! In this milestone, you’ll learn how to create a card component and display multiple cards on the products page. This will help you showcase products effectively and improve the user experience of your e-commerce app.
Learning Goals By the end of this milestone, you will:
Learn how to create a card component.
Learn how to display those cards on the products page.
Why Create Card Components? Showcase Products Effectively: Presents product details in a clear and visually appealing way.
Reusable Design: Can be used across multiple pages or sections of the app.
Improved User Experience: Makes it easy for users to browse and interact with products.
Organized Layout: Keeps the homepage clean and structured.
How to Display a Single Card for Multiple Products? Create a Dynamic Component: Design a single card component that accepts product details as props.
Use Mapping: Use array mapping to iterate over the product list and render a card for each product.
Pass Data Dynamically: Pass unique product information (e.g., name, price, image) to each card.
Maintain Consistency: Ensure the layout remains uniform for all products.
In this milestone, we created a product input form that allows users to enter product details and upload multiple images. The form ensures data validation and previews images before submission.
User-friendly product input form
Multiple image uploads with previews
Real-time validation for form fields
- Clone the repository:
git clone YOUR_REPOSITORY_LINK cd ecommerce-follow-along
In this part of Milestone 9, we will define the product schema using Mongoose and create a POST API endpoint to validate and save product details in MongoDB.
Learning Goals By the end of this milestone, you will: Learn how to write a Mongoose schema for products Implement data validation to ensure only valid data is saved Create a POST API endpoint to receive and store product data in MongoDB Understand the importance of data integrity and validation
Overview
Welcome to Milestone 11! In this milestone, we will make our home page dynamic by displaying all the products stored in MongoDB. We will create an endpoint that retrieves product data and renders it dynamically using the product card component we created earlier.
Learning Goals
By the end of this milestone, you will:
Understand how to write an endpoint to fetch data from MongoDB.
Learn how to receive data on the frontend.
Dynamically display product data using the existing product card component.
Steps to Complete Milestone 11
- Backend - Create an Endpoint to Fetch Products
Create a new route to retrieve all products from the database and integrate it into the server.
- Frontend - Fetch and Display Products
Modify the home page component to fetch product data from the backend and display it dynamically using the product card component.
Testing the Implementation
Start your backend server.
Start your frontend application.
Visit the home page and ensure that all products from MongoDB are displayed dynamically.
Summary
In this milestone, we:
Created a backend API to fetch all products from MongoDB.
Fetched data on the frontend.
Rendered products dynamically using the product card component.
Overview
Welcome to Milestone 12! In this milestone, we will create the My Products page, which will display all the products added by the logged-in user based on their email. We will create an endpoint that retrieves product data filtered by the user’s email and displays it dynamically using the product card component.
Learning Goals
By the end of this milestone, you will:
Understand how to write an endpoint that filters data by email and retrieves products from MongoDB.
Learn how to receive filtered data on the frontend.
Dynamically display product data using the existing product card component.
Steps to Complete Milestone 12
- Backend - Create an Endpoint to Fetch User-Specific Products
Write an endpoint that retrieves all products associated with the logged-in user’s email and sends the data to the frontend.
- Frontend - Fetch and Display User-Specific Products
Create a function to fetch product data based on the user’s email and pass it dynamically to the product card component.
Testing the Implementation
Start your backend server.
Start your frontend application.
Visit the My Products page and ensure that only products associated with the logged-in user's email are displayed dynamically.
Summary
In this milestone, we:
Created a backend API to fetch user-specific products from MongoDB.
Filtered product data based on the user’s email.
Displayed filtered products dynamically using the product card component.
Now, your My Products page displays personalized product data dynamically! 🚀
Overview
Welcome to Milestone 13! In this milestone, we will add functionality to edit uploaded products. We will implement an edit button and create a backend endpoint to update product details inside the MongoDB database.
Learning Goals
By the end of this milestone, you will:
Understand how to write an endpoint that updates existing data in MongoDB.
Learn how to auto-fill a form with previous product data and provide an option to edit.
Steps for Milestone 13
- Backend - Create an Update Endpoint
Write an endpoint that receives updated product data and modifies the existing data inside MongoDB.
- Frontend - Implement Edit Button & Auto-fill Form
Add an edit button to the product card.
When the edit button is clicked, send the selected product’s data to a form.
Auto-fill the form with previous product details.
Provide an option to edit and save the changes.
Testing the Implementation
Start your backend server.
Start your frontend application.
Navigate to a product and click the edit button.
Modify the product details and save the changes.
Verify that the product data is updated in MongoDB.
Summary
In this milestone, we:
Created an API endpoint to update product details in MongoDB.
Added an edit button to the product card.
Overview
Welcome to Milestone 14! In this milestone, we will implement the functionality to delete a product. We will add a delete button to the product card and create a backend endpoint to remove a product from MongoDB using its ID.
Learning Goals 🎯
By the end of this milestone, you will:
Understand how to write an endpoint that deletes a product by its ID from MongoDB.
Steps for Milestone 14
- Backend - Create a Delete Endpoint
Write an endpoint that receives a product ID and deletes the corresponding product from MongoDB.
- Frontend - Implement Delete Button
Add a delete button to the product card.
When the delete button is clicked, send the product ID to the backend endpoint.
Testing the Implementation
Start your backend server.
Start your frontend application.
Click the delete button on a product.
Verify that the product is removed from MongoDB.
Summary
In this milestone, we:
Created an API endpoint to delete a product from MongoDB by ID.
Added a delete button to the product card.
In this milestone, we created a reusable Navbar component and integrated it into all the pages of our application. The navbar allows smooth navigation between different sections of our app, making it user-friendly and accessible on all screen sizes.
By completing this milestone, we have learned:
- How to create a Nav component.
- How to reuse the same component across multiple pages.
- How to make the Navbar responsive for different screen sizes.
- Created a new
Navcomponent with links to:- Home
- My Products
- Add Product
- Cart
- Ensured reusability by adding the
Navcomponent to all pages. - Implemented responsive design to make the navbar adaptable to different screen sizes.
- Tested navigation to ensure smooth transitions between pages.
Overview
In this milestone, we created a Product Info Page that displays detailed product data, allows users to select a quantity, and includes an Add to Cart button.
Learning Goals
By completing this milestone, we have learned:
How to create a new page to display detailed product information.
How to allow users to select a quantity before adding a product to the cart.
How to implement an Add to Cart button for user interaction.
Implementation Steps
Created a new Product Info Page that:
Fetches and displays product details dynamically.
Shows product name, image, price, and description.
Allows users to select a quantity using increment and decrement buttons.
Includes an Add to Cart button.
Ensured smooth user experience by handling errors and responsiveness.
Tested functionality to verify product data retrieval and cart integration.
Overview
In this milestone, we will create a backend endpoint to add products to a user's cart and store them in the database.
Learning Goals
By the end of this milestone, you will:
Modify the user schema to store cart products.
Write an endpoint to receive product details and store them in the cart.
Steps to Implement
1️ Update the User Schema
Modify the existing user schema to include a cart field, which will store an array of cart items.
2️ Create the Cart Schema (Optional)
If needed, create a separate cart schema to manage cart items more effectively.
3️ Write the Endpoint to Add Products to Cart
Implement an API endpoint that allows users to add products to their cart.
Ensure that the product details, including quantity, are stored properly.
4️ Connect the Route to the Server
Integrate the cart route into the main server file to enable functionality.
Testing the Endpoint
To test the API, use a tool like Postman or an API testing tool to send a request to add products to the cart.
Endpoint: POST /cart/add
Request Body: Contains user ID, product ID, and quantity.
Expected Response: Confirms that the product has been successfully added to the cart.
Cart Page Backend Endpoint
Overview
This milestone focuses on creating a backend endpoint to fetch all products inside a user's cart. The endpoint will accept a user's email as a query parameter and return the corresponding cart details.
Learning Goals:-
By the end of this milestone, you will:
Create an endpoint to receive requests from the cart page.
Implement backend logic to fetch all products inside a user's cart using their email.
Understand how to structure a cart retrieval API in an e-commerce application.
Steps for Milestone 18
Create a Backend Endpoint for the Cart Page
Implement a GET route to fetch a user's cart details.
Write an Endpoint to Get Products Inside Cart for a User
Accept email as a query parameter.
Retrieve the user's cart using the provided email.
Populate the cart items with product details.
Return the cart details in JSON format.
Overview
In Milestone 19, we implemented a Cart Page that displays products inside the cart. We also added functionality to increase and decrease the quantity of products using + and - buttons. Additionally, we created backend endpoints to handle these quantity updates.
Learning Goals
By completing this milestone, we:
Built a frontend cart page that fetches and displays products.
Added + and - buttons for quantity adjustments.
Developed backend endpoints to modify product quantities in the cart.
Steps Implemented
Frontend (Cart Page UI)
Fetched cart products from the API (built in Milestone 18).
Displayed each product with an image, name, price, and quantity.
Added + and - buttons to modify product quantity.
Integrated API calls to update quantity when buttons are clicked.
Backend (API Endpoints for Quantity Updates)
Created an endpoint to increase product quantity.
Created an endpoint to decrease product quantity (with a minimum limit of 1).
Ensured data validation and error handling.
Learning Goals Create a backend endpoint to send user data. Develop a frontend profile page to display user details. Display profile photo, name, email, and addresses. Show an "Add Address" button and handle cases where no address exists.
Overview In this milestone, we created a frontend address input form that allows users to add a new address. The form includes fields for country, city, address lines, zip code, and address type.
Features Address input form with fields:
Country City Address Line 1 Address Line 2 (Optional) Zip Code Address Type (Home/Work) Stores user input in React state Navigates to the form when clicking "Add Address" in the profile page On form submission, logs the data (to be sent to the backend later)
In this milestone, we created a backend endpoint that receives an address from the frontend and stores it inside the user's profile in the database.
- Created a POST endpoint to accept address data from the frontend.
- Updated the user document by pushing the new address into the
addressarray. - Ensured the data is securely saved to the database.
- Node.js
- Express.js
- MongoDB (Mongoose)
- Send a POST request to
/api/user/addresswith address data. - The address is added to the authenticated user's profile.
Progress for Milestone 22 has been successfully implemented and committed.
In this milestone, we implemented the Place Order functionality by adding a button in the cart page, creating a Select Address page, and setting up a backend endpoint to fetch user addresses.
- Added a "Place Order" button in the cart page that navigates to the Select Address page.
- Created a Select Address page where users can view and select a delivery address.
- Implemented a new API endpoint to retrieve the list of saved addresses for a user.
- Created a Mongoose Schema for storing order details.
In this milestone, we implemented the Order Confirmation Page, where users can review their order details before finalizing the purchase.
- Created an Order Confirmation Page that displays:
- All products in the order.
- The selected delivery address.
- The total order value.
- Added a "Place Order" button at the bottom of the page.
In this milestone, you need to create an API endpoint that:
Receives order details (products, user email, and address).
Retrieves the user’s _id from MongoDB using their email.
Stores each product as a separate order with the same address.
Saves the order details in the MongoDB orders collection using the Order schema.
In this milestone, we created a backend endpoint that retrieves all orders associated with a user based on their email.
- Created a GET/POST endpoint to receive the user's email.
- Queried the database to find the user
_idusing the email. - Retrieved all orders linked to that user's
_id. - Returned the list of orders in the response.
- Node.js
- Express.js
- MongoDB (Mongoose)
- Send a request to
/api/orderswith the user's email in the request body or params. - The server responds with all the orders placed by that user.
Milestone 26 is completed and the code has been pushed to the repository.
In this milestone, we built a frontend page that displays all orders placed by a user.
- Created a
My Orderspage in the frontend. - Sent a GET request to the
/api/ordersendpoint with the user's email. - Retrieved and displayed all orders associated with the user.
- Added the
My Orderspage to the navbar for easy navigation.
- React.js (or your frontend framework)
- Axios/Fetch for API calls
- Backend API (from Milestone 26)
- Navigate to the My Orders page from the navbar.
- The app automatically fetches and displays the user's orders using their email.
Milestone 27 is done and the code is available in the repository.
Objective Implement a Cancel Order button in the My Orders page that:
Cancels an order by sending its ID to the backend.
Updates the status of that order to "cancelled" in the database.
Hides the cancel button if the order is already cancelled.
Step-by-Step Implementation
- Frontend Changes (React) In the MyOrders page: For each order, check if the status is NOT "cancelled".
If it’s not, show a "Cancel Order" button.
On button click, send a POST request with the orderId.
jsx Copy Edit
2.Backend Changes (Express + MongoDB) 📍 Create a route: POST /api/orders/cancel js Copy Edit
- Database Schema (If not already) In your Order model (models/Order.js), ensure there's a status field:
js Copy Edit
- Test Everything Place an order, go to "My Orders" page.
Try cancelling — check if status updates.
Verify button disappears after cancellation.
By the end of this milestone, you will:
- Understand how to use the PayPal API.
- Learn to integrate online payments into a web application.
- Set up payment options: Cash on Delivery (COD) and Online Payment (PayPal).
Steps to Complete Milestone 29
- Visit PayPal Developer Dashboard
- Sign up or log in with your PayPal account.
- Navigate to Sandbox > Accounts in the dashboard.
- Use the default business and personal sandbox accounts or create new ones.
- Copy and save the User ID of the sandbox account (personal).
- Click into the business sandbox account to find your Client ID.
- You’ll use this Client ID in your frontend to initialize PayPal buttons.
- Save it securely for future use.
You need to add:
- Two radio buttons:
- One for Cash on Delivery (COD)
- One for Online Payment (PayPal)
- When the user selects Online Payment, the PayPal payment buttons should be shown.
This milestone guides you through integrating PayPal payments into your React application using the PayPal sandbox environment.
Step 1: Create a PayPal Developer Account Sign up at https://developer.paypal.com/
Create a Sandbox Business Account (for receiving payments)
Create a Sandbox Personal Account (for making payments)
Copy the Client ID from your app under "My Apps & Credentials"
Step 2: Install Required NPM Package Install @paypal/react-paypal-js using NPM This package provides a PayPal component for handling online payments
Step 3: Setup PayPalScriptProvider Import PayPalScriptProvider and use it to wrap the payment component in your app
Pass your sandbox client ID as a prop
Step 4: Display PayPal Payment Buttons Inside your payment component, use the PayPalButtons component to show credit card, debit card, or PayPal options
Configure the amount, currency, and success handlers as needed
Bonus You can handle order creation, success messages, or redirect after payment using the provided callbacks
This setup works in sandbox mode for testing without real money
React Redux Setup to Store User Email This guide helps you set up Redux in a React app to store the user's email in the global state.
Step 1: Install Redux and React-Redux Install the necessary packages by running: npm install react-redux @reduxjs/toolkit
Step 2: Create Folder and Files Inside your src folder, create a folder named store. Inside the store folder, create two files: store.js and userActions.js.
Step 3: Setup store.js In store.js, configure the Redux store using configureStore from Redux Toolkit. Create a reducer named userReducer that manages a single piece of state: the user's email.
Step 4: Setup userActions.js In userActions.js, create a function called setEmail. This function will allow you to update the user's email in the global state by dispatching an action.
Step 5: Wrap App with Redux Provider Open your index.js file. Import the Provider component from react-redux and wrap your App component with it. Pass the store as a prop to the Provider.