https://github.com/tanzeebul-tamim/mtb-coaching-client

This repository houses the client-side codebase for the "Professional Mountain Biking Coaching Network" website. As the front-end component of the project, it contains all the necessary files responsible for delivering an engaging user experience.
https://github.com/tanzeebul-tamim/mtb-coaching-client

animation firebase-authentication javascript mern-stack mongodb react-awesome-reveal react-awesome-slider react-credit-cards react-leaflet react-router-dom reactjs responsive-design stripe-payments tailwindcss vite web-development

Last synced: 3 months ago
JSON representation

This repository houses the client-side codebase for the "Professional Mountain Biking Coaching Network" website. As the front-end component of the project, it contains all the necessary files responsible for delivering an engaging user experience.

• Host: GitHub
• URL: https://github.com/tanzeebul-tamim/mtb-coaching-client
• Owner: Tanzeebul-Tamim
• License: mit
• Created: 2023-06-21T13:30:10.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-11-30T09:31:26.000Z (8 months ago)
• Last Synced: 2025-12-02T11:24:45.121Z (8 months ago)
• Topics: animation, firebase-authentication, javascript, mern-stack, mongodb, react-awesome-reveal, react-awesome-slider, react-credit-cards, react-leaflet, react-router-dom, reactjs, responsive-design, stripe-payments, tailwindcss, vite, web-development
• Language: JavaScript
• Homepage: https://mtbcoachingnetwork.vercel.app
• Size: 257 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


    

    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](#-packages--technologies-used)

-   [📁 Project Structure](#-project-structure)

-   [🚀 Website Features](#-website-features)

-   [✅ Prerequisites](#-prerequisites)

-   [🔧 Installation, Configuration & Running Locally](#-installation-configuration--running-locally)

-   [🔑 Demo Access & Credentials](#-demo-access--credentials)

-   [💳 Test Payment Info (Stripe)](#-test-payment-info-stripe)

-   [💻 Checkout the Server End](#-checkout-the-server-end)

-   [🌐 Live Deployment](#-live-deployment)

-   [🤝 Contributing](#-contributing)

-   [📄 License](#-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 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](./FEATURES.md)




## ✅ Prerequisites

-   [**_Node.js_**](https://nodejs.org/) (v18 or higher recommended)

-   [**_npm_**](https://www.npmjs.com/) (comes with Node.js) (running locally or accessible remotely)

-   A [**_`.env`_**](./.env.example) file with required environment variables  

    _(See the detailed guide in the [**Installation, Configuration & Running Locally**](#-installation-configuration--running-locally) section below)_




## 🔧 Installation, Configuration & Running Locally

1.  **_Clone the repository:_**

    ```sh

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

    cd MTB-Coaching-Client

    ```

2.  **_Install dependencies:_**

    ```sh

    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`](./.env.example) file:

        ```env

        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_**](https://imgbb.com/) API for image uploads.

            -   **`VITE_IMGBB_KEY`**: [**_imgbb_**](https://imgbb.com/) 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**](https://github.com/Tanzeebul-Tamim/MTB-Coaching-Server).

            


        -   **STRIPE PUBLIC KEY:**  

             **`VITE_PAYMENT_GATEWAY_PK`**: [**_Stripe_**](https://stripe.com/) 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_**

    ```sh

       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_**](https://github.com/Tanzeebul-Tamim/MTB-Coaching-Server) of the website.




## 🌐 Live Deployment

The site is deployed on [**_Vercel_**](https://vercel.com/) and is live at [**this following URL**](https://mtbcoachingnetwork.vercel.app/).




## 🤝 Contributing

Have ideas to improve this platform? Found a bug?

Let’s make it better together! [Open an issue](https://github.com/Tanzeebul-Tamim/MTB-Coaching-Client/issues) or submit a pull request.




## 📄 License

This project is licensed under the **_MIT License_** - see the [**LICENSE**](LICENSE) file for details.