The frontend for StreamHub, a video streaming app I'm building to learn full stack development. Tried to keep it close to how YouTube feels but built everything from scratch.
- Browse and watch videos
- Login / register
- Like, comment, subscribe
- Watch history
- Channel pages
- Dark mode
- Works on mobile too
- React 18 + Vite
- TailwindCSS
- TanStack Query for server state
- Zustand for auth state
- React Router v6
- Axios with interceptors for auto token refresh
src/
├── components/ reusable UI pieces
├── pages/ route-level components
├── queries/ react query hooks
├── services/ all api calls live here
├── stores/ zustand stores
├── constants/ api routes + query keys
├── lib/ axios instance + config
└── utils/ formatters etc
Make sure the backend is running first.
git clone https://github.com/hariom2207/streamhub-frontend.git
cd streamhub-frontend
npm install
cp .env.example .env
# add your backend URL in .env
npm run devVITE_API_URL=http://localhost:8000/api/v1
- Why you need a service layer instead of calling APIs directly in components
- How token refresh interceptors work in axios
- How TanStack Query makes loading/error states so much easier
- Zustand is way simpler than Redux for this kind of app
The API repo is here → streamhub-backend