This project is a clone of (HealthKart.com) which is India’s largest online health & fitness store for men and women. Shop online from the latest collections of health, fitness and similar products featuring the best brands.. It is our unit-4 construct week project as a part of our curriculum in Masai School. This company lead to the expansion of Fitness, Weight gain, Weight loss etc categories further in the e-health space.
- Validation
- Autentication
- File Upload
- Dynamic Address page and Login page
- Google authentication
The tech Stack we used for creating this webiste are:-
- HTML
- CSS
- JavaScript
- MongoDb
- Ejs
- Node JS
- Express JS
The Landing page of HealthKart.com displays the navigation bar for products, Learn about a particular product, pricing for the product, Cart Page and the login & signup part, along with the Flash Sale, Trending Now Products, Popular in Various categories, Just launched Products.
We have designed the carousel functionality of products using javascript as assigning the event listeners to the arrow buttons and containing each product in a different container and put all the products in a container at last and overflow the image and user the attributes like visibility hidden and trigger on the event listeners. Even if event listeners are not triggered product is carousel after a set interval of time using the Setinterval function. We used javascript to append various products in HTML page using an array of objects along with CSS for styling the containers
Men's section contains products specifically for men's
The women's section contains products specifically for women
After the successful completion of the signup, your mobile number, username and password are stored in the local storage and you can log in with that credentials, if the mobile number and password are incorrect it will fail the validation and you cannot log in to the website.
The product page contains various products from various categories which could be filtered using multiple filters present on-page to select from.
whenever any product is added to the cart, the Cart page display no. of products added to the cart and a container containing the product you added to the cart. From where you can change the quantity of a particular product. It also has a coupon code section where you can get a 30% discount by typing " masai30 " on the product. Besides that, you can place an order by clicking on the "Place Order" button.
The address is taken from the user and sent to localStorage so this address could be used further used in the payment page to select from multiple addresses entered.
The idea was to make a payment page that is not functional, but the carrier can take the dummy input that the user provides. basically, it was just a dummy Static page with a minimum amount of CSS present.
Download the project repo and open the main.ejs file in the browser or you can directly:-