This project was bootstrapped with Create React App.

Key Features

• Dynamic loading of application and code splitting
• Apollo Client for handling graphql endpoints
• apollo-cache-inmemory to manage application state
• Routing using react-router-dom
• Pre-rendering react-snap and SEO tag management react-helmet
• Theming for MUI
• Logger / analytics service
• In memory Localstorage fallback
• react-final-form to handle form submissions and reactive forms
• scourjs as immutability tool (optional)

https://auth0.com/docs/universal-login https://trellis.auth0.com/authorize?response_type=token&client_id=e8Sk7ToG3y7fJMpNN006iVhEU1W2yONN&redirect_uri=http://localhost:3000/auth/callback&state=STATE &connection=CONNECTION

Code Formatting

• following AirBnB styleguide
• linting is built into react-scripts CRA config source
• use prettier to automatically format code

Styles

We are using a hybrid approach to styling. The preferred system is CSS modules for its simplicity and statically compiled performance. However MUI forces us to use their style and theming system.

• use MUI css-in-js styling for theme and theme dependent styling
• use CSS modules for components that are independent and reusable. Can support using css variable overrides to customize it.
• share variables using css variables
• using some global styles for reset css and libraries like animate.css

Typescript

We are primarily using typescript to better handle type errors, and documentation and IDE assistance. We do not have to strictly type part of the codebase. Focus on defining types for the core logic of the application first.

• documentation
• Typescript deep dive and tips
• popular repos
• Type fest, collection of essential types

Documentation

• use http://documentation.js.org/ it supports Flow syntax

Tools:

We should strive to use minimalistic tools or write your own

• https://bundlephobia.com/result?p=dayjs@1.7.8
• https://github.com/zalmoxisus/redux-devtools-extension

Bundling / Codesplitting

https://facebook.github.io/create-react-app/docs/code-splitting https://reactjs.org/docs/code-splitting.html

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 run 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!

See the section about deployment for more information.

You can learn more in the Create React App documentation.