Odin Project Angular Shopping Cart

This is an Angular solution for the Odin Project React shopping cart project.

Screenshots

---

---

Built With

• Angular
• Angular CLI version 17.0.7.
• Platzi Fake Store API
• Loading.io
• Material Design Icons

Thoughts

• Signals seem to be great for shopping carts. I built this app to test that theory.
• mutate is now update.
• Platzi API is not great. The pictures for the items are just random picture links. The description for the product will never match the image. The default image size is also quite large at 640px. The images array has multiple images for a product, but all images are the same size. (UPDATED: Seems like the Platzi API is improving.)
• Fake Store API is a good alternative, but basic updates to the API have not been applied in a year, so I decided to try the Platzi API. I need to keep looking for better alternatives.
• Platzi API doesn't have a stock property like the Fake Store API so you have to take extra steps to create a conditional to disable the Add to Cart button.
• I used the offset and limit parameters to limit the amount of products returned. There are broken image links in some of the products.
• I decided to make the navbar sticky so you can see the item count go up in the cart at all times.
• With the quantity number input, you can click on the input and type in values past the max value and the cart total will increase and the price will re-calculate. One way to prevent this (at the expense of accessibility) is just returning false on the keydown event.
• The cart is not persistent. You could add local storage or use a cookie for persistence.

Continued Development

• Testing -> undecided on what library to use
• Pagination -> Platzi API supports it with offset and limit
• Smaller screens -> truncate Platzi Fake Store to Platzi
• Might add TanStack Query for API request

Useful Resources

• transform.tools - json to typescript
• YouTube - Using Angular Computed Signals for Cart Totals
• YouTube - Signals in Angular | How to use Signals in Angular Project | State Management using Angular Signal
• Stack Overflow - easiest css for red notification badge with count
• Stack Overflow - align button to bottom of card
• Stack Overflow - disable writing in input type number
• Medium - truncate pipe
• Blog - Ellipsis Directive
• Stack Overflow - angular show spinner for every http request
• Stack Overflow - currency pipe no decimal value