Skip to content

developer-job-simulation/react-ecommerce

Repository files navigation

React-Ecommerce-by-JobSimulator

React Ecommerce by JobSimulator.dev

This is a simple E-Commerce site made with React and TailwindCSS. Your job is to fix 8 issues:

  1. Sort Products by Price and Release Date
  2. Cart Persistence on Refresh
  3. Add Product Filters Functionality
  4. Product Fetch is Causing Infinite Loop
  5. Need to display 'Empty Cart' When Cart is Empty on Cart Page
  6. Update Cart in Nav with Cart Size
  7. Cart not closing when User Clicks Gray Region
  8. Subtotal Is not Implemented on Cart Page

Learning Objectives

You will practice and gain experience with:

  • Styling webapps with TailwindCSS
  • Using React Hooks (useState, useEffect)
  • Manipulating, aggregating, sorting, and displaying data
  • Working with Tables in React
  • Implementing a Shopping Cart
  • Working with Local Storage
  • Currency Formatting
  • Pulling Data from APIs

How to start working

  1. Fork this repo and clone it locally.
  2. Install the dependencies by running npm i
  3. Run the app locally by running npm run dev:frontend to start the frontend, and npm run dev:backend to start the backend.
  4. Visit http://localhost:3000 to see the site.
  5. Fix all the issues (hints are provided as TODO comments in the code)
  6. Once all your solutions are complete, create a single Pull Request to this repository
  7. Check if your solutions passes our automated tests.

Need help?

The best way to ask for help is to ask our Discord community.

Click here to join the Jobsimulator.dev Discord.

Want more challenges?

Browse our list of challenges and join our Discord to get notified when new challenges are released.