MTB-Coaching - Client End

Welcome to the client-side repository of the Professional Mountain Biking Coaching Network website. This platform is dedicated to connecting aspiring mountain bikers with professional instructors, offering a comprehensive range of courses and resources to enhance their skills.

📚 Table of Contents

🧰 Packages & Technologies Used
📁 Project Structure
🚀 Website Features
✅ Prerequisites
🔧 Installation, Configuration & Running Locally
🔑 Demo Access & Credentials
💳 Test Payment Info (Stripe)
💻 Checkout the Server End
🌐 Live Deployment
🤝 Contributing
📄 License

🧰 Packages & Technologies Used

Full list of Packages & Technologies Used (Click to expand)

UI & Styling

React.js: Core library for building user interfaces
Tailwind CSS: Utility-first CSS framework
DaisyUI: Tailwind component library
React Icons: Icon collection
React Credit Cards: Interactive credit card UI
React Spinners: Loading indicators

Animations

Framer Motion: Modern animation library for React
React Awesome Slider & Swiper: Image and content sliders
React Simple Typewriter: Typewriter animation
React Awesome Reveal: Scroll and reveal animations

Routing & Navigation

React Router: Routing system
React Router HashLink: Smooth scroll to page sections

State, Data & Utilities

LocalForage: Local storage wrapper with async support
Moment.js: Date formatting and manipulation
match-sorter: Fuzzy search and sorting
sort-by: Sorting utility
libphonenumber-js: Phone number formatting
i18n-iso-countries: Country code utilities
html-react-parser: Safely render HTML inside React

Authentication & Security

Firebase: Authentication and backend services

Payments

Stripe (react-stripe-js & stripe-js): Payment integration

Notifications & Alerts

SweetAlert2 & Theme Dark: Stylish modals
React Toastify: Toast notifications
use-sound: Play sounds via hooks

PDF, Media & Embeds

@react-pdf/renderer: Generate PDFs from React components
React YouTube: Embed and control YouTube players

Maps

React Leaflet: Interactive mapping

PWA, Build & Deployment

vite-plugin-pwa: Progressive Web App functionality
Vite: Lightning-fast build tool
Vercel: Deployment platform

Development Tools

ESLint & React Hooks Plugin: Linting and code checks
PostCSS & Autoprefixer: Styles processing
Globals: Shared global env vars for ESLint
@vitejs/plugin-react: React fast-refresh & transformations
TypeScript type definitions: React & ReactDOM types (even if you're writing JS)

📁 Project Structure

Short Overview

MTB-Coaching-Client/
├── public/           # Static assets (images, cursors, favicon, etc.)
├── src/
│   ├── api/          # API layer
│   ├── components/   # Reusable UI & layout components
│   ├── firebase/     # Firebase config
│   ├── hooks/        # Custom React hooks
│   ├── layout/       # Main & Dashboard layout definitions
│   ├── pages/        # Page-level views
│   ├── providers/    # Context providers
│   ├── routes/       # Route configs & guards
│   └── styles/       # CSS & styling resources
└── root configs      # ESLint, Tailwind, Vite, PostCSS, Vercel, etc.

Detailed Project Structure (Click to expand)

MTB-Coaching-Client/
├── public/
│   ├── assets/                       # Static assets used in the app
│   ├── cursors/                      # Custom mouse cursor icons used in the app
│   ├── favicon.png                   # Favicon for the website
│   └── manifest.json                 # PWA manifest file defining app metadata (name, icons, theme color, etc.)
│
├── src/
│   ├── api/                          # API utility functions (authentication, bookings, messages, and general API calls)
│   ├── components/                   # Organized UI components (layout, pages, skeletons, and reusable UI widgets)
│   │   ├── layout/                   # Main UI Components (Navbar, Footer, SideNav, and Leaflet map integrations)
│   │   ├── pages/                    # Splash Screen, Error page & No Internet warning page
│   │   ├── skeletons/                # Skeleton loaders for all UI components
│   │   └── ui/                       # Reusable UI components (theme togglers, pagination, banners, etc.)
│   │
│   ├── firebase/                     # Firebase configuration for auth and services
│   ├── hooks/                        # Custom React hooks (auth, theme, screen size, etc.)
│   ├── layout/                       # Layout components for route structure (Main & Dashboard)
│   ├── pages/                        # All route-level views, grouped by feature/domain
│   │   ├── AboutUs/                  # Static About page content
│   │   ├── AddClass/                 # Instructor class creation form
│   │   ├── Authentication/           # Login, Register, Instructor Register + shared logic
│   │   ├── Classes/                  # Class listings, cards, and filter logic
│   │   ├── EnrolledClass/            # Student's enrolled class dashboard
│   │   ├── Faq/                      # Static FAQ & Support section
│   │   ├── Home/                     # Main homepage – banner, testimonials, popular sections
│   │   ├── Instructors/              # Public instructor directory view
│   │   ├── Legal/                    # Privacy policy, terms & conditions
│   │   ├── Messages/                 # User's submitted ticket dashboard
│   │   ├── MyCourses/                # Instructor's own published classes
│   │   │   └── ...                   # Other files and folders
│   │   │       └── MyStudents/       # Instructor's course specific enrolled students
│   │   │
│   │   ├── MyProfile/                # Profile page with update/edit capability
│   │   ├── PaymentHistory/           # Record of past
8000
 transactions for users
│   │   ├── SelectedClasses/          # Student's Cart-like system before course enrollment
│   │   │   ├── ...                   # Other files and folders
│   │   │   └── PaymentConfirmation/  # Checkout page + Stripe form, success/fail feedback
│   │   │
│   │   └── SingleInstructorsClasses/ # Detail page showing all classes information of a specific instructor
│   │
│   ├── providers/                    # React context providers (auth, screen size, network status, etc.)
│   ├── routes/
│   │   ├── config/                   # Route definitions for main and dashboard views (mainRoutes, dashboardRoutes & router)
│   │   ├── guard/                    # Route-level protection for components (private route & role based route protection)
│   │   └── utils/                    # Route-related utilities (scroll behavior and route tracking)
│   │
│   ├── styles/                       # Centralized theme colors for Tailwind and component styling
│   └── App.jsx                       # Root application component
│
├── .env.example                      # Sample environment variable file for local development
├── .eslintrc.cjs                     # ESLint configuration
├── .gitignore                        # Git ignored files and folders
├── FEATURES.md                       # Documentation of implemented features
├── index.html                        # Main HTML file served by Vite
├── LICENSE                           # MIT license for open source distribution
├── package.json                      # Project metadata and dependencies
├── package-lock.json                 # Auto-generated lockfile for npm dependencies
├── postcss.config.js                 # PostCSS setup for Tailwind and plugin usage
├── README.md                         # Project documentation (this file)
├── tailwind.config.js                # Tailwind CSS custom configuration
├── vercel.json                       # Vercel rewrites and deployment rules (SPA routing)
└── vite.config.js                    # Vite build and plugin configuration

🚀 Website Features

Dynamic and animated home page featuring embedded YouTube videos
Role-based dashboards tailored for students and instructors
Secure authentication with email verification and social login options
Smooth and secure payment processing via Stripe
Real-time image uploads powered by imgbb integration
Complete course lifecycle management for instructors and students
Dedicated informative pages for Legal, FAQ, About Us, No Internet, and custom 404 errors
Fully responsive design optimized for all devices

See full breakdown with screenshots ➡️ FEATURES.md

✅ Prerequisites

Node.js (v18 or higher recommended)
npm (comes with Node.js) (running locally or accessible remotely)
A .env file with required environment variables
(See the detailed guide in the Installation, Configuration & Running Locally section below)

🔧 Installation, Configuration & Running Locally

Clone the repository:

git clone https://github.com/Tanzeebul-Tamim/MTB-Coaching-Client
cd MTB-Coaching-Client

Install dependencies:
```
npm install
```
Set up Environment Variables:
- Rename the .env.example file in the project root to .env:
  
  All the following values can be found in the .env.example file:
```
VITE_APIKEY=firebase_api_key
VITE_AUTHDOMAIN=firebase_auth_domain
VITE_PROJECTID=firebase_project_id
VITE_STORAGEBUCKET=firebase_storage_bucket
VITE_MESSAGINGSENDERID=firebase_messaging_sender_id
VITE_APPID=firebase_app_id
VITE_API_URL=backend_api_url
VITE_IMGBB_API_URL=imgbb_api_url
VITE_IMGBB_KEY=imgbb_api_key
VITE_PAYMENT_GATEWAY_PK=stripe_public_key
VITE_YOUTUBE_API_KEY=your_youtube_api_key_here
```
- Configuration Details (Click to expand)
  - Firebase Configuration:
    - VITE_APIKEY: Firebase project's API key
    - VITE_AUTHDOMAIN: Firebase project's authentication domain
    - VITE_PROJECTID: Firebase project ID
    - VITE_STORAGEBUCKET: Firebase project's storage bucket
    - VITE_MESSAGINGSENDERID: Firebase messaging sender ID
    - VITE_APPID: Firebase app ID
  - imgbb Configuration:
    - VITE_IMGBB_API_URL: The base URL for imgbb API for image uploads.
    - VITE_IMGBB_KEY: imgbb API key for image uploads.
  - Backend API URL: VITE_API_URL: The base URL for backend API (hosted server for this website). For more details about the server, see the server GitHub repository.
  - STRIPE PUBLIC KEY:
    VITE_PAYMENT_GATEWAY_PK: Stripe public key for payment processing.
  - VITE_YOUTUBE_API_KEY: VITE_YOUTUBE_API_KEY: Your Google Cloud YouTube Data API v3 key used to fetch video data dynamically.
⚠️ Important Notes:
- Public keys (Firebase, Stripe, imgbb, etc.) are safe to expose. They’re required for client-side setup and do not pose security risks.
- Unlike some public keys, the YouTube API key should be kept private and not exposed publicly in your repository or documentation.
- Make sure to restrict the key in Google Cloud Console to only be used by your app's domain and for the YouTube Data API v3.
- Never commit your actual .env file. This file may contain sensitive info and should always be listed in .gitignore.
Running the Project
```
   npm run dev
```

🔑 Demo Access & Credentials

Try out the app with the following demo credentials:

Student Account
- Email: demo.student@example.com
- Password: Demo12345$

Instructor Account
- Email: demo.instructor@example.com
- Password: Demo12345$

💳 Test Payment Info (Stripe)

Use the following Visa test card during checkout:

Card Number: 4242 4242 4242 4242 (Visa)
Expiry: 1234
CVC: 123
ZIP/Postal: 12345 or any 5-digit number

Important

Please avoid submitting any sensitive personal information or inappropriate content (e.g., images, names, course titles).

Note:

This is a demo project. You can explore the app fully using the provided student or instructor credentials.

All users and data are dummy/test entries.

No real transactions occur. Payments are simulated and no real charges are made.

The system is open for demo purposes only.

💻 Checkout the Server End

Visit the server-end repository of the website.

🌐 Live Deployment

The site is deployed on Vercel and is live at this following URL.

🤝 Contributing

Have ideas to improve this platform? Found a bug? Let’s make it better together! Open an issue or submit a pull request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Navigation Menu

Repository files navigation

MTB-Coaching - Client End

📚 Table of Contents

🧰 Packages & Technologies Used

UI & Styling

Animations

Routing & Navigation

State, Data & Utilities

Authentication & Security

Payments

Notifications & Alerts

PDF, Media & Embeds

Maps

PWA, Build & Deployment

Development Tools

📁 Project Structure

Short Overview

🚀 Website Features

See full breakdown with screenshots ➡️ FEATURES.md

✅ Prerequisites

🔧 Installation, Configuration & Running Locally

🔑 Demo Access & Credentials

💳 Test Payment Info (Stripe)

💻 Checkout the Server End

🌐 Live Deployment

🤝 Contributing

📄 License

About

Releases

Packages

Used by

Contributors

Languages

Name		Name	Last commit message	Last commit date
public		public
src		src
.env.example		.env.example
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
FEATURES.md		FEATURES.md
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

MTB-Coaching - Client End

📚 Table of Contents

🧰 Packages & Technologies Used

UI & Styling

Animations

Routing & Navigation

State, Data & Utilities

Authentication & Security

Payments

Notifications & Alerts

PDF, Media & Embeds

Maps

PWA, Build & Deployment

Development Tools

📁 Project Structure

Short Overview

🚀 Website Features

See full breakdown with screenshots ➡️ FEATURES.md

✅ Prerequisites

🔧 Installation, Configuration & Running Locally

🔑 Demo Access & Credentials

💳 Test Payment Info (Stripe)

💻 Checkout the Server End

🌐 Live Deployment

🤝 Contributing

📄 License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages