This repository contains the client for a shopping cart app.
In this project, I utilized my knowledge of TypeScript, React, Redux, Redux-Saga and Test Driven Development. I used Etsy's API to retrieve product data.
Users are able to:
- See a list of products
- Add and remove products from a shopping cart
- View their shopping cart
- View the quantity of products in their cart
Test driven development - The user experiences mentioned above are expressed through tests written with Jest.
Caching - To avoid hitting the request limits on this API, I came up with a caching solution which utilizes local storage, Redux and Redux Saga.
Due to time contraints, I was not able to devote enough time to make as clean of user-interface as I would have liked. In particular, I would have liked to have implemented a products detail page and have fleshed out the other pages.
With a fresh repository, thils will get the application compiled and running on http://localhost:3000/
- Install dependencies
yarn install
- Copy example configuration file and modify accordingly. To get the API Key, sign up for one on Etsy Developer
cp .env.example .env
- Compile TypeScript, optionally watch source files for changes and build them automatically
yarn build [--watch]
- Run tests, optionally watch source files for changes and run the tests automatically
yarn test [--watch]
- Build and start the application on your browser
yarn start [-c]
- When on your browser, please use any CORS extension available and turn it on to prevent CORS errors when running the client.
I personally like Allow CORS: Access-Control-Allow-origin
If you forgot to place an API KEY in the previous step, you will need to start from step 3 and ensure you clear your cache
yarn start -c