Web · Learning project
Netflix Clone
React recreation of the Netflix browse page: hero banner with Play and My List, and horizontally scrolling rows for Originals, Trending and Top Rated.
The Netflix browse page, rebuilt in React
A full-bleed hero banner with Play and My List actions, above horizontally scrolling rows, on desktop and on a phone.
- scope
- Design → Build
- scope
Figma study to React front-end - stack
- React
- stack
data-driven content rows - browse
- Scrolling rows
- browse
Originals, Trending, Top Rated
In detail.
02
Rows generated from data
Netflix Originals, Trending Now, Top Rated and Action Movies all come from one reusable row component fed by data.
Overview.
A React recreation of the Netflix browse page, built to practise media-style layouts: a full-bleed hero with Play and My List actions, and rows of artwork you scroll sideways.
Rows for Netflix Originals, Trending Now, Top Rated and Action Movies are generated from data by one reusable component.
What stood out.
- 01
Content rows from data
One row component renders every category, so adding a row means adding data, not markup.
- 02
Hero and artwork
A banner with overlaid copy sits above large poster rows, matching the look of the original.
- 03
Figma reference
Spacing, type and colour were captured in Figma before the build.
Have something to build?
Let’s talk.
I’m currently full-time at SaaS Labs and taking on a select number of freelance projects on the side. I’m always open to chat, connect with new people and explore new opportunities.
