Ecommerce-Follow-Along is a standard e-commerce website designed to provide a seamless online shopping experience for a wide range of users. The platform allows customers to browse products, add them to a cart, and securely make purchases. It also includes features like user authentication, product search and filtering, and order tracking.
The goal of this project is to create a functional and user-friendly e-commerce application that covers all essential aspects of online shopping, including managing products, orders, and users.
Product Catalog: Browse and search through a variety of products effortlessly.
User Authentication: Secure login and registration system for personalized user experiences.
Shopping Cart: Add, update, or remove items before proceeding to checkout.
Order Management: Track orders, view order history, and handle payments securely.
Admin Panel: Manage products, orders, and users with administrative controls.
Front-End: React — for building an interactive and responsive user interface.
Back-End: Node.js with Express — for server-side logic and API handling.
Database: MongoDB — for efficient storage and retrieval of product, user, and order data.
This project aims to simulate the development of a real-world e-commerce platform while giving hands-on experience with the MERN stack. It’s a great way to understand the interplay between the front-end, back-end, and database, while solving a common user problem: making online shopping simple and enjoyable.
In Milestone 2, I focused on structuring the project and setting up the frontend and backend for the e-commerce application. This milestone involved configuring the development environment, creating a functional login page, and laying the foundation for future API integrations.
Project Folder Structure: I organized the project files into separate directories for the frontend (React) and backend (Node.js), streamlining the development process. React Frontend Setup: I initialized a React app to handle the user interface, ensuring a smooth foundation for building the app's frontend.
Node.js Backend Setup: I set up a basic Node.js server to handle backend functionality, preparing for API integration in later milestones.
Tailwind CSS Integration: I configured Tailwind CSS to enable utility-based, responsive styling throughout the project.
Login Page Development: I created the first user interface of the e-commerce platform—a functional and styled login page—allowing users to securely log into the platform.
Folder Structure: Organized files into frontend and backend directories for better management.
Login Page: A functional login page for users to access the platform securely.
Styling: Used Tailwind CSS to style the application with modern, responsive design principles.
I focused on setting up the backend for the e-commerce application. This milestone involved organizing the backend code, connecting the application to MongoDB, setting up a Node.js server, and implementing basic error handling to ensure smooth operation.
Backend Folder Structure: I organized the backend code into a structured hierarchy, with separate folders for routes, controllers, models, and middleware.
Server Setup: I initialized a Node.js server using Express and configured it to listen on a designated port, ready to handle incoming API requests.
MongoDB Integration: I connected the application to MongoDB, ensuring efficient data storage and retrieval.
Error Handling: I implemented basic error handling to provide clear messages for debugging and better user feedback when something goes wrong.
Backend Organization: Set up a clean folder structure for organizing backend files.
Server Initialization: Configured a basic Node.js server using Express.
Database Connection: Successfully integrated MongoDB for data management.
Error Handling: Added basic error handling for smoother server operation.
I expanded the backend functionality of the e-commerce application by introducing user data management and file uploads. This involved creating a User Model and Controller, as well as configuring Multer for handling file uploads like profile pictures.
User Model Creation: Designed a blueprint for user data, specifying fields like name, email, and password using a MongoDB schema.
User Controller: Implemented logic to manage user-related operations, such as adding new users and retrieving their information. File Uploads with Multer: Configured Multer to handle and store file uploads securely, enabling the application to accept user-uploaded images.
User Model: Defined the structure for user data in the database using MongoDB schemas.
User Controller: Managed server-side operations related to users, like handling requests for user registration or retrieval.
File Uploads: Enabled file upload functionality, allowing users to upload profile pictures that are stored on the server.
In this milestone, we focused on enhancing the frontend by building the Sign-Up Page and setting up routes to handle the user sign-up process smoothly.
By completing this milestone, we:
Created the frontend UI for users to register by filling out their details.
Implemented form validation to ensure user inputs (like email and password) met the required criteria before submission.
The Sign-Up page allowed users to enter their details to create an account. This page included fields for:
-
Name
-
Email
-
Password
It provided users with a structured way to submit their information, which was then sent to the server for processing.
Form validation was implemented to ensure users entered correct and properly formatted information.
Email addresses were validated to match a standard email format.
Passwords were checked to meet security criteria (e.g., minimum length).
Invalid inputs were restricted to prevent errors and ensure the backend received clean data.
In this milestone, we focused on developing the backend for the Signup page, ensuring that user data is securely stored in the database.
By completing this milestone, we:
Learned how to encrypt passwords before saving them.
Stored complete user data securely in the database.
Encrypting the Password
Used bcrypt to hash the user's password during signup.
Stored the hashed password in the database instead of plain text.
Storing Complete User Data
Saved all user details (e.g., name, email, etc.) securely in the database.
Ensured the password remained encrypted.
This milestone focused on implementing a backend endpoint for user login. The main objectives were to validate user credentials and verify the encrypted password stored in the database.
- Created Login Endpoint:
Accepted user credentials (email/username and password).
Retrieved the corresponding user from the database.
- Validated Password:
Used bcrypt to hash the entered password.
Compared it with the stored hashed password for authentication.
This milestone focused on creating a frontend card component for products and designing a homepage to display these cards for each product.
Learned how to create a card component.
Learned how to display those cards on the products page.
Created a reusable card component for displaying product details.
Used props to pass product information dynamically.
Implemented array mapping to render multiple product cards.
Designed a structured homepage layout usinG TAILWIND CSS.
Learn how to create a form to collect product details Learn how to take multiple images as input
- The form will be used to input product details, which will be saved in the database and displayed on the product home page
- The form should support uploading multiple product images
- Learned how to write a product schema using Mongoose
- Learned how to create an endpoint to validate and store product details in MongoDB
- Product Schema
- Defined the structure of product data, including fields like name, description, price, and image URL
- Ensured proper validation, such as required fields and correct data types
- Built a POST endpoint to receive product data
- Validated and stored the product details in MongoDB
In this milestone, we have made our home page dynamic by fetching product data from MongoDB and displaying it using our product card component. This enhances our application's functionality by integrating backend and frontend components effectively.
-
API endpoint to fetch all product data from MongoDB.
-
Frontend function to retrieve and display data.
-
Dynamic rendering of products using the product card component.
In this milestone, we will create a My Products page that displays all products added by the logged-in user. We will achieve this by writing a backend endpoint that fetches products from MongoDB based on the user's email and dynamically rendering them in the frontend using a product card component.
-
Backend Endpoint: Fetches all products associated with the logged-in user's email.
-
Frontend Data Fetching: Calls the backend API to retrieve the user's products.
-
Dynamic Rendering: Displays products dynamically using the existing product card component.
-
Filtering Data: Understand how to filter database records based on constraints (user email).
-
Created an endpoint to fetch products from MongoDB where email matches the logged-in user.
-
Used Express and Mongoose to query and return the filtered data.
-
Wrote a function to call the backend API and fetch the user’s products.
-
Rendered the product data dynamically using the existing product card component.
In this milestone, we implemented functionality to edit previously uploaded products. This includes adding an edit button to each product card and creating a backend endpoint to update product details inside a MongoDB database.
###🎯 Learning Goals
-
By completing this milestone, we learned:
-
How to write an API endpoint to update existing data in MongoDB.
-
How to auto-fill a form with existing data for editing.
-
How to update and save the modified details back to the database.
-
Created an Express.js endpoint to handle PUT requests for updating product details in MongoDB.
-
Used Mongoose to find the product by its ID and update the details.
-
Added an "Edit" button to each product card.
-
When clicked, it pre-fills a form with the product's existing details.
-
Allowed users to modify the details and save changes.
In this milestone, we implemented functionality to delete products. This includes adding a delete button to each product card and creating a backend endpoint to remove a product from the MongoDB database using its ID.
-
By completing this milestone, we learned:
-
How to write an API endpoint to delete a product using its ID in MongoDB.
-
How to trigger a delete action from the frontend and communicate with the backend.
-
How to ensure a seamless user experience when deleting a product.
-
Created an Express.js endpoint to handle DELETE requests for removing products from MongoDB.
-
Used Mongoose to find the product by its ID and delete it.
-
Added a "Delete" button to each product card.
-
When clicked, it sends the product ID to the backend endpoint.
-
Removed the product from the UI upon successful deletion.
In this milestone, you'll learn how to create a Navbar component in React and reuse it across multiple pages to navigate smoothly between different parts of your application.
By the end of this milestone, you will understand:
How to create a Navbar component in React.
How to reuse the Navbar component across multiple pages.
How to make the Navbar responsive for all screen sizes.
How to enable smooth navigation between pages using React.
A Navbar component with navigation links to:
-
Home
-
My Products
-
Add Product
-
Cart
-
Reusable Navbar on every page.
-
Responsive design for all screen sizes.
-
Seamless navigation between pages.
In this milestone, I have created a Product Info Page that displays detailed product information, allows users to select the desired quantity, and provides an Add to Cart button.
By completing this milestone, I learned:
How to create a new page to display product information.
How to add a quantity selector.
How to implement an Add to Cart button.
Display detailed product information.
Option to choose product quantity.
Button to Add to Cart.
Navigation to this page from the Product List.
By the end of this milestone, you will:
Edit the User Schema to store cart products.
Write an API endpoint to receive product details and store them in the database.
- Create Cart Schema
Define the Cart Schema to store product information.
Link cart items to the User Schema.
- Write the Endpoint
Create an endpoint to receive product details.
Store the product in the User's cart inside the database.
In this milestone, we have created a Backend Endpoint to fetch all products inside the user's cart based on their email ID. This functionality helps display cart items on the cart page.
-
Create an endpoint to receive requests from the cart page.
-
Fetch all products from the cart for the logged-in user using their email ID.
-
API Endpoint to fetch cart items.
-
Filter cart products using user email.
-
Connect backend with the cart page.
-
Create a cart page UI to display products.
-
Add + and - buttons to increase or decrease product quantity.
-
Build backend endpoints to update product quantity.
-
Frontend:
-
Display cart products fetched from the backend.
-
Buttons to increase or decrease product quantity.
-
Automatic cart updates on button click.
-
Endpoint to increase product quantity.
-
Endpoint to decrease product quantity.
-
Create a backend endpoint to send user data via email.
-
Build a frontend profile page to display user information.
-
Display profile photo, name, email, and addresses.
-
Profile page displaying user photo, name, and email.
-
Address section with an "Add Address" button.
-
Message showing "No address found" if no addresses are available.
-
Endpoint to fetch user data including name, email, and addresses.
-
Endpoint to send user data via email.
In this milestone, we created a frontend page with an address input form. This form allows users to enter their address details, including country, city, address lines, zip code, and address type.
User-friendly address form with input fields for:
-
Country
-
City
-
Address Line 1
-
Address Line 2
-
Zip Code
-
Address Type
-
State management to store input data.
-
Navigation from the profile section when clicking “Add Address.”
In Milestone 22, we will create a backend endpoint to store user addresses in a database. This endpoint will receive address details from the frontend and update the user's profile by adding the address to the address array inside the user collection.
- Create an API endpoint to handle address storage.
- Receive address data from the frontend form.
- Update the user collection by adding the address to the existing address array.
- Ensure data persistence by storing the updated user profile in the database.
- Enhance user profiles with multiple addresses.
In Milestone 23, we implemented the "Place Order" functionality in the frontend and defined the product schema for orders in the backend. This milestone helps in understanding how to handle order placement and address selection efficiently.
-
Place Order Button: Added a button inside the cart page to initiate the order placement process.
-
Select Address Page: Created a new page to display all available addresses and allow users to select a delivery address.
-
Order Schema: Defined a Mongoose schema to store order details.
-
Get Addresses Endpoint: Implemented an API endpoint to fetch all addresses associated with a user.
In Milestone 24, we implemented the order confirmation page in the frontend, where users can review their order details before placing it. This milestone focuses on enhancing the user experience in the order placement process.
-
Order Confirmation Page: Created a page to display the products being ordered.
-
Selected Address Display: Showcased the user's chosen delivery address.
-
Total Price Calculation: Displayed the total value of the cart.
-
Final Place Order Button: Added a button at the bottom to confirm and place the order.
This milestone focuses on creating a backend endpoint to place an order. The endpoint will handle products, user details, and address information, storing order details in MongoDB.
- Accepts user email, product details, and address as input.
- Retrieves the user’s _id using their email.
- Creates separate orders for each product with the same address.
- Saves order details in the MongoDB orders collection using the existing schema.
This milestone focuses on creating a backend endpoint to retrieve all orders of a user using their email.
- Accepts user email as input.
- Retrieves the user’s _id using their email.
- Fetches all orders associated with the user’s _id.
- Returns the user's order details in the response.
The My Orders page allows users to view all their previous orders. It fetches order details from the backend by sending a GET request to the /my-orders endpoint with the user's email as a query parameter.
-
Fetches user orders from the backend.
-
Displays the list of orders.
-
Adds a "My Orders" link in the navigation bar for easy access
The My Orders page allows users to view all their previous orders. It fetches order details from the backend by sending a GET request to the /my-orders endpoint with the user's email as a query parameter. Additionally, users can cancel their placed orders.
-
Fetches user orders from the backend.
-
Displays the list of orders.
-
Allows users to cancel orders.
-
Hides the cancel button if the order is already canceled.
-
Adds a "My Orders" link in the navigation bar for easy access.
Milestone 29
Overview In this milestone, we integrate an online payment gateway into our application using the PayPal API. Users can now choose between Cash on Delivery (COD) and online payment when confirming an order. If they select online payment, PayPal buttons will be displayed for processing the transaction.
Learning Goals
- Understand how to use the PayPal API.
- Learn how to integrate online payments into an application.
Steps for Milestone 29 1️- Create a PayPal Account
Sign up or log in to the PayPal Developer Dashboard.
Navigate to Sandbox Accounts and copy the User ID for testing.
Find and copy the Client ID from the developer dashboard.
2️- Modify the Order Confirmation Page
Add radio buttons to allow users to select COD or Online Payment.
When selecting Online Payment, display the PayPal payment buttons.
3️- Prepare for the Next Milestone
In the next milestone, we will implement PayPal payment processing.
Submission Guidelines
- Push all code changes to your GitHub repository.
- Ensure the repository is publicly accessible.
- Update the README file with a section titled Milestone 29 summarizing the progress.
- Submit the repository link in the assignment submission section.
Milestone 30
Overview
In this milestone, we implement PayPal payment processing in our application. Building on Milestone 29, where we integrated PayPal buttons, we now enable users to complete transactions using PayPal. This ensures a seamless and secure online payment experience.
Learning Goals
Understand how to process payments using the PayPal API.
Learn how to integrate react-paypal-js for handling transactions.
Implement PayPal payment options for credit/debit card and PayPal wallet payments.
Steps for Milestone 31
- Install and Set Up PayPal SDK Installed the react-paypal-js package to manage PayPal payments.
Wrapped the application with PayPalScriptProvider for global PayPal access.
- Implement PayPal Payment Processing Added PayPal buttons to the checkout page.
Configured order creation and transaction approval logic.
Captured payments and displayed transaction details upon successful completion.
- Update Order Confirmation Page Ensured PayPal buttons appear only when the user selects online payment.
Improved user experience by handling payment status updates.
Submission Guidelines Pushed all code changes to the GitHub repository.
Made sure the repository is publicly accessible.
Updated the README file with a section titled Milestone 30 summarizing the progress.
Submitted the repository link in the assignment submission section.