https://github.com/ibra-kdbra/video-clone

React Video clone
https://github.com/ibra-kdbra/video-clone

rapidapi react react-player sass vitejs

Last synced: about 2 months ago
JSON representation

React Video clone

• Host: GitHub
• URL: https://github.com/ibra-kdbra/video-clone
• Owner: ibra-kdbra
• Created: 2023-06-05T11:23:01.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2026-02-04T21:20:13.000Z (4 months ago)
• Last Synced: 2026-02-05T08:47:14.256Z (4 months ago)
• Topics: rapidapi, react, react-player, sass, vitejs
• Language: JavaScript
• Homepage: https://funda-streamvideos.netlify.app
• Size: 396 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# FundaStream Premium

An elevated video streaming platform re-engineered for performance and professional-grade UI/UX.

## Core Software Engineering Upgrade

This project has been fully refactored from a legacy Create React App template into a modern, high-performance architecture.

### Tech Stack

- **Framework**: [React 19](https://react.dev/) (Concurrent rendering, improved hooks)

- **Build Tool**: [Vite 5+](https://vitejs.dev/) (Instant HMR, esbuild-powered)

- **Styling**: [Sass (SCSS)](https://sass-lang.com/) with a 7-1 architecture pattern and SCSS Modules.

- **Data Layer**: [TanStack Query v5](https://tanstack.com/query) (Intelligent caching, background refetching, 1m staleTime)

- **Routing**: [React Router 7](https://reactrouter.com/)

- **API**: YouTube v3.1 via RapidAPI

### Features

- 🚀 **Performance**: Optimized rendering with React 19 and Vite.

- 🎨 **Professional UI**: Fully custom SCSS styling (no generic MUI layouts).

- 📱 **Responsive Design**: Mobile-first approach with custom mixins.

- 🕒 **Watch History**: LocalStorage-based persistence to track your viewed content.

- 🔍 **Advanced Search**: Intelligent search with debouncing and clear state.

- 🦴 **Skeleton Loaders**: Custom animated skeletons for all viewports.

## Architecture

```text

src/

  app/       # Routing and Global Providers

  components/# Modular UI elements (SCSS Modules)

  hooks/     # Custom logic (History, API abstractions)

  pages/     # Full-page views

  services/  # API clients and query logic

  styles/    # Global variables, mixins, and reset

  utils/     # Constants and helpers

```

## Getting Started

1. **Clone & Install**

   ```bash

   npm install

   ```

2. **Environment**

   Create a `.env` file with your RapidAPI key:

   ```env

   VITE_RAPID_API_KEY=your_key_here

   ```

3. **Launch**

   ```bash

   npm run dev

   ```

## Development Patterns

- **DRY Styling**: Global variables and mixins used via `additionalData` in Vite.

- **SOC**: Separation of concerns between API logic (`services/`) and UI components.

- **State Management**: Zero global state boilerplate by leveraging React Query for server data.