An e-commerce site for a fake store – browse items and add them to your cart.

Click here to view the live site

1. Head to the live site on any device (mobile, tablet or desktop – it doesn't matter)
2. Click on the SHOP NOW button on the left-hand side or click on any of the category links up top
3. If you like a product, click on the Add to Cart button, enter the quantity you'd like to "purchase", and then click Submit. The item will be added to your cart and you'll see a quantity appear on the shopping cart icon in the upper-right corner of the screen. Add and remove as many items as you like to your cart!
4. To view your cart, click on the icon in the upper-right corner of the screen. A pop-up will show you all of the products, amounts, and prices of every item; as well as a grand total price.
5. There's no back end (and these aren't real products anyway!), so you cannot actually checkout. But click on the Checkout button anyway for a special surprise 😉

This project was built in order to implement what I've learned about testing, type checking, client-side routing, and fetching data in React.

I later came back to this project and refactored it to TypeScript as a way to learn the language. It seemed like a natural progression from the type checking I had initially done.

• TypeScript / JavaScript
• CSS
• HTML
• Bash – for writing a script that generates a .tsconfig-lint.json file that lints/type-checks individual or smaller groups of TypeScript files at a time in the CLI. (By default TypeScript does not support linting/type-checking individual files in the CLI, and seeing type errors for all files at once was overwhelming.)

• React
• Vite – for project scaffolding and development
• Git (obviously)
• Vitest – for testing components
• React Testing Library, jest-dom – for testing components
• React Router – for client-side routing
• React PropTypes – for type checking before the TypeScript refactor

• Product information and images from FakeStore API
• Home background image by lookstudio on Freepik
• SVG icons from Pictogrammers
• Social media icons from Devicon and Bootstrap