Built Myntra Clone Using Express, Node and MongoDB

About the project

The project was initially built based on HTML, CSS and pure JS. Our team has extended the project functionalities by using Expressjs, Nodejs and MongoDB. This project is built in the construct week of Masai School by the team of three — Bicky Dutta, Deevanshu Kumawat and Hemanth Kumar Kona. In this project, we have tried to make a look-alike clone of the Myntra Website. With our efforts and the technology stack, that we have learned till now in Unit-3 in Masai School, we were able to clone the webpage with similar looks and features.

How we built

• We have deconstructed our old project first into small components.
• We have installed all necessary npm packages and set up the cloud database.
• Now, we have built the routers in our Express app to call and send requests to our database.
• We have started picking up the small features and implementing the backend into them.

New features added

The most important features we have added to the website

• Secured user authentication and proper Login/Signup or Logout feature
• Depended on cloud database instead of localStorage
• Dynamic and easy to use Cart and Wishlist pages
• Proper use of Filters at the product page
• Easy to access Search Bar

Technology used

To manage Backend

• Nodejs
• Expressjs
• MongoDB

To manage the database

• Mongo Atlas Cloud Database

To display the functionalities

• CSS
• EJS
• JavaScript

Libraries & Packages Used

• All the image and icon links have been taken from the main website ( https://www.myntra.com/ )
• NPM Packages
  → ejs EJS made our life easy because it was easy to include small components in the file and we were able to write JavaScript and call our Routers in a simple way.
  → express Our project is now completely an expressjs app. We were able to fetch data through routers in a very easy manner.
  → mongoose - We have used Mongoose to implement MongoDB in our project.
  → bcryptjs - Bcrypt was used to make user authentication more secured and dynamic. It converts the user's password into a hashcode and that hashcode gets saved in the database instead of the actual password.
  → jsonwebtoken - JWT or JSON Web Token generates a token number at every login and it decodes the password which was initially converted into a hashcode by Bcrypt.
  → cors - It unblocks the cross-origin request and allows reading the remote resources.

Run into your local system

• Clone the project

git clone https://github.com/imbickydutta/myntra

• Install npm packages

npm install

Screenshots

Some glimpse of the project

Conclusion

The whole flow was built in 7 days, and we are looking for more projects like this in the future. Initially, implementing these kinds of functionalities were possible, but tough to execute in the code. But with time, when we learnt more stacks and got introduced to new technologies, implementation became easy. In future, we will polish this project more and try to bring complete end-to-end flow.

Team Members

• Bicky Dutta — https://github.com/imbickydutta
• Deevanshu Kumawat — https://github.com/dvanshukumawat
• Hemanth Kumar Kona — https://github.com/hmntk

References

• Myntra — https://www.myntra.com
• NPM — https://www.npmjs.com/