Building the clone of Ajio website.
Hello there, you might have seen an Ajio website, where you can purchase any trending brands of clothing, footwear and other accessories by sitting at one place.
Moving ahead, we are a team of 6 members at Masai School . We have developed a clone of the website of ajio.com in just 4 days as a part of our curriculum. This blog is all about our journey and the challenges we faced while building the project.
What was my problem statement and how did I approach it:-
So I had a problem statement that I have to create a clone of a website called ajio.com. Also, I can only use my HTML, CSS,JavaScript and express,node for the backend. We were six members in our team.
Here are some glimpses of our website:-
Landing Page :
This is the landing page of our website, which has a navbar, drop-down with the individual categories, and also shows some banners and a set of categories.
SignUp Page :
It’s our signup page whenever you click on the Sign In/Join Ajio you will get a popup window where you will be asked to fill in the basic information and also if you want to sign with google, facebook SSO’s are working.
Login Page :
This is our login page where you need to enter your email and password which you have used in the process of signing in ,otherwise you just simply click on the google or facebook to log in to our site.
Products Page :
Whenever you click on any category of a product then you will get into their respective products page, where you can see the set of products with a set of pages.
Quick View :
This is our quick view of an individual product. whenever you hover on any particular product then you will see a quick view button on the product image. Once you click on it it shows a pop-up with the basic product details of that particular product.
Product Details :
This is our product details page where you can see the product details and add to cart button and at the bottom, you will see similar products related to the product you have visited.
Cart Page :
This is our cart’s page where you will see the products you have added to cart. In this page, you can select the size you want and increase the quantity if you want.
There’s is also a delete option like if you want remove the particular itemfrom the cart you just click on the delete button where you are able to delete the product from the cart.
There’s also a wishlist option if you want to wishlist a particular item and also you can also remove it from the wishlist by clicking again.
Address Page :
Once you have clicked on the proceed to checkout then you will get into the address page with the order summary .
If you’re a new user then you need to click on the add address, then you will get a popup address. In which you need to fill in the shipping details to get your order.
Payments Page :
As soon as you click on the proceed to checkout you will get redirected to the payment’s page where you will a set of payment mode . You can choose any kind of payment mode.
Summary Page :
Once you have finished the payment successfully, you get redirected to the summary page . Where you will be given a message with order-id and you will also get an order summary of you products you have ordered.
How We divided the work in our Team members:-
- We have met on zoom and we all have gone through the full website. Then we have analyzed the things that we need to implement.
- Once we analyzed the things, we have asked each and every member of our group who are good at what. With that responses, we have divided our work respected their skill, and started working.
- On each day we had a meeting to know what are the things the individuals are doing. With such collaboration, we have solved the issues and developed a fully functional.
The outcome and important learning from the project:-
This entire journey of making the project was awesome. We have learned a lot of things by applying to the real website and it gave us a lot of confidence.
Tech Stack we have used:
- HTML .
- CSS.
- JavaScript.
- Tailwind CSS.
- Node.js
- Express.js
- MongoDB
