https://github.com/chowdhuryjoy108/fitforge

This project is a full-stack fitness website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. The website provides a seamless user experience for fitness enthusiasts to browse and book trainers, participate in classes, and engage with the community.
https://github.com/chowdhuryjoy108/fitforge

express firebase-auth jwt material-tailwind mongodb nodejs react reactrouter6 stripe

Last synced: about 2 months ago
JSON representation

This project is a full-stack fitness website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. The website provides a seamless user experience for fitness enthusiasts to browse and book trainers, participate in classes, and engage with the community.

• Host: GitHub
• URL: https://github.com/chowdhuryjoy108/fitforge
• Owner: ChowdhuryJoy108
• Created: 2025-02-05T05:57:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-19T13:06:55.000Z (over 1 year ago)
• Last Synced: 2025-08-20T00:51:30.366Z (10 months ago)
• Topics: express, firebase-auth, jwt, material-tailwind, mongodb, nodejs, react, reactrouter6, stripe
• Language: JavaScript
• Homepage: https://fit-forge-ac99e.web.app/
• Size: 9.19 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# FitForge [assignment12_category_010]

## Overview

This project is a full-stack fitness website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. The website provides a seamless user experience for fitness enthusiasts to browse and book trainers, participate in classes, and engage with the community.

---

## Features

### General

- **Visually Appealing Design:** A well-structured layout with pleasing color contrast, proper alignment, and customized components.

- **Responsive Design:** Ensures compatibility across different devices.

- **Persistent Navbar and Footer:** Present on all pages except the 404 page, providing navigation and contact information.

### Navbar

- **Conditional Rendering:** 

  - If logged in, displays profile picture, dashboard, and logout button.

  - If not logged in, displays login and register options.

- Includes links to:

  - Home Page

  - All Trainers Page

  - All Classes Page

  - Conditional Dashboard

  - Community/Forums Page

  - Conditional User Profile

### Authentication

- **Registration Page:**

  - Fields: Name, Email, Photo URL, Password.

  - Stores user information in MongoDB with default role as `member`.

- **Login Page:**

  - Fields: Email, Password.

  - Social login system.

  - Error messages for invalid credentials.

  - Toggle between login and registration pages.

### Homepage Implementation

- **Banner Section:** Displayed a heading, short description, and a button redirecting to the Classes page.

- **Featured Section:** Highlighted website features through cards with titles, descriptions, and icons/images.

- **About Section:** Provided organizational information in a visually appealing layout.

- **Featured Classes:** Displayed top six most booked classes using MongoDB's `$sort` method.

- **Testimonials/Reviews:** Carousel slider for user-submitted reviews.

- **Latest Community Posts:** Displayed six recent forum posts with links for further reading.

- **Newsletter Section:** Allows users to subscribe without logging in. Data saved to MongoDB.

- **Team Section:** Displayed trainer profiles with name, biography, expertise, and photo.

### All Trainers Page

- Displayed all trainer profiles with:

  - Trainer name

  - Profile image

  - Years of experience

  - Social icons

  - Available slots

  - "Know More" button to redirect to Trainer Details page.

### Trainer Details Page

- **Trainer Information Section:** Provides comprehensive details about the trainer.

- **Available Slots Section:** Displays trainer's schedule for booking.

- **Be a Trainer Section:** Includes a CTA button redirecting to the "Become a Trainer" page.

### Trainer Booking Page

- Displayed:

  - Trainer name

  - Selected slot

  - Classes

  - Membership packages (Basic, Standard, Premium).

- Stripe-based payment system.

### Payment Page

- Displays:

  - Trainer name

  - Slot name

  - Package name

  - Price

  - User info.

- Saves payment information in MongoDB and updates class booking count.

### "Become a Trainer" Page

- Form fields:

  - Full Name

  - Email (read-only)

  - Age

  - Profile Image

  - Skills (checkbox).

  - Available days (React Select).

  - Available time.

  - Status (default: pending).

- Saves data to MongoDB.

### Classes Page

- Displayed all classes with:

  - Class name

  - Description

  - Trainers specializing in the class.

- Pagination (6 classes per page).

### Forum Page

- Displayed six posts per page with pagination.

- Voting system for logged-in users.

### Dashboard

- Conditional pages based on user roles (Admin, Trainer, Member).

#### Admin Can 

- **All Newsletter Subscribers:** Displayed subscribers in a table.

- **All Trainers:**

  - View and delete trainers.

  - Change trainer role back to Member.

- **Applied Trainer:**

  - View applications.

  - Accept or reject applications.

- **Balance Overview:**

  - Displayed total balance and last six transactions.

  - Chart: Total newsletter subscribers vs. paid members.

- **Add New Class:** Form to add a new class.

#### Trainer

- **Manage Slots:**

  - View and delete slots.

  - Add new slots.

- **Add New Forum:** Post forums.

#### Member

- **Activity Log Page:**

  - Displays status of trainer applications.

  - Modal for rejection feedback.

- **Profile Page:** Manage account details.

- **Booked Trainer Page:**

  - Displays trainer and class details.

  - Review button to submit feedback.

---

## Technologies Used

- **Frontend:** React.js, Tailwind CSS, axios, tenstackQuery

- **Backend:** Node.js, Express.js

- **Database:** MongoDB

- **Authentication:** Firebase

- **Payment:** Stripe

- **Other Libraries:** React Select, Metarial Tailwind, swiper, helmet, React rating, sweetalert2 [for alerts generation], Lottie-React [for generating animations], react recharts [for shape chart in admin dashboard]

## Deployment

1. Deployed the frontend to a hosting service Firebasse 

## Github Repository and Live Link 

## Live Link - https://fit-forge-ac99e.web.app/

## github Repository Link 01 - https://github.com/Programming-Hero-Web-Course4/b10a12-client-side-ChowdhuryJoy108/tree/main

## Github Repository Link 02 - https://github.com/Programming-Hero-Web-Course4/b10a12-client-side-ChowdhuryJoy108

## Documentation Link - https://docs.google.com/document/d/1peLQNTTwy8LqrWH1r6hw7jA5v2cZAbjYTNxDhqQUDoQ/edit?tab=t.0#heading=h.ehi5vvxeu2