The option to fork the repo instead of cloning or downloading the code as zip file was missing. It is a viable solution if one wants to keep track of the changes made by oneself for later reference.

Removed unnecessary react logos & css files and their imports from 01-starting-setup project to run with minimal code possible, making it easier to understand the workings for beginners

App was crashing when attempting to open the Modal. Fixed by changing ReactDOM imports. Thank you for such a complete and well explained React course.

Right now, if I use this css file, the button covers the full-width of the card which looks ugly. So I added "display: inline-block" to make the button takes up space of its content-width.

When I tested the application I noticed the item count inside the cart skyrockets after just a few clicks. Found out that the current implementation essentially doubles the item count Here is an edit that adds only 1 item when + is pressed

Adding and deleting the meal items in very specific order takes the total Amount to negative zero. It's a quick but challenging Fix to deal with this bug. Here's how you can trigger this vulnerability.

1. Refresh the page.
2. Add one item to the cart.
3. Enter another item and increase its amount to 2.
4. delete an item whose amount is 2. now, its amount should be 1
5. delete the item which is added the very first time.
6. then delete the item whose amount was 2, and your totalAmount will be negative zero.

Replace the code with this one in CartProvider.js where action.type is REMOVE

  if (action.type === 'REMOVE') {
    const existingCartItemIndex = state.items.findIndex(
      (item) => item.id === action.id
    );
    const existingItem = state.items[existingCartItemIndex];
    // Added .toFixed(2) for solving the totalAmount issue.
    const updatedTotalAmount = (state.totalAmount).toFixed(2) - existingItem.price;
    let updatedItems;
    if (existingItem.amount === 1) {
      updatedItems = state.items.filter(item => item.id !== action.id);
    } 
    else {
      const updatedItem = {...existingItem, amount: existingItem.amount - 1 };
      updatedItems = [...state.items];
      updatedItems[existingCartItemIndex] = updatedItem;
    }
    console.log("Amount Dec:" ,updatedTotalAmount);
    return {
      items: updatedItems,
      totalAmount: updatedTotalAmount
    }
  }

I'm using WSL2 to follow the course, and there was an issue with this example project: auto-reload didn't work. It was throwing this error every time I updated a file and stopped responding:

VM256:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

I solved it by upgrading react-scripts to v5.0.1 😄