This project has been developed with the last version of React.js and Redux (Redux toolkit).
- React.js
- Redux toolkit
- Redux presist store
- Typescript
- Cypress for E2E
- React testing library
- Prettier, ESLint, Husky
- Netlify and GithubAction for CI/CD automate testing
- Use login mock data reqres.in
In the project directory, you can run:
Install all the dependencies that are needed for developing.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Cypress is a next-generation front-end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications. This command has been used to run the E2E test with Cypress. I have used cypress for E2E and mock data.
- This command builds the application for production.
- This command formats all files with Prettier.
Regarding the S for SOLID I just tried to keep each function(component as a function as well)
just be responsible for a single task. That's why I just created a separate component for every part
and also keep it simple stupid.
Using Prettier for opinionated code formatter. It will take care of the formatting for you. Prettier creates an abstract syntax tree from your code and uses it to write new code formatted according to a set of rules. In addition, I check pretty before every commit by adding a pre-commit hook. For more detail check package.json, husky section.
Modern native Git hooks made easy. Husky is used for git hook pre-commit to format all code with Prettier.
yarn test
yarn cypress open or yarn cypress run (run cypress in command line)
I have used GitHub actions for automated testing and run all Unit Test.