E--commerce-website Milestone 1: Project Overview- In this milestone, we demonstrated the working of MERN Stack. And by using the MERN stack we are going to bulid an e-commerce website
Which is,
M - MongoDB - Used to handle databases
E - Express.js - Used to easily handle severs
R - React.js - Used for frontedend
N - Node.js - Used with express.js for server handling
**Project Features :- ** Pages Authentication
Login / Signup functionality. User validation and session management. Product Page
Displays all available products. Allows users to view product details. Orders Page
Lists all orders made by the user. Displays order history and details. Payment Gateway
Integrates a secure payment system. Handles transactions seamlessly. Milestone 2: Project Overview - In this milestone we learned how to setup a development enviroment for a backend project and also started with making Basic UI for Login page.-
Key Learnings -
Learned tailwind css for login page UI Learned to setup basic tools used in backend like - express mongoose dotenv nodemon cookie-parser nodemailer etc... And learned Basic react Routing. Milestone 3: Project Overview - In this milestone we have learned how to setup basic backend configurations -
Key learnings -
Learned how to use express js. Learned how to use the mongodb database and connect it with our server code. Learned to use jsonWebTokens for authentications. And finally learned to effectively handle the errors. Milestone 4: Project Overview - In this milestone we learned the following things -
Key learnings -
We learned how to use mongoose schema We learned how to install and use multer We learned password hashing using bcrypt And lastly we learned about usage of jsonWebTokens for authentication. Milestone 5: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created Signup page. We have also implemented multer features. Milestone 6: Project Overview - In this milestone we learned the following things -
Key learnings -
We learned to hashe the password. We also learned how to store the user credentials. We also implemented the logic of if the user exists, if user not exists then we have created the user. Milestone 7: Project Overview - In this milestone we learned the following things -
Key learnings -
We learned and created Login Endpoint. We have also created password and email validation. Milestone 8: Project Overview - In this milestone we learned the following things -
Key learnings -
We learned and created reusable card component with props for product details (e.g., name, image, price). We have also setup a grid layout or flexbox for displaying multiple cards neatly. Milestone 9: Project Overview - In this milestone we learned the following things -
Key learnings -
We Create the form for products. We have also made this form functional such that this form will take multiple product images as input. Milestone 10: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an endpoint to create a product. We have also configured the multer to upload the multiples images of the product. Milestone 11: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an endpoint that will send data from extract and send data from mongodb. We have also receive data at frontend and display that data dynamically using product card created earlier. Milestone 12: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an an endpoint that will send data by filtering with mail's and send data from mongodb. We have also learned how to display that data dynamically using product card created earlier. Milestone 13: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an endpoint that will update the existing data in MongoDB. We have also implemented the logic of auto filling the form with previous data and give option to edit. Milestone 14: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an endpoint that delete the product with specific ID from MongoDB. Milestone 15: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created an new Navbar with links to all pages. We have also implemented the Navbar responsive to all screen sizes. Milestone 16: Project Overview - In this milestone we learned the following things -
Key learnings -
We have an product info page that display all the product data. We have also implemented the quantity button and add to card button. Milestone 17: Project Overview - In this milestone we learned the following things -
Key learnings -
We have edited the user schema to store cart products . We have also implemented an end point to receive the product details and store in database. Milestone 18: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an endpoint to receive request from cart page. We have also create an backend endpoint to fetch all the products inside cart with user mail. Milestone 19: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an cart page that display the products inside cart using endpoint we build in milestone 18. We have also implemented the logic for each product where an add option is made available to increase and decrease quantity using + and - buttons. We have also created an endpoint to increase and decrease the quantity Milestone 20: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an Backend endpoint that will sent user data. Also create frontend profile page that will display profile photo, name and email in one section. If there are no address display "No address found"y In another section we have displayed address and added an button called "Add address". Milestone 21: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create address form in frontend page. We have also create an state that will store input address We have also impmented the logic where we click on add address in profile it should navigate to this form page. Milestone 22: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an endpoint that will receive the address from address form in frontend. We have also added the address to the address array inside user collection.
Milestone 23: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an placeorder button inside cart page and navigate to select address page when clicked. We have also create and select address page that will display all the available address and have an option to select one address. Created an backend endpoint that will send all the addresses of the user.
Milestone 24: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created and displayed all the products we are ordering. Then we have displayed the address user selected for delivery. We have also displayed the total value of the cart. We have also place an order button at the bottom.
Milestone 25: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an endpoint that will receive the products, user, address details.
Milestone 26: Project Overview - In this milestone we learned the following things -
Key learnings -
We have create an endpoint that will receive the user mail.
Milestone 27: Project Overview - In this milestone we learned the following things -
Key learnings -
We have created my-orders page We have send an request to my-orders endpoint that was created in previous milestone. We will send user mail in to endpoint to get all the user orders and display all the user orders We have added my-orders page in navbar for better navigation.
Milestone 28: Project Overview - In this milestone we learned the following things -
Key learnings -
We have added cancel order button. If the order is already canceled this button is not displayed We have created an endpoint that will receive the order-id We have get the order using this id and mark the status canceled and save
Milestone 29: Project Overview - In this milestone we learned the following things -
Key learnings -
We have configured the PayPal Sandbox Integration for Online Payments We have also added an radio button to for the COD and Online Payments
Milestone 31: Project Overview - In this milestone we learned the following things -
Key learning -
How to use redux for global state management Implement redux store to store all global states