Cult.Fit Clone

CultFit is a health and fitness company offering digital and offline experiences across fitness, nutrition, and mental well-being. With the aim to make fitness fun and easy, CultFit gives workouts a whole new meaning with a range of trainer-led, online group workout classes.

In this project we have tried to make a look alike clone of CultFit. With our efforts and the technology stack, that we have learned so far in the masai school, we were able to clone the front end with high precision and quality. This Project is build as part of Masai School Curriculum project and completed in duration of 6 days.

Features

Book Workout Session By Categories
Choose Workout Center By Location
Free Workout Trials
Sign in / Sign up with email and Google
Responsive Pages

Tech Stack

Frontend

Backend

Fetch data

Axios

Styles

Style-Components

Encryptation and Password Privacy

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

Follow the following steps to get development environment running.

Clone 'CultFit' repository from GitHub

git clone https://github.com/pratikjadhav080/Cult-Fit-Client

or using ssh

git clone git@github.com:pratikjadhav080/Cult-Fit-Client

Install node modules

Client
```
cd client
```
```
npm install

or

npm i
```
Server

cd server

npm install

or

npm i

Need to Add .env File with Relevent Environment Variable

Run the project

open two terminal one for client and one for Server after that run this command
- client
```
npm start
```
- server
```
npm run server
```
Blog of This Project(Know more about the project)

Medium

Snapshots of the Project

LANDING PAGE

On the home page, users can see cool animation effects and gifs which are self-explanatory. All of this is done using custom CSS and Styled Component.
CULT PAGE

Here, Users can see how many free trials are left in their account which is updated dynamically once booked (state management done using Redux) and other offers. Also, they can select the genres of exercise to move ahead.

LOGIN-IN, SIGN-UP, and REGISTER

On clicking log in, a modal will open up where the user can choose the appropriate method to proceed further.

SELECT LOCATION

Users can select cities from those given in this modal. Once done, respective training locations, their address, and other information will be fetched from DB and is displayed during session booking.
PROFILE

On registering, a user profile will be created as displayed below
WORKOUT

On clicking type of workout, the user will be redirected to that page. Here, I clicked on yoga so the following page will be displayed which contains the details of that particular workout. From here user can book a slot
SELECT CENTER

On clicking “book class” on the workout page user will be asked to choose a preferred center next to which details of the center such as address, slot timings, image of the training center will appear. All this data is fetched from the center collection in our DB.
CENTER

Here the user is asked to select the date and time of the slot that is to be booked. After which a modal appears.
MAKE PAYMENT

In payment page user can review the price and proceed to payment
PAYMENT

The following steps will lead to the payment.

Select the mode of payment

Enter the mobile number to verify Paytm account and then confirm with OTP received.
PAYMENT SUCCESSFUL

On successful payment, user will be redirected to following pages