This project was bootstrapped with Create React App.

• Typescript
• React.js, Create React App
• React Router, React Hook Form, Yup, React-i18next
• MUI - Material UI, Styled Components
• Redux, Redux Toolkit , Redux Saga, Redux First History , Redux Logger , Redux Saga Test Plan
• Mock Service Worker, Jest, React Testing Library , Cypress
• StoryBook
• ESLint, Prettier, Husky , Commitlint , Standard Version , Lint-staged, Pretty Quick

./src ├── assets # assets folder contains all the static files (images, fonts, etc). ├── components # shared components ├── config # global configuration, env variables etc. │   ├── Env.ts │   └── i18n ├── features │   ├── feature # 'feature' │   │   ├── api # API folder contains http service calls │   │   ├── assets # 'feature' assets folder │   │   ├── components # 'feature' components │   │   ├── hooks # 'feature' hooks │   │   ├── index.ts # entry point for 'feature' public API │   │   ├── store # 'feature' state stores contains slices, sagas, etc. │   │   └── types # 'feature' typescript types │   └── another_feature # 'another_feature' ├── hooks # shared hooks ├── libs # libraries imported or exported that can be used in different projects │   └── ui ├── pages # contains all application pages ├── routes # routes configuration ├── store # root store and store settings └── App.tsx # Application entrypoint

1. nvm
2. Node.js v17
3. Yarn

Install NPM packages:

yarn install

To start the application in the development mode run:

yarn start

📝 Note: Application starts in sandbox-mode, with all backend calls mocked by MSW library. To disable it change REACT_APP_MSW_ENABLED variable to false.

💡 Tip: Open http://localhost:3000 to view application in the browser.

To build the application for production, run:

yarn build

Launch the test runner in the interactive watch mode:

yarn test

See the section about running tests for more information.

Run yarn coverage to generate code coverage.

To run e2e use below command:

yarn build yarn test:e2e

📝 Note: This script will start the server, wait until application is running, execute e2e tests and after that it will shut down the server.

💡 Tip: To run Cypress in interactive mode, start the application and run yarn cy:open

Start Storybook in development mode:

yarn storybook

To build Storybook as static web application, run the following command inside project's root directory:

yarn build-storybook

💡 Tip: run npx http-server ./storybook-static to preview static web application locally.

Running the script yarn format will format the code style of all TypeScript files.

The script yarn lint will run linter in the project. If any code standards or styles are not met in code, it will display the errors or warnings.

Run yarn lint:fix command to format code and fix automatically any error found - if the linter knows how to fix it😉.

💡 Tip: To enforce code conventions and prevent bad commits this project is setup to use Husky. Husky is used to run validation and format code before every commit. Additionally, it will check if git message is following conventional commits format.

Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as ../../../Component. Wherever you move the file, all the imports will remain intact.

To enable Absoulte imports in Intelij ide go to Settings -> Editor -> Code Style -> TypeScript -> Imports and enable Use paths relative to tsconfig.json.

Create release version and generate a changelog file:

yarn release

📝 Note: use yarn release:first-release if this is the first release.

💡 Tip: yarn release:dry-run - allows you to see what commands would be run, without committing to git or updating files.

• React Developer Tools
• Redux DevTools
• Testing Playground
• Window Resizer
• React Hook Form - form builder
• i18next-scanner

• TypeScript Deep Dive
• React+TypeScript Cheatsheets
• Redux - style guide
• Redux Toolkit - Getting Started
• React Hook Form - typescript Support
• Bulletproof React
• Jest cheat sheet

• React Hook Form vs. Formik: A technical and performance comparison
• MUI - theme switcher
• Level up your CSS linting using Stylelint
• Create React App: A quick setup guide
• Using TypeScript with Redux Toolkit
• What is Redux Ducks?
• Redux DevTools: Tips and tricks for faster debugging