6 min readMay 9, 2022

Construct Week of Unit-3 | Project — Geekbuying

Greetings Everyone. Hope everyone is doing great. We have cloned a website called Geekbuying.

Currently, we’re pursuing a Full Stack Web Development course at Masai School. We’re in unit-3. At the end of unit-3, Masai School gives a project to clone based on the syllabus of unit-3. We have to clone based on whatever we have learned so far till unit-3.

They have assigned us a Project name called Geekbuying.

Techstacks we have used to clone geekbuying projects are Html, CSS, and Javascript.

There were six people in a group, each person contributed equally to this project.
We took six days to clone this project and the overall construct is about seven days.
My teammates are Manoj Kumar, Shubham Singh Bhadouria, Md Naquee Alam, Ganesh Tarachand More, and Rupesh Sahu including me Pragati Tiwari.

Project Details :

Geekbuying is the ultimate shopping hub for new releases covering smart home products like vacuum cleaners, fitness equipment like treadmills, top-of-the-line home and office furniture, outdoor items including e-bikes, scooters, and other consumer goods like TV boxes, RC Toys and so much more! Shop for your favorite brands and products today.

Our task was to clone the homepage (landing page), SignUp, login page, product page, cart page, checkout page, payment page, etc.

Home page (Landing page ):

Naquee has built a homepage i.e landing page.

HTML , CSS
Javascript
Browser LocalStorage for Frontend
Fetching
ES6
API

These are some snapshots of our website

Landing Page:-

Product Page:-

Footer:-

Login page /Signup page:

Shubham’s task was to create pages such as Sign in, Sign up, cart, and checkout page. The tech stacks that are used while building the pages were HTML, CSS, and Javascript. The Sign-in page and Signup page didn’t take long to get built because they mostly consist of HTML and CSS parts and have basic functionalities like creating input and appending the data to local storage. So, the flow of the website is like creating an account on the signup page and using the same data to login into the website.

About My Task:

I built two product pages i.e product.html and kitchen.html. In the product pages, I have created an auto slider, for creating this I have used set timeout. On the left side of the slider, I have put a menu of products like E-Bikes, Scooters & wheels, Cycling, Outdoor Recreation, Sports, and Hiking, etc.

Product page

I have also used functionality to filter products by brands and sort the products by prices.

I have created an array of objects to store the whole data of a product and after that, I have worked on the Js functionality part to append the array of object products data on a browser.

As you can see in the above image I have created a Pricing, rating, and wishlist. Based on your choice you can select products on a wishlist. Once you click on a product’s image it will redirect to the cart.html page.

Kitchen page :

On this page, I have used an array of objects to append kitchen products on a browser In the top section I have placed a discount offer for products with yellow color with a border-radius.

I have used a grid, button, rating, and wishlist same as the product page, etc.

1. New-Arrivals Page:

Ganesh's task was to build two product pages and one coupon page i.e new.html,top-seller .html, and coupon.html In the product pages. On the left side of the slider, I have put a Drop Down menu of products like Smart Home & Garden, Consumer Electronics, Sports & Outdoors Computers, Tablets & Acc .., Wearable Devices, etc.

On this page, the latest products are shown as you can see in the above image. I have also used functionality to filter which country of origin of the product and the sorting of the products by price.

I have created an array of objects to store the whole data of a product and after that, I have worked on the Js functionality part to append the array of object products data on a browser.

As you can see in the above image I have created a Pricing wishlist. Based on your choice you can select products on a wishlist. Once you click on a product’s image it will redirect to the add_to_cart.html page.

I have also added a horizontal slider for Recommendations.

2.Top-seller Page:

On this page, the functionality is the same as the new-arrivals page.

The below page shows the top-seller products with a 5-star rating. on clicking on the heart button it will turn red and added this product in the wishlist.html page

3. Coupon Page

In the coupon pages, I have created an auto slider, for creating this I have used set timeout. On this page, I used Grid and flex for better design. And I have also added functionality for moving images on hover.