Web · Learning project
Amazon Clone
React recreation of the Amazon home page: search header, Prime Video banner and product cards with Add to Basket, built as a learning project.
The Amazon home page, rebuilt in React
Search header, Prime Video banner and product cards with Add to Basket, built from reusable components, on desktop and on a phone.
- scope
- Design → Build
- scope
Figma study to React front-end - stack
- React
- stack
reusable components - interaction
- Basket
- interaction
Add to Basket with live count
In detail.
02
Product cards that behave
Each card shows the title, price and rating, and its Add to Basket action updates the basket count in the header.
Overview.
A React recreation of the Amazon home page, built to practise turning a dense, real-world interface into reusable components: a search header, a Prime Video banner and a grid of product cards.
Each product card has an Add to Basket action wired to the basket count in the header, so the page behaves as well as it looks.
What stood out.
- 01
Dense layout, clean components
A busy page broken down into small, reusable React components fed by product data.
- 02
Figma first
The page was studied and laid out in Figma before any code was written.
- 03
Responsive
The grid and header adapt from desktop down to mobile widths.
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.
