Ftdr-contractor-portal NPM

This project was bootstrapped with Create React App.

Tech Stack

React
React Router
Redux
Redux Thunk
Axios
ProtobufJS
Capacitor

Available Scripts

In the project directory, you can run:

`npm start`

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.

`npm test`

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

`npm build`

Builds the app for production to the build folder. 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!

Editor Recommendation

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.

Code Quality

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.

Code Linting

This project was bootstrapped with Create React App which comes with built-in configuration for build-time linting of JavaScript and TypeScript code using ESLInt.

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.

Code Formatting

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).