Sports Center

sports-center.mp4

Project Overview

Sports Centre is a website designed to provide users with detailed information about various fitness classes such as Yoga, Solo, Group and Stretching. The site also provides information about personal trainers, products for sale and includes a contact form for users to reach out. This platform aims to make fitness information and services more accessible. By using React.js, more modern and fluent usage has been achieved.

View Demo

Live Demo

Features

• Class Information: Dedicated sections for Yoga, Solo, and Stretching classes, each with schedules and class details.
• Personal Trainers: Information about professional trainers available at the center.
• Product Sales: A section dedicated to fitness products available for purchase.
• Contact Form: A fully functional contact form allowing users to send messages directly through the website.
• BMI Calculator: BMI (Body Mass Index) Calculator, which helps users calculate their BMI based on their height and weight. It visually displays the BMI result on a graphical chart using colors to indicate different weight categories (Underweight, Normal, Overweight, Obese, Extremely Obese).

Technologies Used

• CSS3: To style the website and create a responsive design.
• Vite.js: To add interactivity, including dynamic class selection and form validation. In addition to this reduce the code majority.
• Bootstrap: Used for layout and responsive design.
• Google Maps API: Integrated to display the location of the sports center.

How to Use

1. Navigate through the available classes (Yoga, Solo, Stretching, Group) to learn about each class.
2. Browse the product section to find fitness-related items available for purchase.
3. Contact the center via the form available on the Contact Us page.
4. Check personal trainer profiles to choose your ideal trainer.
5. Visual indicators (arrow and color coding) based on the BMI result.

Push the project

1. Clone the project or download the files.
2. Open a terminal in the project directory and run the npm install command.
3. Start the project using the npm run dev command.
4. Go to http://localhost:5173 in your browser.