Lendo Shopping Cart

This is the TypeScript version of the Lendo Shopping Cart exercise. View demo

For the full explanation, see the original project. This repository covers only the new additions.

Installation

⚠️ Note: This project uses the faster PNPM (notice the P) instead of Node Package Manager (NPM withouth P) this allows for faster installations but require one extra step on first time usage.

1. Install PNPM: npm install -g pnpm.
2. Install dependencies: pnpm install (notice the P)
3. Run the project: npm run dev

Done

1. Use Redux Zustand instead of ContextAPI to see if it reduces unncecerary re-renders.
2. Add end to end test with Playwright.
3. Migrated to TypeScript.
4. Add an enhanced add to cart feature.
5. Add Testing Library Test to Product page to hanlde products with no variant.
6. Improve <CartItem> userfulness by mentioning the selected color and variant.
7. Create a new, enhanced Product page to avoid useEffect()
8. Improve <InputRadio> for variants by using proposed design in Sketch.
9. Improve <CartItem> design by putting the quantiy next to the text, instead of below on desktop as there is space on the side.
10. Improve <QuantityChooser> by adding an input number.
11. Add Biome linter.
12. Add state to input radio fixture.
13. Add Checkout fixture page.

Cancelled

1. Create custom toast notification to reduce dependencies: I changed my mind, the library is only 5kb and it has the feature of stacking multiple notifications. Ideal for the Checkout page where you can remove multiple items at the same time.