This project was bootstrapped with Create React App.
- React Router
- Redux Thunk
In the project directory, you can run:
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.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
The code editor of choice for our team is Visual Studio Code. Contributors are free to use an editor of their choice as long as they can match the code quality requirements as detailed below.
Contributors are required to follow the below setup steps in order to ensure a consistent code quality throughout the codebase:
Editor Configuration (For VSCode)
VSCode specific editor configuration is in place to:
- Use the TypeScript SDK that's specified in the project rather than using the one that comes with VSCode. This ensures all contributes are working off of the same TypeScript version.
- Runs code formatting on save.
- Organize imports on save.
- Tab size: 2. This is also enforced by the code formatter.
- Line ruler: 120 characters. This is also enforced by the code formatter.
- Clicking files in the explorer directly opens them for editing rather than in preview mode.
- Breadcrumbs are enabled. Since many of our related code files (tsx, scss, models, actions, reducers etc.) are co-located, breadcrumbs offers a quick way to navigate to or open related files.
While you can override any of these with your own user specific VSCode setting, it is discouraged. If you feel a particular setting change really makes more sense over the pre-defined one, please discuss with the team about updating the project default.
To see ESLint warnings/errors right in the editor simply install the ESLint extension for VSCode. Additional configuration is included in the codebase (See
.vscode/settings.json) to enable this extension for TypeScript.
TypeScript Code Quality
TypeScript related code quality rules are enforced based on
tsconfig.json. These get triggered at build time, and since during development a
development mode build is always running TS related errors are readily highlighted on the build console as well as in the browser. VSCode will automatically highlight some of these issues (code style related) right in the editor.
If you want to see both code style related as well as type checking related errors in VSCode you can manually run
tsc in watch mode. Use
Ctrl/Cmd + Shift + B and run the build task named
tsc: watch - tsconfig.json. This will start off the
tsc Compiler in watch mode and all type checking as well as code styling related issues will start getting highlighted in Problems Panel (
Ctrl/Cmd + Shift + B) of VSCode.
Install Prettier VSCode extension. We use the Prettier defaults. Coupled with the editor config to
format on save each time you save a code file Prettier will automatically format the code (covers JS, TS, JSX, SCSS, HTML, JSON).