FrontEnd

Required libraries

• axios (1.3.4),
• react (^18.2.0),
• react-router-dom (^6.8.2),
• MUI (5.11.11)

Code styling

1. Using arrow functions for functional components;
2. Props destructurization:

const Component = ({prop1, props2, prop3, ...props}) => {...};

3. We use Prettier to automatically format the code

{
  "singleQuote": true,
  "semi": true
  "tabWidth": 2,
  "useTabs": true,
  "trailingComma": "all",
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "jsxSelfClosing": true,
  "spaceBeforeFunctionParen": false,
  "spaceBeforeBlockStatements": true,
  "spaceBeforeControlStatements": true,
  "spaceInfixOps": true,
  "bracketSpacing": true
}

4. Syntax

• Use soft tabs set to 2 spaces.
• Indent lines with tabs instead of spaces.
• Use single quotes.
• Use trailing commas wherever possible, including function parameters and calls.
• Print spaces between brackets in object literals.
• Exclude parentheses around a sole arrow function parameter.
• Using self-closing tag for JSX-elements with no children.
• Use semicolons.
• Set off operators with spaces.
• Use braces with all multi-line blocks.
• Place 1 space before the opening parenthesis in control statements (if, while etc.).
• Place no space before the argument list in function calls and declarations.

5. Style

• Use CSS Module

Related links:

• Design
• Miro board
• API