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 CSS components
• React Icons: For icons
• React Awesome Slider & Swiper: For creating sliders
• React Simple Typewriter: For typewriter effects
• React Awesome Reveal: For awesome animations
• React Credit Cards: For displaying interactive credit card forms and previews
• React Spinners: For loading spinner components and indicators

Routing & Navigation

• React Router: For routing and navigation
• React Router HashLink: For smooth anchor navigation to sections within pages

State & Data Handling

• Environment Variables: For configuration
• Moment: For date manipulation

Authentication & Security

• Firebase: For authentication
• React Simple Captcha: For adding simple captcha validation to forms

Payments

• Stripe: For payment processing

Notifications & Alerts

• SweetAlert2: For beautiful alerts
• React Toastify: For toast notifications

Maps & Media

• React Leaflet: For interactive maps
• YouTube Data API v3: For fetching and displaying YouTube video data dynamically
• React YouTube: For embedding and controlling YouTube videos in React components

Build & Deployment

• vite-plugin-pwa: For enabling Progressive Web App (PWA) features and installability
• Vercel: For seamless and fast deployment of the client-side application

📁 Project Structure

Short Overview

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

Detailed Project Structure (Click to expand)

MTB-Coaching-Client/
├── src/
│   ├── api/                          # API utility functions (authentication, bookings, 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/                    # Error page & No Internet warning page
│   │   ├── skeletons/                # Skeleton loaders for all UI components
│   │   └── ui/                       # Reusable UI components (toggles, 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 or dynamic FAQ section
│   │   ├── Home/                     # Main homepage – banner, testimonials, popular sections
│   │   ├── Instructors/              # Public instructor directory view
│   │   ├── Legal/                    # Privacy policy, terms & conditions
│   │   ├── MyCourses/                # Instructor's own published classes + enrolled students
│   │   ├── MyProfile/                # Profile page with update/edit capability
│   │   ├── PaymentHistory/           # Record of past transactions for users
│   │   ├── SelectedClasses/          # Cart-like system before 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)
│   ├── 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
│
├── 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.)
│
├── .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

1. Clone the repository:

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

2. Install dependencies:

   npm install

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

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