This project shows a basic address book built with ReactJS, Redux Toolkit and Typescript 📖
MIT License
🔍 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
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 thecoverage/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.
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.