Guidelines for developing the user interface

As with everything, these are evergreen pragmatic rules and should be taken with a grain of salt!

User interface design

• Designing and implementing responsively (for mobile devices)
• Designing and implementing accessibly

Code guidelines

List of high level codebase guidelines to follow when working on the frontend (FE) portion of Climate Connect. This should document anything that's external to our already opinionated linting and formatting rules (e.g. https://prettier.io/docs/en/option-philosophy.html).

• Alphabetize props when possible
• Delineate relative and 3rd party imports with a new line or space
• Ensure all text is added to frontend/public/texts... so that translations can be added for German
• Prefer newlines for if and else blocks over same line
• When introducing new elements or components try to always use Material UI components where possible for consistency. This also allows you to easily use spacing, colors and more from our theme and the Material UI default theme where we didn't override it. Watch out when working with the docs, we are still on V4!
• Use Javascript ES6 functions wherever possible and applicable. This includes using map, reduce, ... instead of manually looping through arrays/objects, let/const instead of var, arrow functions for everything except a component's default function.

React-specific

• <> over React.Fragment
• Favor direct calls to hooks like useEffect over React.useEffect