(Please note it may take a bit longer to load due to free hosting.)
React, React Router DOM (routing), Node.js with Express, Netlify
This full-stack JavaScript project brings trainers and clients together,
from booking sessions to customizing workouts,
showcasing my expertise in building end-to-end applications.
Landing Page
Core Functionality
Users can book a coach and receive a personalized workout plan drawn from a shared exercise pool.
Coaches can create or add exercises, assign them to individual users, and give targeted feedback via video uploads and note-sharing.
This direct coach–client communication ensures real-time progress tracking and form correction.
SingUp Page
Sign-Up Page
Users register with basic details, including a phone number, profile image, and a chosen role (Coach or Client), unlocking role-specific features like creating or receiving workout plans.
Users register with basic details, including a phone number, profile image, and a chosen role (Coach or Client), unlocking role-specific features like creating or receiving workout plans.
Tech
Built with React Hooks for state management, Axios for the Express backend on Render, React Router DOM for navigation, and ClimbingBoxLoader for smooth loading feedback.
Built with React Hooks for state management, Axios for the Express backend on Render, React Router DOM for navigation, and ClimbingBoxLoader for smooth loading feedback.
LogIn Page
Login Page
Users submit their email and password, then get redirected to the appropriate role-based dashboard (Coach or Client). A custom Auth context (AuthProvider) handles user data, storing the user’s role in localStorage for session continuity. “Remember me” and a password reset link are also available.
Client Dashboard (empty - no plan yet)
User Dashboard
Users can browse coaches, manage their custom workouts (MyPlan), and track progress with visual metrics—all in one place.
Users can browse coaches, manage their custom workouts (MyPlan), and track progress with visual metrics—all in one place.
Styling
Built using Tailwind CSS, DaisyUI, and Tailwind UI for a responsive, polished user experience.
Built using Tailwind CSS, DaisyUI, and Tailwind UI for a responsive, polished user experience.
Profile Page
Profile Page
Users can update their name, email, phone number, and profile image. Double-click triggers an inline-edit mode for each field, toggling a local isEditable state. They can also permanently delete their account.
Booking a coach
Coach Booking
Users can browse coaches, view their profile details, and send a custom booking request via a modal. “Coach cards” are displayed with react-multi-carousel, and booking requests are handled through Axios calls to the Express backend, ensuring a smooth, message-based booking flow.
Coach Dashboard
Coach Dashboard
Coaches can review incoming booking requests from potential clients and accept them in real time, automatically adding those clients to their list. All requests are retrieved and updated via Axios calls to the Express backend, ensuring a seamless workflow for managing new coaching relationships.
Create Exercises
Create Exercise
Coaches can add new custom exercises by providing a title, description, and optionally media (images/videos). Once created, these exercises can be assigned to clients’ training plans, expanding your personalized workout library.
Promote yourself in the app
Start Coaching
Coaches create a personal “ad” by entering details (name, specialty, experience, bio, photo, and price). After submitting, the ad is displayed in a carousel with other coaches for clients to discover and book. We also use react-hot-toast for smooth in-app notifications, ensuring quick and clear feedback.
Create a workout for your client
Create Workout Split
Coaches can build personalized workout plans by adding days and exercises (pulled from their own library), specifying sets, reps, weight, and other details. They can dynamically add new rows (days) and columns (exercises) with a click of a button, making it truly customizable. Each plan is then assigned to a chosen client, with a searchable modal that makes adding exercises quick and user-friendly.
Coaches can build personalized workout plans by adding days and exercises (pulled from their own library), specifying sets, reps, weight, and other details. They can dynamically add new rows (days) and columns (exercises) with a click of a button, making it truly customizable. Each plan is then assigned to a chosen client, with a searchable modal that makes adding exercises quick and user-friendly.
Receiving the plan made by your coach
Received Plan
Once a training plan is assigned, clients can view the plan name and switch between days (CurrentSplit → CurrentDay → CurrentExercise). They can log sets, reps, RPE, and notes, then mark each exercise as “complete” to track progress in real time. This interactive flow ensures an organized, step-by-step workout experience.
Final Thoughts
I built this platform in just two weeks alongside a colleague who focused on the backend, although I also contributed to the Node.js/Express server. I’d love to hear any feedback or ideas for improvement as I maybe continue refining and expanding this project in the future. Thank you for checking it out!
Thank you!