Amazon Prime Clone

A Prime Video inspired React app with routed movie and TV pages, TMDB powered rows, hover cards, slideshows, and media detail screens.

Live site | GitHub repo

Why I built this

I built this to understand how streaming homepages are put together: a sticky header, a hero slideshow, horizontal content rows, hover previews, routed pages, and API-driven media cards.

It is not trying to be Amazon Prime. It is a front-end practice project that recreates the rhythm of a streaming UI while pulling real movie and TV data from TMDB.

Preview

Features

• Home, Movies, TV Shows, All Content, Movie, and TV routes
• TMDB powered content rows for genres and popular media
• Hero slideshow using trending and popular endpoints
• Hover screen and media preview components
• Separate movie and TV request lists
• Sass based component styling
• GitHub Pages deployment script

Live website flow

flowchart TD
  A[Visitor opens live site] --> B[React Router loads App]
  B --> C[Header stays visible]
  C --> D{Route}
  D -->|Home| E[Home requests trending content]
  D -->|Movies| F[Movie request list]
  D -->|TV Shows| G[TV request list]
  E --> H[Slideshow]
  F --> H
  G --> H
  H --> I[Media rows]
  I --> J[Hover card or detail screen]

Loading

Component map

flowchart LR
  A[src/App.js] --> B[Header]
  A --> C[Home]
  A --> D[AllContent]
  A --> E[Movie]
  A --> F[TV]
  C --> G[Slideshow]
  C --> H[MediaScreen]
  H --> I[Episode cards]
  H --> J[Movie cards]
  J --> K[HoverScreen]

Loading

Tech stack

Area	Tools
UI	React, React Router
State	Redux, Redux Thunk
API	Axios, TMDB endpoints
Styling	SCSS, Material UI
Deployment	gh-pages

Run locally

npm install
npm start

The app will run at:

http://localhost:3000

Build

npm run build

Note

The project currently uses TMDB requests directly from the client, which was fine for a learning clone. For a production app, I would move API keys to a backend or serverless route.