A YouTube-style video browsing application built with React (Vite).
This project focuses on data-driven UI, API integration, routing, and scalable project structure, rather than visual originality.
🧩 Version 1.0.0 — Initial implementation featuring video listing, search, routing, and YouTube Data API integration.
This project is a React-based YouTube clone that fetches real video data from the YouTube Data API and displays it using a modern frontend stack.
The app supports:
- Video browsing
- Search results
- Video detail views
- Channel and metadata rendering
The primary goal of this project is learning and architectural practice, rather than pixel-perfect design replication.
This project was built as part of my learning journey with React (Vite), with the aim of moving beyond small-scale demo applications and experiencing a more realistic, data-driven frontend project.
I chose to build a YouTube clone because it represents a familiar product with significantly higher complexity than a typical Todo app. Rather than focusing on visual originality, my intention was to practise core frontend engineering skills that are commonly required in real-world applications.
I integrated the YouTube Data API to fetch videos, channel information, and statistics.
This helped me understand:
- Asynchronous data handling
- Loading and error states
- API response structures
- Request testing and validation using Postman
Through this project, I gained a deeper understanding of:
- How React components render and re-render
- How state changes propagate through the component tree
- How to derive UI directly from data
- How React Query simplifies server-state management
Unlike vanilla HTML/CSS/JavaScript projects, React requires thinking about structure early.
This project helped me learn how to organise:
- Components
- Hooks
- API logic
- Utilities
in a way that supports readability, maintainability, and future extension.
I implemented client-side routing to handle multiple views such as:
- Home
- Video detail
- Search results
This improved my understanding of:
- URL-based navigation
- Passing state between routes
- Managing application flow with React Router
While developing this project, I encountered and resolved common issues such as:
- Undefined or missing API data
- Asynchronous timing problems
- Component rendering bugs
These challenges significantly strengthened my debugging and problem-solving skills.
Clone coding allowed me to focus on engineering decisions rather than design choices.
By working with a well-known product, I could concentrate on:
- React’s mental model
- Data flow
- Application architecture
These skills are directly transferable to professional frontend development.
| Feature | Description |
|---|---|
| 🔍 Video Search | Search videos using the YouTube Data API |
| 📺 Video List | Display trending or searched videos |
| 🧾 Video Detail | Dedicated video detail view |
| 🧭 Client-side Routing | Navigation between pages using React Router |
| ⏱️ Relative Time | Display publish time using timeago.js |
| ⚡ API Caching | Efficient data fetching and caching with React Query |
| Category | Technology |
|---|---|
| Framework | React 18 (Vite) |
| Styling | Tailwind CSS |
| Routing | React Router |
| Data Fetching | Axios |
| Server State | React Query |
| API | YouTube Data API |
| Utilities | timeago.js |
| API Testing | Postman |
| Build Tool | Vite |
src/
├── components/
├── pages/
├── hooks/
├── api/
├── utils/
├── App.jsx
├── main.jsx
(Exact structure may evolve as features are added.)
- 🔐 Environment variable management for API keys
- 📱 Improved responsive design
- 🎨 UI refinement and accessibility improvements
- ♻️ Refactoring reusable components
- 🧪 Error boundary and fallback UI
Developed by Byte-nana
Aspiring front-end developer focused on building scalable, data-driven React applications and understanding modern frontend architecture.