WDD 330: Web Frontend Development II

W01 Individual Activity: Add Item to Cart Broken

Overview

The course will be using a Trello board to manage the team project. This activity assumes that:

  1. you have already created a Trello account from the setup course tools activity, and
  2. your team has made a team copy of the SleepOutside project board from Trello.
    This will be your shared board to work on throughout the block.

There are some tasks marked "Team Activity" and others that are not. Each week the team should complete the appropriate team activity together by Thursday. Each team member will complete two (2) additional cards from the project each week. These should be done individually as much as possible, but remember that you have a team to help you if you get stuck on a particular task.

Activity Instructions

Each member of the team should work on this same Trello card this week only to practice the workflow.

The activity will use the "Add item to cart broken" task.

This is largely a debugging and troubleshooting task, but it will help to become familiar with the code provided.

Trello

  1. Login to trello.com.
  2. Open your team's copy of the SleepOutside Trello board.
  3. Add yourself to the "Add item to cart broken" task.
  4. Move the card "Doing" if the card has not been moved already by one of your team members.
  5. Read the details of the card.

Code Orientation and Review

  1. In VS Code, open up the project that your team setup in the team activity this week.
    Most of the work you will be doing over the first half of the course will be in this shared repository.
  2. Pull any changes from your team's GitHub source before proceeding.
  3. Create a new branch called yourinitials--individual1.
    Be sure to use your own initials in the yourinitials segment of the branch name.
  4. Look through the code to become oriented with the project structure.
  5. Start the development server in the browser. (npm run start).
  6. In your browser, try adding an item to the cart. Notice that nothing seems to happen. Open the browser developer tools and check for any errors.
  7. The code stores the cart contents inside localStorage.
  8. Go to the application panel in the developer tools window. find local storage for your localhost. Note the contents.
  9. With this panel open, attempt to add another item to the shopping cart in the application. Note what happens to localStorage.

Debug

  1. Debug the code to figure out what is wrong and fix it.
    Hints
    • Pay careful attention to the error in the console, but be aware that where the error is caught is not always where the problem is actually located.
    • Set breakpoints to stop the code execution and inspect it. Sources Panel -> click on the js file source -> click on the line number where you want to set the breakpoint -> reload the page to invoke the breakpoint.

      Stepping through the code is also a good way to understand the flow of the code.

  2. As you poke around you will hopefully find the function addToCart. Pay attention to what it is doing. What does setLocalStorage do?

Pull Request

  1. In VS Code, complete the code fixes to fix the cart operation
  2. Test that the cart is working locally.
  3. Lint and format your code.
  4. Commit and push your changes up to GitHub.
  5. Submit a pull request for this branch.
    Normally your pull request would get reviewed by another member of the team and merged back into main, in this case however we have more than one branch that has solved the same problem. We only want to merge one of those branches back into main. Finally someone should move the Trello card to "Done".
  6. Discuss with your team which branch you want to keep and have one of the team merge that pull request. The other requests can be closed without merging.
  7. Finally someone on your team should move the Trello card to "Done".

Review Process

From here on you should follow this process with each of the Trello tasks you complete:

You may want to copy or reference these task steps for future reference until it becomes a habit.
  1. Choose a Trello card, assign yourself to it, and move to "Doing".
  2. Pull any changes from your team's project.
  3. Make a branch.
  4. Complete the work.
  5. Lint and format the code.
  6. Commit and push.
  7. Make a pull request for your new branch.
  8. Let your group know there is a pull request waiting.
  9. Another team member should review the pull request in GitHub and, if everything looks good, Merge the request.
  10. Delete the old branch.
  11. Move the Trello card to the "Done" list.