This project was bootstrapped with Create React App, and then extended with other capabilites I like to have when developing React apps.
yarn: installs dependenciesyarn start: starts the development serveryarn test: starts the test runneryarn storybook: starts the storybook component libraryyarn build: builds the app for deployment
This project uses Tailwind CSS for styling. I followed this guide to make Tailwind work with Create React App.
I added Storybook to create a gallery of my components. In a production app, I might also add visual regression testing on top of Storybook, but this generally requires a CI system to work well.
Several formatting steps are performed by VSCode. This is faster and generally works better than eslint-based formatting. However, this means that VSCode is implicitly required to develop using this repo. I would at some point like to find a solution that works in other editors and on CI.
The following formatters are run on save:
- Prettier Formatter uses Prettier to format code.
- TypeScript Import Sorter sorts Typescript imports.
- Headwind sorts Tailwind class names.
I also added some custom ESLint configuration on top of the default Create React App config:
- Typescript to enforce Typescript best practices.
- Additional rules from JSX Accessibility.
- The Prettier config to disable rules that conflict with Prettier.