vaibhav-mougha / wefit

WEFIT is a body fitness website where users can choose from hundreds of professionally built workout plans and, track and log their workouts . It also provides a free fitness program database to help users to stay fit .

Welcome to WEFIT

WEFIT is a body fitness website where users can choose from hundreds of professionally built workout plans and, track and log their workouts . It also provides a free fitness program database to help users to stay fit.

Deployed URL 👉 Click here

Our Team Members

• Vaibhav Mougha (My Linkedin profile :- https://www.linkedin.com/in/vaibhavmougha/)

• Subha Mukherjee (My Linkedin profile :- https://www.linkedin.com/in/subha-mukherjee-652a551ba/)

• Himanku Gogoi (My Linkedin profile :- https://www.linkedin.com/in/himankugogoi/)

• Shiv Shankar (My Linkedin profile :- https://www.linkedin.com/in/shivshankar0965/)

• Shivam Gote (My Linkedin profile :- https://www.linkedin.com/in/shivam-gote/)

💻 Tech Stack

Tools

Let's Dive into What we have made

Home Page :

Signup Page :

Users can register with thier registered Email address .

Login Page :

Users can Login using Login Authentication with thier registered Email address .

NewUser Page :

Users can enter their basic data after doing first time login .

UserData Page :

Users can track and log their workouts from this section .

Pro Designed Plans Page :

This page contains wefit workout routine plans where users can access all free and elite workouts and users are also provided with search, filter, categories, and navigate functionality across all pages .

Wefit Workout plans :

WEFIT Exercise Page :

Users can explore the exercises available on our database and choose according to their targeted muscle group that they want to work out.

Users can find and filter the exercises according to the muscle group, equipment used, its type and difficulty level.

Users can find the details about any particular exercise and learn about its benefits and how to perform.

Community Section :

We-Fit Community Page: Users can ask their questions among all We-Fit community members.

Blogs : Users posts their daily routines here .

Coach Page :

Users can expand their personal training businesses with personal coach mode .

Elite Page :

Users can select their subscriptions : Basic ,Elite Monthly ,Elite Yearly .

Admin Page :

Admin Section is responsible for maintaining and updating the data in the database .

Footer :

Our Learnings

On this journey we faced many issues, but we keep motivated each other with patience.

• We all learned how to read and understand the code of other team members.

• We learned how to write more efficient and clean code.

• Even though We also learned how to plan a project and how to execute it step by step.

• By this Project we have learned how to collaborate and communicate with team effectively and improving the productivity.

• We also got a glimpse of using GitHub for the version control.

Source Code(GitHub link):- https://github.com/vaibhav-mougha/WEFIT

Show your support

Give a ⭐️ if you like this project!

Thank you

wefit's Issues

Day-2-Coach_Page

[ ] Personal-coach-mode-section

• Title
• Text
• Button

[ ] Lower-Time Spent-Client-section

• Title
• Video ( Mobile )
• Button

[ ] Client-management-Section And Coach Section

• Heading

• Text, Description

• You free to Trial

• Img

• Title

• Price

• Description

Create the filter section in a component

• Create muscle group filter
• Create difficulty level filter
• Create excercise type filter
• Create search bar
• All the filters should work both individually and collectively

wefit workout plans list and filter functionality

• create components of list items
• create dummy data related list items
• search functionality
• filters
• paginations on given list of items

advance work out planner page

• create an example template for users to create a custom workout
• list of custom workouts posted by others
• list item components
• connect this to db.json

Data display component in the Excercise page

• Fetch the data from the Json server and display in the UI
• Make sure it is able to display the filtered data accordingly
• Each item should be clickable and provided with a link to show the item details
• Each item should have a delete button for the admin to delete it

Plans & Footer Section

• Free Box
• Elite Monthly Box
• Elite Yearly Box
• WorkOutPlan Button
• Footer Section

Add the data on json server

• Create appropriate keys and add data
• Make sure it has id, title, all the images, type, muscle category, difficulty level.

Item page

• Make an FAQ section
• Make an excercise data base component
• Show the individual excercise detaills
• Make a carousel for displaying more excercises
• All links should be clickable
• Create a button to add it to the routine
• Add a button to mark it as favourite

Manage & Track

• Manage & Track Section
• Statistics Section
• Crouser Section
• Responsiveness

Day-5-Final-CheckList

• Pagination
• All remaining parts

Navbar

• Logo
• GetApp DropDown
• WorkOutPlans DropDown
• Exercises Section
• Community DropDown
• Coach, Elite, Section
• Login, SignUp Button
• Responsiveness

WorkOut Tracking

• Training Section
• Workout Plans
• Train & Log Section
• Progress Tracking
• Responsiveness

Create the muscle group component

• Align the buttons with the image
• The buttons should contain target muscles
• Clicking on each button should filter the targeted data and display on the UI

Improvements

• login and signup authentication is working good, but throwing cors error
• could have implemented firebase for gauth
• error messages can be improved
• No backend, try to integrate with backend

Day-3-Elite-Page

• Title Section

• plans suit section

• create 3 div inside Title, description, Button

• Jefit Elite membership gift section-

• 3 image

• Progress report Section

• Img

• Button

Day-4-Part-I-Community Page

• Jefit Community member

• Text

• Title

• Question

• Active Jefit User

• IMG

• Name Title

• Jefit Members Stories

• Img

• Name Heading-H1

Assemble everything and make it whole

• Import the navbar, footer and the other elements and make the Excercise page complete
• Do the same for the item detail page

heading and sliders in routines page

• heading task
• slider in routines page using swiper js
• create data related to fitness
• customize left and right arrows using CSS module

Final Checklist

• Make sure the UI is responsive
• Make sure the components are well aligned
• Make sure all the links are working fine
• Create a readme documentation for the project repo
• Submit the final product