Hello amigos, This is Shubham with a new project. This time I worked with more two members Manish Kumar Nayak and Tushar Sampat Taral and I was lucky to have them on my team. We built a clone of Shoppersstop.com which is an E-Commerce platform allows user to buy products online like clothes, shoes, etc.

We utilized React, Redux, React-Redux, Redux-thunks, Styled-Components, Material-Ui, Firebase, Express, Axios-restful, MongoDB, MongoAtlas to build the clone. We had great fun and learned many things during this period.

My Approach to Objective

First of all, I made the Github repository and set up the app in my system after installing the required npm dependencies. I have made the folder structure and told my team members to build a specific part of the app. My primary objective was to meet the deadline of 3 weeks and come out with a fantastic product which was to have all the functionalities that shoppersstop.com has. And the good news is that we did it successfully.

My responsibilities

My responsibility in this project was to handle Github Repository, Registration Page, Login Page, User Authentication with firebase, Cart Page, Payment Page, Coupon, User Dashboard, Orders Page, Address Page, API(Using Express), and maintaining the state flow throughout the app using redux.

Let me take you through our work -

Landing Page

Here we put a cool Navbar that shows all categories of products on hover. The bottom part of NavBar hides on scrolling down. Have nice carousels for cycling through a series of banners. we have also put an advanced search bar where users can search for a product or a category.

Registration Page

We implemented the registration process with the help of firebase authentication and we merged mobile authentication with email authentication for a particular user. we have made it pixel perfect. Users can sign up with mobile OTP and register themselves with mobile along with email Id and password.

Login Page

On the user login page, we allowed the user to log in with an email id and password. In case the user forgot his password he can request a new password by clicking over forgot password link.

Products Page

On the Product Page, users can see all listed products under the selected category. Users can also filter results on the basis of price, category, and discount.

Product Description Page

Once users choose any particular product they will land on a product description page where the user can choose a size and put it into a bag.

Cart Page

On the Cart Page, users can see all selected products with their actual prices and discount offered. Users can proceed with payment after choosing the required quantity.

Payment Page

Here users can store their address and pay with their preferred mode of payment. Users can also apply coupons for a discount.

User Dashboard Page

Here users can see their detailed personalized information, users can reset the password and users can verify their mail address. Users can also see stored addresses and all transactions.

Conclusion

Overall this week was a fantastic journey got a handy experience of MongoDB and express with React and learned lots of CSS features. Thank you very much for giving your valuable time and reading this blog hope you enjoyed this.