FrontEnd

Required libraries

• axios (1.3.4),
• react (^18.2.0),
• react-router-dom (^6.8.2),
• MUI (5.11.11)
• React-redux (^8.0.5)
• Moment (^2.29.4)
• Formik (^2.2.9)
• React Markdown (^8.0.7)
• React Fitty (^1.0.1)
• react-canvas-confetti (^1.4.0)
• swiper (^9.1.1)
• yup (^1.0.2)

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,
    "jsxSingleQuote": 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

Project structure

• Every components has it's own folder with files ComponentName.jsx, ComponentName.module.css, index.js (with export)
• Optionally there is a components folder with all internal components
• take out work with ajax and data formatting into a separate class file and name it /src/services/sw-service.js