🛒 Retail site challenge

Retail site with checkout. Last challenge of the Scrimba react boot camp by Bob Ziroll. Rebuilt with Next.js and TailwindCss. Using Redux instead of Context api for state management.

Summary of the challenge: https://github.com/boneswvb/scrimba-react-pic-some-app
Link to Scrimba: https://scrimba.com/

Getting Started

Install the dependencies, then run the development server:

npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

Built with

Project is created with:

• React
• Next.js
• Redux
• Tailwind CSS
• Netlify (hosting)
• Hero icons
• react-responsive-masonry

Features

• Add shopping item to basket
• Delete shopping item
• Mark favorite items
• Place order (time out function that clears basket and notifies user)
• Masonry layout

Screenshots

Home page

Checkout page

Links

• Live Site URL: Pic-some retail site
• Summary of the challenge

What I learned

• Rehearsing basic javascript such as array methods, manipulating state.
• Fetching data from external api with Next.js.
• Redux state management
• Using a timeout function

TODO

• Nicer design for checkout page
• Masonry breaks a bit for the last photos at the homepage.

Author

• Website - Peter