Web application intended to manage a shopping cart easely.
- clone repo: Open a new terminal and execute git clone https://github.com/jdmiguel/shopping-cart.git
- install dependencies: Execute npm install
- run local server: Execute npm run dev
- create production files: Execute npm run build
- run test suites: Execute npm run test test
- VITE
- REACT
- TYPESCRIPT
- EMOTION
- VITEST
- REACT-TESTING-LIBRARY
Vitejs has been used as bundler for this application. In addition, the setup of the application includes several tools (such as eslint, prettier, husky and lintstaged) widely used in professional application setups.
The source files are in the src folder that is composed of the following folders:
- assets: Images used in the app
- components: All the components used, including:
- ui: Core components that are reused across the application
- hooks: React hooks to handle visual logic
- contexts: React contexts to handle visual logic and avoid prop drilling issues
- helpers: Several utilities such as types, literals, colors, mocks and theme settings
The Emotion library has been used for styling. On the other hand, responsiveness has been added to support different devices:
Unit tests have been implemented on several components such as Button, Card, etc... Some integration tests has been added on the root component as well to ensure the app behaves as expected by using Vitest and Testing Library
- pagination: The products are loaded by scrolling down to improve the performance of the application
- theme mode: Switchable theme mode (light and dark theme)
- error catching: Error boundaries included to catch errors