An e-commerce site for a fake store – browse items and add them to your cart.
Click here to view the live site
- Head to the live site on any device (mobile, tablet or desktop – it doesn't matter)
- Click on the SHOP NOW button on the left-hand side or click on any of the category links up top
- 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!
- 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.
- 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 😉
app-use.mp4
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.jsonfile 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