How I made a cure.fit website clone in just 3 days?
Hi reader, I hope you have landed here while searching for web development project ideas or maybe you got this blog recommended by your friend, or you have randomly searched for web development or maybe www.cure.fit. Well, as you are here, I would like to tell you a bit about me first. I am Harsh Gaur and I have been learning web development at www.masaischool.com for over 2 months now. In this blog, I would like to share with you a little project that I and a few of my fellow colleagues have made.
What is cure.fit and what did we actually achieved?
If you have never visited www.cure.fit, it is a health and fitness company that provides services across fitness, nutrition, and mental well being. In our clone, we have tried to make all the sections and pages that one could find over there. We used a technology stack containing HTML5, CSS, JavaScript, and also CSS preprocessors like SASS and LESS to add more flavor to the website.
Initially, we tried building the website using REACT but reaching halfway we realized that we need to learn a few more concepts before making such a big project and we would not be able to complete the project before the deadline therefore we did it using the tech stack mentioned above.
There was just one major challenge that we faced while developing this project. As we were building it during the last few days of 2020, the website had many offers for customers and thus it was very dynamic in that duration, and sometimes it happened that once we had developed a section, the next day it was gone. Keeping the challenges aside we enjoyed getting our hands dirty and working on applying the things we have learned so far, such as managing user data using LocalStorage (something which the original website does too) and making the cloned project pixel perfect.
A glimpse of the project and a simple walkthrough of the website.
Talk is cheap, show me the code! — Linus Trovalds
Now, I’ll be guiding you through some of the pages that we have made. In order to use the project, you need to follow the below steps.
1. Open index.html on the live server(using VS code live server)
2. This is our landing page. You can enjoy it for a while and then click on login on the top right to log in
3. You can last button that says continue
4. Now you should click to create a new user and sign up yourself on the next page
5. Now you have landed on our main page
6. This is our onlinePT page clone
7. This is our cultSport section where you have different gears to buy
8. This is our product description page
9. This is our cart, which appears when you buy something
10. This is how other pages will look like (with a cool notification on the cart icon which tells about the number of items in the cart)
Okay I know this might be a little overwhelming but if you are interested to try it yourself or watch more snapshots of our website, you can go to the link mentioned in the endnotes ( last section of this blog ).
A little about the teammates and their contributions.
I can’t thank Pushpal Chakrabarty and ANKUR PANDEY enough, who worked hard for this project to become what it is today. I think the best way to thank them would be to mention their contribution and let their work speak for them.
Pushpal Chakrabarty was responsible for designing the landing page and all the features you’ll find on that page. He took care of all the little, but important, things such as making the design of tickets which simply take the user experience to the next level. He also worked hard on the navbar to improve the design and make it look good at almost any screen resolution.
ANKUR PANDEY was responsible for designing the onlinePT page. He was the one who coined the idea of applying icon images on the title bar of each and every page. Though it was not a necessary thing, it was super important because it helped us achieved uniqueness as no one else had done that, and also it made the website look similar to the original one.
I on the other hand handled the cult store page, the product information page, the login and signup page, and the cart page. Out of all the pages I just mentioned, I also worked on adding a feature that puts a cute little icon over the cart whenever you add something to it. That icon shows you the number of items in the cart. I also worked with both of them to work on the pages you’ll see in the profile section.
Though this project was not a piece of cake and neither our 3 days journey was all rainbows, I would say that managing these guys was fun. I used to merge all our codes at night and was tracking the progress of all of us. I found very few merge conflicts during merging, which is a good thing because it shows how flawlessly we worked.
Ending notes
In our humble attempt to clone the www.cure.fit website we tried our best to achieve the preciseness with whatever limited knowledge we possess. Though this project was our attempt to work on the front side of things, we would surely be working on the backend in the future in order to make it perfect from the backend perspective too. I hope you liked our efforts.
If you want to check out the repository and try it yourself, please go to https://github.com/iharshgaur/Chlorine-1 and fork the repository.
In the end, I would like to thank you for sticking around to the end. Please like, share, and comment your suggestions down below.
