Building the clone of CultFit Website.

Building the clone of CultFit Website.

It is a health and fitness company offering digital and offline experiences across fitness, nutrition, and mental well-being.

Hello there, you might have seen the CultFit Website. This is a health and fitness company, offering digital and offline experiences across fitness, nutrition, and mental well-being. yoga and meditation, and medical and lifestyle care hassle-free. At Cult, They says that, they make fitness fun and easy. They have best-in-class trainers & offer group workouts ranging from yoga to Boxing. Their workouts can be done both at a cult center and at home with the help of do it yourself (DIY) workout videos. Cult.fiuses the best in technology to give you a world-class experience. You can book classes, follow workout videos - all with the click of a button from the cult.fit app or website.

Moving ahead, we team4 at Masai School developed a clone of the website of CultFit in just 4 days as a part of our curriculum of construct week. This blog is all about our journey and the challenges we faced while building the project.

What was my problem statement and how did I approach it:-

So I had a problem statement that I have to create a clone of a website called cult.fit . Also, I can only use my basic HTML, CSS, and core JavaScript knowledge. We were four members in our group. We faced some problems in Nodejs ,Express and Mongodb as all of these technologies were new to us so we had to learn them while building our project.

Technology Stack Used :-

In this project we have used the following tech stack:

  • HTML

  • CSS

  • JavaScript

  • NodeJs

  • Express

  • Mongodb

Some Snapshots of our project that we made:-

Landing Page:- This is the Landing page (basically home page) when the user enters the website for the first time this page will show up. We have updated some of the hover effects and animation.

Home Clone-CultFit.png

Login Popup:-

login Popup1.png

login Popup2.png

Profile:-

InkedProfile_LI.jpg

Location Popup:-

Location Clone-CultFit.png

Care:-

Care.png

Store:-

Store.png

Cart:-

Cart.png

Payment:-

Payment.png

Payment2.png

Thank You Pop Up after making payment:-

Thank You Pop up.png

How We divided the work in our Team members:-

As we were four members in our team so it was very important to decide how we will approach the work so that in the future we should not face any problem in merging the code, as well as the tasks, get divided into equal parts. So, on the first day, we made a git repository and everyone was told to make their separate git branch and push their work there and when they feel that they have completed it. They can show it to one of the members and after the approval, they can merge their code to the main branch. Although we used slack for better communication. I was mainly responsible for making the landing page, popups, animations, and login part and some functions to make the page look better, also I added the backend using NodeJS & MongoDB_Atlas ; and I choose the landing page & login functionality, Profile page; because this is the main page which should be attractive & easy to use as original to give a feel that "is it original or clone!!". And my other team members were responsible for the Store & care page, Cart page, slides and all functionality.

The outcome and important learning from the project:-

This entire journey of making the project was awesome. We learned a lot of things while working on this project and it gave us a lot of confidence. This is my first project so I learned a very important thing that how we work in a team. Although we could have done more, time did not allow us to go further. But we must improve it. I hope we do better in our next project. If you want to look at the project then you can go to this GitHub link: (github.com/Sharad13/CultFitWithNode) . Thanks For Reading.

  • Note: All the image and icon links have been taken from the main website ( https://www.cult.fit/ ) and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce them without prior approval from the owner. The images and icons used here are just for making this project and for learning purposes.