PMBIA - Client Side

Welcome to the client-side repository of the PMBIA (Professional Mountain Biking Instructors' Association) 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

• Website Features
• Live Deployment
• Used Packages and Technologies
• Prerequisites
• Installation
• Running the Project
• Also checkout PMBIA-Server
• Contributing
• License

Website Features

• Visually Appealing Design: The website is designed with a unique and visually appealing layout, ensuring proper alignment, color contrast, and customization of component libraries.

• Dynamic Home Page: The homepage features a top slider section, popular classes section, popular instructors section, and an extra section with animations.

• Footer: A meaningful footer is present on all pages except dashboard, including a mini map, ensuring consistency and providing essential links or information.

• Responsive Navigation Bar: The navbar includes the website logo, Home, Instructors, Classes, Dashboard, and User Profile Picture. It dynamically shows the Login button or user profile picture based on user authentication status.

• Registration & Login System: The website supports user registration and login with fields for name, email, password, photo URL, and optional fields like gender, phone number, and address. Captcha and Social login is also integrated.

  • Login:

  

  • Register as a student:

  

  • Register as an insturctor:

  

• Instructors Page: Users can search for instructors, view their name, email, and the number of courses they have taken. Users can also visit the instructors' individual walls for more detailed information.

  

  
  

• Courses Page: Users can search for courses, check seat status, view price details, see the instructor's name, and the course name. The page also allows users to book courses directly.

  

  
  

• About Us Page: This page provides information about the website's purpose and other relevant details, helping users understand the mission and vision of the platform.

  

  
  

• Interactive Dashboard: Separate dashboards for students and instructors with functionalities like selecting and enrolling in courses, managing courses, and courses payments.

  • Student Dashboard:

    • User Profile:

    

    • Booked Courses:

    

    • Enrolled Courses:

    

    • Payment Method:

    

    • Payment History:

    

• Instructor Dashboard:

  • User Profile:

  

  • My Courses:

  

  • Add a Course:

  

• Instructor's Wall: Separate dedicated page for each instructor to showcases all the courses offered by them.

• 404 Page: A custom 404 page is created with an added GIF, enhancing the user experience in case of page not found errors.

Live Deployment

Check out the live site at this following URL

Used Packages and Technologies

• React: Core library for building user interfaces
• React Router: For routing and navigation
• Tailwind CSS: Utility-first CSS framework
• DaisyUI: Tailwind CSS components
• Axios: For making HTTP requests
• Firebase: For authentication
• Tanstack Query (React Query): For data fetching and state management
• JWT: For authentication
• Environment Variables: For configuration
• Stripe: For payment processing
• SweetAlert2: For beautiful alerts
• React Hook Form: For handling form validation
• Emotion: For styling components
• Moment: For date manipulation
• Swiper: For creating sliders
• React Toastify: For toast notifications
• React Icons: For icons
• React Leaflet: For interactive maps
• React Simple Typewriter: For typewriter effects
• React Awesome Reveal: For awesome animations

Prerequisites

• Node.js
• npm

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Create a .env file and add your environment variables:

   PORT=5000
   DB_USER=your_db_user
   DB_PASS=your_db_password
   MONGODB_URI=your_mongodb_connection_string

Running the Project

npm run dev

Also checkout PMBIA-Server

Visit the server-side repository of PMBIA website

Contributing

Feel free to contribute by submitting a pull request. Please ensure that your code follows the project's coding standards and includes relevant tests.

License

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