React Ecommerce

What is this project about?

This project consists of a GitHub repository with a codebase for a e-commerce marketplace. We encourage you to watch the attached video where we walk you through this project.

In addition to code, the GitHub repository also has 8 issues - 4 bugs and 4 feature requests. Your task as a software engineer is to fix them - just like you would do at a real job. Please see the description of issues below.

Why did we create this project?

We built this project to help aspiring web developers simulate the actual job of a software engineer. We are senior web developers with over 10 years of experience in the industry. Back when we were getting started, we did not have confidence and suffered from a severe imposter syndrome for months. With this project we hope to help aspiring web developers gain the confidence they need to get better job offers and feel comfortable at their jobs from day 1.

To learn more about our motivations and about us please visit our website: https://yep.so/p/jobsimulatordev

Feature Requests

• Display "Empty Cart" Placeholder on Cart Component (Difficulty: Easy)
  • Description: When a user clicks the cart icon, they see a lot of blank whitespace. Our designers want us to show some content to fill this blank space. We need to complete this using flexbox, since it is our team's preferred CSS method .
• Sort products by price and release date (Difficulty: Medium)
  • Description: We would like to be able to show products in order of descending price, and descending date.
• Persist contents of shopping cart on page refresh (Difficulty: Medium)
  • Description: We would like to persist a customer's cart on refresh. You are required to use the localStorage API to build this enhancement.
• Add product filters functionality (Difficulty: Hard)
  • Description: We would like to be able to narrow down products based on selected filters. This is a complex task. Therefore, as a good product manager would, we split this work into 3 subtasks that you should complete in order:
    • Subtask 1: On filter input interaction, update filter text
    • Subtask 2: On filter input interaction, update ProductTable
    • Subtask 3: "Clear All" button clears the filters

Bugs

• Fix useEffect infinite loop (Difficulty: Easy)
• Update Cart Icon with Cart Size (Difficulty: Easy)
• Cart not closing when user clicks out of Cart (Difficulty: Medium)
• Compute Subtotal (Difficulty: Medium)

GitHub repository has more information on how to get started on about each issue.

Stay in Touch

We also have a constantly growing community on discord, where you can talk to people who are also doing our projects, ask for help, get career advice from senior developers or simply hang out. Come say hello: https://discord.gg/7cAkUcKbjB