Skip to content

This project shows a basic address book built with ReactJS, Redux Toolkit and Typescript πŸ“–

License

Notifications You must be signed in to change notification settings

cmacdonnacha/awesome-address-book

Repository files navigation

πŸ“– Awesome Address Book πŸ“–


This project shows a basic address book built with ReactJS, Redux Toolkit, React Router and Typescript πŸš€

contributions

Includes

Β 

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.

CI/CD Screenshot

Β 

License

Licensed under the MIT license.

Β