Fitness Blender Clone
This blog is about a clone that I created along with my fellow teammates — Himanshu Dwivedi & Anshu Sagar. The clone is complete with a Login page, Sign-in page, Shopping Cart, Wishlist, and Calendar Scheduling feature. Following is the link to the clone of the website.
The project is built using HTML, CSS, and Javascript. The aim is to learn basic technologies in web development along with some advanced concepts like Async-Await and Promises. The project also includes fetching data from a local API that mimics an actual API.
The clone has some dynamic as well as some static pages. All the pages are made to look like exact replicas of the original pages. Flex is used to build a responsive design of the pages. Also, the functionality of the pages is made to replicate the original.
Some of the important functionalities:
The Calendar Scheduling feature of the website is one of the most important features. The calendar is made using grid and the logic is done using javascript. The scheduling is done using local storage. Apart from scheduling a video in the calendar, the feature also has a deleting function where the schedule gets deleted. Following is the working of the same.
The website also has to Add to Cart functionality on the workout programs page. The data in the workout programs page is fetched from a local mock API. Also, the data can be sorted according to Price, Name, Length of the program. The programs can also be filtered using keywords search. The add to cart functionality is done using local storage. The shopping cart is populated with the products that you add to the cart. On proceeding to checkout, it takes us to the checkout page wherein you can place the order, which then takes you directly to the My Programs page and the bag becomes empty.
Challenges:
There were two types of challenges that we faced. One with respect to the technical aspect of the project and another with respect to the collaborative aspect of the project.
- We were given a time period of 4 days to build the clone. So making every functionality of the original website along with making it pixel perfect and somewhat responsive was a mammoth of a task.
- Some parts of the original website like the calendar required advanced javascript knowledge. So, making those took a bit of understanding first and then coding.
- The collaboration was a huge task right from the assignment of parts of the website to replicate to the GitHub collaboration.
- Frequent meetings were undertaken on zoom as well as slack was used for minor things in between.
Learnings:
- Problem-solving, collaborating, and working as a team to get towards a common goal are some of the learnings that we had over the course of this project.
- Writing clean and efficient code is something that I had as a very important goal in my mind for this project. Accomplished that to a certain extent.
- Learning some of the more advanced concepts in javascript like async-await & promises.
We had a lot to learn throughout the making of this project. Thank you to my amazing team without which this wasn’t possible. Thank you for reading!
