Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shopping Cart: Add point to assignment #27590

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions react/the_react_ecosystem/project_shopping_cart.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@

<div class="lesson-content__panel" markdown="1">

1. Create a new React project.

Check failure on line 9 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Spaces after list markers

react/the_react_ecosystem/project_shopping_cart.md:9:1 MD030/list-marker-space Spaces after list markers [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md030.md
2. Think about the component and the folder structure. How could you set up your application? Which components or functionalities do you need? It's a good idea to note this down somewhere you can easily get to and refer back and add to it to keep track.

Check failure on line 10 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Ordered list item prefix

react/the_react_ecosystem/project_shopping_cart.md:10:1 MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 2; Style: 1/1/1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md029.md

Check failure on line 10 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Spaces after list markers

react/the_react_ecosystem/project_shopping_cart.md:10:1 MD030/list-marker-space Spaces after list markers [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md030.md
3. You should have at least two pages (a home page and a shop page, which includes your shopping cart). Let the user navigate between the pages with a navigation bar, which will be shown on both pages.

Check failure on line 11 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Ordered list item prefix

react/the_react_ecosystem/project_shopping_cart.md:11:1 MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 3; Style: 1/1/1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md029.md

Check failure on line 11 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Spaces after list markers

react/the_react_ecosystem/project_shopping_cart.md:11:1 MD030/list-marker-space Spaces after list markers [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md030.md
4. To your homepage, you can add whatever you'd like! A few images or information will be totally fine; it doesn't have to be something fancy - it's to test the concepts taught thus far.

Check failure on line 12 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Ordered list item prefix

react/the_react_ecosystem/project_shopping_cart.md:12:1 MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 4; Style: 1/1/1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md029.md

Check failure on line 12 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Spaces after list markers

react/the_react_ecosystem/project_shopping_cart.md:12:1 MD030/list-marker-space Spaces after list markers [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md030.md
5. On the shopping cart page, you should have the same navigation bar that displays the number of items currently in the cart. You should also have a button next to it where you can go to the cart to checkout and pay (however we are not going to implement this logic here).

Check failure on line 13 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Ordered list item prefix

react/the_react_ecosystem/project_shopping_cart.md:13:1 MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 5; Style: 1/1/1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md029.md

Check failure on line 13 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Spaces after list markers

react/the_react_ecosystem/project_shopping_cart.md:13:1 MD030/list-marker-space Spaces after list markers [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md030.md
6. Build individual card elements for each of your products. Display an input field on it, which lets a user manually type in how many items they want to buy. Also, add an increment and decrement button next to it for fine-tuning. You can also display a title for each product as well as an "Add To Cart" button.

Check failure on line 14 in react/the_react_ecosystem/project_shopping_cart.md

View workflow job for this annotation

GitHub Actions / Lint project files

Ordered list item prefix

react/the_react_ecosystem/project_shopping_cart.md:14:1 MD029/ol-prefix Ordered list item prefix [Expected: 1; Actual: 6; Style: 1/1/1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md029.md
7. Fetch your shop items from [FakeStore API](https://fakestoreapi.com) or something similar.
8. Once a user has submitted their order, the amount on the cart itself should adjust accordingly.
9. Make sure to test your app thoroughly using the React Testing Library. Be careful not to test `react-router-dom` directly, since it is an external library and the developers working on it must have tested the library already.
10. As usual, style your application so you can show it off! You have a host of options provided already.
11. Lastly, it's time to deploy it! Depending on what hosting solution you're using, you may need some additional configuration so that your routing is handled correctly as a single page application (SPA).
9. Clear out any `missing in props validation` errors in your app!
10. Make sure to test your app thoroughly using the React Testing Library. Be careful not to test `react-router-dom` directly, since it is an external library and the developers working on it must have tested the library already.
11. As usual, style your application so you can show it off! You have a host of options provided already.
12. Lastly, it's time to deploy it! Depending on what hosting solution you're using, you may need some additional configuration so that your routing is handled correctly as a single page application (SPA).

1. **Netlify**: You need to add a `_redirects` file to the `public/` directory of your project. Copy the following to redirect all routes to the index page and let `react-router-dom` handle the rest. You can read more about this at the [Netlify documentation on redirects](https://docs.netlify.com/routing/redirects/).

Expand Down