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

• CSS
• JavaScript
• Reactjs
• Redux
• Redux-Thunks

Backend

• Mongodb
• Expressjs
• Nodejs

Fetch data

• Axios

Styles

• Style-Components

Encryptation and Password Privacy

• bcrypt
• Google oAuth
• uuid
• Json Web Token

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.

1. 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

2. 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

  
  
  
  
  
  
  
  
  
  

Contributors

• Pratik Jadhav pratikjadhav080
• Shihab Shaikh shihab-fw11-297
• Nagendra Patil NagendraPatil
• Vishal Rathod Vishal-080