Hello, hope you are doing well. I am Rounak Abraham a FT-WEB-16 student at Masai School. Currently I am in Unit-3.
Its the construct week and me and my teammates Sangam Kumar Singh, Ratnesh Pandey, Neha Kumari, Ravi Bhushan and K Prabina Choudhury cloned the website dunzo.com.
Dunzo is an Indian company that delivers groceries and essentials, fruits and vegetables, meat, pet supplies, food, and medicines in major cities.
We have used HTML, CSS and Java Script to build this website.
When you visit our website you will directed to the landing page by default. The landing page is made by me. The image below is the screenshot of our landing page:
You need to click on the signin button on the top right corner of the website in order to signin. This is a screenshot of the signin button:
After you click on the signin button a popup window will appear when you have to enter your phone number. This is a screenshot of the popup window:
After you enter your phone number and accept the terms you can click on the send otp button.
After clicking on the send otp button you will have to enter the otp that is hard coded to 123456. This is a screenshot of the otp window:
After entering the otp click on verify and continue button and your phone number gets added to the local storage.
You are signed in now and the signin button changes to profile icon.
You can now click on any of the boxes you want to visit like groceries, fruits and vegetables, meat and fish and pan shop.
If you click on groceries box you will be redirected to the groceries page where can see different grocery stores.This page was created by Sangam Kumar Singh. This is a screenshot of the groceries page:
If you click on any store you will be redirected to the store page. This is a screenshot of the store page:
In this page you can browse different item types by clicking on the left of the screen. The items displayed on the center of the screen are updated accordingly.
When you click on add button the item gets added to cart and is displayed on the right of the screen. This is a screenshot of the page:
When you click on add button of the same item more than once the quantity of the item gets incremented in the cart.
You can also increase and decrease the quantity of the cart item by clicking on the plus and minus button of the cart items.
If a particular item quantity is zero then it is removed from the cart.
When you click on checkout button on the bottom right corner of the page you will be redirected to the payment page.
Rest of the pages like fruits and vegetables which was made by Neha Kumari, meat and fish which was made by K Prabina Choudhury and pan shop which was made by Ravi Bhushan also have the same functionalities like the groceries page.
When you go to the payment page there is a button pay using debit/credit card. This is the screenshot of the payment page:
When you click on that button a popup window appears where you have to enter your card details. This is the screenshot of the popup window:
After entering the card details when you click on save you will be redirected to the generate otp page. This is the screenshot of the generate otp page:
When you click on generate otp button a random otp will be generate on your screen. You have to note it down and click on ok button. This is the screenshot of the page:
When you click on ok button you will redirected to the verify otp page where you have to enter the same otp you generated earlier.
In case you enter the wrong otp an alert message will be shown. This is the screenshot of the alert message:
When you enter the correct otp you will receive an alert message to down the receipt. Click on ok button to see receipt. This is a screenshot of the alert message:
When you click on ok button you will be redirected to the receipt page where you will be able to see the items you ordered, the quantity and the price of each item.
That's all. Thank you.
Live project link - https://stirring-mandazi-87d93f.netlify.app/
Project presentation video - https://drive.google.com/file/d/1PYQ_S90wm8KRFOEAnZ3b0MFXO_zh69qF/view?usp=sharing