- Clone the repository
- Navigate to the folder
- Run
yarnto install the dependencies - Run
yarn startto start the development server.
In the project directory, you can run:
yarn start- Runs the app in the development mode at http://localhost:3000.yarn test- Launches the test runner in the interactive watch mode.yarn build- Builds production version tobuildfolder, optimising for best performance. See the section about deployment for more information.yarn lint- Lints project files.yarn fix- Same asyarn lint, but also fixes errors where possible.yarn generate- Scaffold files for quicker development.
There are more scripts that are not listed above. The full list of scripts are within the package.json file.
- Built utilising React with TypeScript (TS)
- State management with Redux through Redux Toolkit (RTK)
- Page routing with React Router
- Bootstrapped using Create React App (CRA) with cra-template-typescript-redux
- Styling with CSS-in-JSS with Theme UI (with Emotion)
- Normalize CSS with normalize.css
- Font used: Inter
- Icons used: Feather through React Icons
- Testing with Jest and Enzyme
- Code formatting with Prettier
- Code linting with ESLint
- Easier file scaffolding with plop
Yarn was used during development, which is why there is a yarn.lock file instead of a package-lock.json file. Ultimately use whatever you're comfortable with, but know the differences.
I've used Yarn v2 for this project, but I have not used PnP — I kept coming across issues during setup so I am using Yarn v2 with the node-modules plugin.
I get annoyed at seeing loads of relative importing paths, so absolute import aliasing has been used. This is why there are capital letters used for the immediate directory under src/.
The template provides basic Redux configuration with feature based folder structure. You can use Redux devtools browser extension. Based on Redux maintainers recommendation.