Create React App Template

---

This project was bootstrapped using react-template, a batteries included create-react-app template with Chakra UI & Typescript made by Victor Han.

Requirements

• Git
• Node
• Yarn
• Firefox

Installation

Clone this project using Git. In a terminal, navigate to the cloned project's root folder, and run the following command:

yarn && yarn start

Enabling GitHub Actions

Once you push your project to your own GitHub repo, you need to add some configurations so all the GitHub actions here work properly. If you don't want those, you can delete the .github/workflows folder.

For the Code Quality analysis, enable code scanning on your repository.

For Chromatic, you need to create and account there, add your GitHub project, and add a CHROMATIC_PROJECT_TOKEN to your project secrets, as instructed here.

For Vercel deploy with E2E testing, you need to add VERCEL_ORG_ID, VERCEL_PROJECT_ID and VERCEL_TOKEN to your project secrets.

1. You can get both VERCEL_ORG_ID, VERCEL_PROJECT_ID by linking your project with your vercel account using the vercel CLI command, and checking the file created at .vercel/project.json in your project. Further action instructions here.

2. The VERCEL_TOKEN one can be generated on your Vercel token page, make sure to create a unique one.

Commands

• yarn build-storybook: Creates a production build from the component library docs
• yarn build: Creates a production build from this project
• yarn check: Runs type and spell checking, code linter and unit tests
• yarn coverage: Runs unit tests and opens a code coverage report on http://127.0.0.1:8080/
• yarn start: Starts the project with hot reload at http://localhost:3000
• yarn generate-theme-typings: Generates TypeScript typings for your custom Chakra theme (runs automatically on post-install)
• yarn lint: Runs the code linter
• yarn spellcheck: Checks for spelling typos in code
• yarn start: Starts the project at http://localhost:3000, but you need to execute the yarn build command beforehand
• yarn storybook: Starts the component library docs with hot reload at http://localhost:6006
• yarn test-e2e: Runs all end-to-end tests using the locally installed Firefox browser, but you need to have started the project in another terminal for it to work
• yarn test: Runs all unit tests and code coverage report
• yarn type-check: Check validity of all types in the project

Technologies

This template uses:

• Create React App framework
• TypeScript type checking
• Chakra UI as the default component library
• Redux Toolkit for state management
• Jest and React Testing Library for unit tests
• TestCafé for End-to-End tests
• Chromatic for visual regression testing
• GitHub Actions and Vercel for CI/CD pipelines
• Storybook for component documentation
• ESLint and Prettier for code style standardization
• Yarn for caching project dependencies
• CSpell for code spell checking