Fitness Application

Build this project step by step with our detailed tutorial on JavaScript Tutorial YouTube. Join the JSM family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Tutorial.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

Welcome to the Fitness Application – a fully responsive and interactive web application built using React JS. This project replicates core feature, including search functionality.

⚙️ Tech Stack

• React
• Axios
• Rapid API
• TailwindCSS
• Material UI
• React Router DOM

🔋 Features

👉 Homepage Feed: Displays trending and category-based videos fetched via YouTube API.

👉 Video Playback Page: Responsive video player with title, description, views, likes, and comments section.

👉 Search Functionality: Real-time video search with instant result updates.

👉 Channel Pages: Dedicated pages showing channel info and all uploaded videos.

👉 Related Videos Sidebar: Suggests similar videos alongside the current one.

👉 Responsive Design: Optimized for desktops, tablets, and mobile devices.

👉 Routing with React Router: Smooth page navigation using client-side routing.

👉 API Integration: Powered by RapidAPI’s YouTube Data API v3.

👉 Material UI Components: Clean and modern user interface with consistent styling.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Abej-Rijwi/fitness.git
cd fitness

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

REACT_APP_RAPID_API_KEY=
REACT_APP_YOUTUBE_API_KEY=
ESLINT_NO_DEV_ERRORS=true

Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from Rapid API You-Tube Search to Rapid API You-Tube v311 and [Rapid API You-Tube Search] (https://rapidapi.com/justin-WFnsXH_t6/api/exercisedb)

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.