📖 Awesome Address Book 📖

This project shows a basic address book built with ReactJS, Redux Toolkit, React Router and Typescript 🚀

Includes

• 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

 

Features

🔍   Contacts search with infinite scrolling
🧔   Nationalities selection
📞   Mobile friendly / Responsive design
♿   Accessability compliant
🧪   Unit & Integration tests
🧭   Sidebar navigation

 

Live Demo

Check out the live demo

 

Set up

1. git clone https://github.com/cmacdonnacha/awesome-address-book.git awesome-address-book
2. cd awesome-address-book
3. npm install
4. That's it! See the Available Commands list below.

 

Available Commands

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test

Runs unit and integration tests in watch mode. Use npm run test:no-watch to run tests without a watcher.

npm run test:no-watch

Runs unit and integrations tests without a watcher.

npm run test:coverage

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 the coverage/lcov-report folder.

npm run test:e2e

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

npm run test:open

Runs end-to-end tests and opens a window to see the results running on your machine.

npm run lint

Runs the ESLint typescript code lint checker. Running npm run lint:fix will automatically fix any lint errors where possible.

npm run build

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.

npm run analyze

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.

 

CI/CD

This project uses Github actions to continuously test, build and deploy. You can see the workflow file in the workflows folder.

 

License

Licensed under the MIT license.