We have been learning Full Stack-Web Development at Masai School.We would like to share our construct week project that we have made during unit-3 at Masai school.Here is the link of our homedepot cone site.
[https://visionary-pastelito-fbdbfd.netlify.app/]
HTML
CSS
JAVASCRIPT (DOM Manipulation & Local Storage)
This is the main landing page of our website. Here clicking on any option on the Navbar will redirect the user to the respective Product’s Page.
Clicking on the select ZIP code will select the city of your choice and we have a search bar where anybody can search their respective products easily.
Clicking on Login will redirect to the Login/SignUp page for login and sign up. Clicking on Cart will display a cart window where all the products added to the cart will be shown.
Now coming on landing page products. We have put our top selling products which generally Customers tend to prefer. Users can directly purchase it from here also. All of these functions are working properly.
After the user is redirected to the Signup page
The user simply needs to register to the site using a mobile number or Email.
The user can choose the type of account he needs. Below is the screenshot of this page.
By clicking on select&continue, a user is redirected to a new page depending on his/her need.
Using these Login credentials, users can access website services through the Login page.
This is one of the product pages of our website.
In this user gets a regular update about new deals, reducing product Price, and offers to come in Homedepot.
Users can shop by category according to their needs.
Clicking on the Add To Cart Button of that product will add the product to the cart.
Users can click on the cart button to know about their shopping details.
On the cart page, All products added to the cart will be shown. At the bottom, there is the total price of the shopped products in the cart. Below is the page of the cart, where the user can know his shopping details.
and then proceed to the Checkout button. Clicking on that button will redirect the user to the Address Page.
Here the user has to fill in his payment details and click Confirm for payment.
Clicking on that button will place your order and redirect you to the order placed page
This page shows regarding all the products about vases.We have provided add to cart button here to shop.Below is the snap
Apart from products,appliances and goods this site also provides project ideas and their installation .
.We have provided tutorial videos on installations,projects.
Below is the snap
This page is useful to calculate the total cost estimation of Projects choosed by customer.
Below is the snap
It was a challenging journey for me and all my team members to develop this Site. We all were excited and self-motivated to make this clone as good as the real Homedepot website.
On the night of the first day of construct week, we arranged a Zoom meeting and decided what features will we be adding to the website & also decided our roles & responsibilities.
Communication is a crucial factor for any project and the work has to be done as a team., so we used technologies like slack, WhatsApp, and zoom to know each other's progress. We started our day with a scrum using Zoom at 10:00 in the morning and used WhatsApp for further Work-related queries. The main tool that we used for collaboration & version control is GitHub Desktop & GitHub Browser. Working on the same page might make some merge errors. So we decided that each and everyone will work on different parts of the project.
We all became proficient in reading the code of team members.
Our code writing style became cleaner as we had to think while writing code that other team members will be reading.
We had to learn about many CSS properties that we didn’t know before.
Our skills in JavaScript and DOM manipulation became better.
We all learned how to plan a project and execute that.
The Contributors to this project are:
Shilajit Paul:(medium Blog Link) https://medium.com/@shilajit2014paul/masai-collaboration-project-homedepot-clone-7147af646322
Soumya Hakke:(medium Blog Link) https://medium.com/@soums816/masai-collaboration-project-homedepot-clone-c3eb82fb6f5c
Atul Kumar Panigrahi: (medium Blog Link) https://medium.com/@AtulKumar69/masai-collaboration-project-homedepot-clone-f67f7fcfd076
Prithvi Raj Keerthi:(medium Blog Link) https://medium.com/@prithvirajkeerthi/masai-collaboration-project-homedepot-clone-11ba6bd1d133
Rasheed Shaik:(medium Blog Link) https://medium.com/@rasheedsheikh9786/masai-collaboration-project-homedepot-clone-23272ae317ef