Hello there, you might have seen an Ajio website, where you can purchase any trending brands of clothing, footwear, and other accessories by sitting in 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 one week 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 HTML, CSS, and Javascript. We were six members of 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.
Sign Up 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.
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.
Product 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.
Quick View Page:
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 Page:
This is our product details page where you can see the product details and add them to the 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 the cart. On this page, you can select the size you want and increase the quantity if you want. 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 modes. You can choose any kind of payment mode.
Order Confirmation 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 two or three meetings 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
