This project shows a basic address book built with ReactJS, Redux Toolkit, React Router and Typescript ๐
- Redux Toolkit
- React Router
- Typescript
- Jest
- React Testing Library
- Cypress
- ESLint
- Prettier
- Github Actions CI/CD
- Styled Icons Pack
- Source Map Explorer to analyze code bloat
๐ Contacts search with infinite scrolling
๐ง Nationalities selection
๐ Mobile friendly / Responsive design
โฟ Accessability compliant
๐งช Unit & Integration tests
๐งญ Sidebar navigation
git clone https://github.com/cmacdonnacha/awesome-address-book.git awesome-address-book
cd awesome-address-book
npm install
- That's it! See the Available Commands list below.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Runs unit and integration tests in watch mode. Use npm run test:no-watch
to run tests without a watcher.
Runs unit and integrations tests without a watcher.
Displays the code coverage within the console and also generates a coverage folder.
To view the code coverage report in your browser open the
index.html
file within thecoverage/lcov-report
folder.
Runs end-to-end tests using Cypress. This will run using the Electron (headless) browser which comes with Cypress. You can also view the latest test runs online via this project's Cypress Dashboard
Runs end-to-end tests and opens a window to see the results running on your machine.
Runs the ESLint typescript code lint checker. Running npm run lint:fix
will automatically fix any lint errors where possible.
Builds a production version of the app inside the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
This will run a production build and then analyze the output using source-map-explorer which analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.
This project uses Github actions to continuously test, build and deploy. You can see the workflow file in the workflows folder.
Licensed under the MIT license.