This page is a work in progress.You can help improve it. →

Store Front

In this assignment you will build a mock shopping website in React, with React Router.


  • Use components and props effectively in React
  • Use React Router to create declarative navigation in your application


In this assignment you will build a mock e-commerce website. Take time to think about the component structure of the page, and create reusable components.


degit $GITHUB_USER/react-project-template StoreFront

Explorer Mode

  • Your store should have categories that products are placed in.
  • The landing page should display "featured" products.
  • Your store should have a listing page of all products.
  • Your store should have a listing page of products in specific categories (this might be the same component as the previous requirement, think about how this would work).
  • Your store should have a product details page, with a photo, price and other details.
  • Create your own JSON file with data for your products.
  • Create a theme and identity for your store and the products it sells, have fun with this. Take the time to make a nice looking web application for your portfolio.

Adventure Mode

  • Add enough products to your store that the customer would need multiple pages to browse it all.
  • Add "pagination" to your product listings.

Epic Mode

  • Build a shopping cart that customers can add items to.
  • Add functionality to manage the quantity of items in the shopping cart.
  • Build a mock (no payment transactions) checkout workflow for the items in a customers shopping cart.
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.