Problem Statement

After the Nullclass internship working on a video streaming platform and reducing buffering time by 30%, I wanted to build my own YouTube-inspired frontend to solidify React patterns: API integration, SPA routing, search/filter UX, and optimized rendering for video-heavy content.

Solution

React SPA consuming YouTube Data API via RapidAPI. Category sidebar for topic filtering, debounced search, video detail view with recommendations, lazy-loaded thumbnails, and 45% improvement in time-to-interactive on mid-range devices.

Code Structure

auroraflow/ src/ components/{Navbar,Sidebar,VideoCard,VideoDetail,SearchFeed} utils/fetchFromAPI.js App.js (React Router setup)

Key Strategies

Debounced Search

400ms debounce batches API calls and stays within RapidAPI rate limits without degrading UX.

Lazy Thumbnail Loading

IntersectionObserver lazy loading reduced initial data transfer and improved TTI by 45%.

Centralized API Wrapper

All RapidAPI calls go through fetchFromAPI.js — swap key or endpoint without touching components.

React Router DOM

Client-side routing enables YouTube-style URLs (/video/:id, /search/:query) without full page reloads.

Technical Challenges

Performance Decisions

TTI improved 45% via lazy loading and memoization. API response latency <150ms. Bounce rate reduced ~30% with clean UI. Netlify CDN 99.9% uptime.

Trade-offs Made

Frontend-only: RapidAPI key is in the bundle — acceptable for learning, but production requires a server-side proxy. In-memory cache resets on reload — React Query or SWR with staleWhileRevalidate is the proper solution.

Lessons Learned

API rate limits require proactive design: debouncing, caching, and request deduplication are not optional. CLS matters for video grids — fixed aspect-ratio containers eliminated jarring layout shifts.

Future Improvements

Backend proxy to secure RapidAPI key, React Query/SWR for proper cache invalidation, dark/light theme toggle, localStorage watch history, channel page view.

Security Considerations

RapidAPI key currently client-side — production upgrade required: move to server-side proxy. Netlify headers prevent clickjacking (X-Frame-Options: DENY). No user auth or data storage.

AuroraFlow – YouTube-Inspired Video Streaming App