HS-Tube

A React-based web application for browsing a curated collection of Harry Styles videos.

Features

• View videos organized by categories (e.g., Albums, Covers, Live performances).
• Add new videos to the collection.
• Add new video categories.
• Responsive design with carousels for video browsing.
• Mock backend powered by json-server.

Tech Stack

• Frontend: React, React Router, Axios, Swiper
• Backend (Mock): json-server
• Styling: CSS

Project Structure

hstube/
├───.gitignore
├───db.json             # JSON database for videos and categories
├───package.json
├───README.md
├───public/             # Public assets
└───src/
    ├───App.js          # Main component with routing
    ├───Api/            # API request logic (likely using Axios)
    ├───assets/         # Fonts and images
    ├───components/     # Reusable React components
    └───pages/          # Main pages for the application

Getting Started

Prerequisites

• Node.js and npm (or yarn) installed.

Installation & Setup

1. Clone the repository:

   git clone <repository-url>
   cd hstube

2. Install dependencies:

   npm install

Running the Application

This project requires two processes to be running simultaneously: the React development server and the json-server mock API.

1. Start the mock API: Open a terminal and run:

   npx json-server --watch db.json --port 5000

   The API will be available at http://localhost:5000.

2. Start the React application: Open a second terminal and run:

   npm start

   The application will open in your browser at http://localhost:3000.

Available Scripts

• npm start: Runs the app in development mode.
• npm test: Launches the test runner.
• npm run build: Builds the app for production.