contributing.md

File & Folder Naming

• All file names and folders should be in camelCase

Code Structure

• New pages should have their own folder under src/pages/
  e.x: I am creating a homepage. The .tsx file would then be located here: src/pages/home/home.tsx.
• Components should go under components folder.

Quotes

• Use single quotes for all quotes (JSX classNames, paths, etc, should be in double quotes)

• If a single quote is neccessary in a string.
  Context: console.log('Can't do this');

  Prefer template literals:
  console.log(`Can't do this`);
  Over double qoutes:
  console.log("Don't do this");

Use semicolons.

Packages

• Consult Frontend team before adding new packages.
  • This will help keep reduce unneccessary overhead for the repo.
• When installing a new package, check if there is a types package for it as well.

Functions

• Prefer named functions for anonymous callbacks
  Prefer:
  

setTimeout(
    function logUserEntry() {
        console.log('...')
    }
, 1000);

<br>
Over:
<br>

setTimeout(() => {
    console.log('...');
}, 1000);

This will help readers of the code faster and better understand what the function is doing.

### This does not apply when you need lexical `this` behaviour. In this case, use arrow functions.

• Prefer function declarations over expressions

Clean, Readable, and Maintainable!

• POLE: Principle of Least Exposure
  Each variable, function, etc. should have the least exposure as possible. Break up the code into blocks if variable will only be used in that block.
  
  Prefer:
  

for(...) {
    ...
    {
        let temp; // temporary variable which is only used in this block.
    }
    ...
}

Over:

for(...) {
    ...
    let temp; // temporary variable which can be accessed throughout the entire for-loop.
    ...
}

• Variable declarations
  • Prefer let and const over var.
  • Use const when a variable is not re-assigned.
• New Line at the end of a file
• Comments when neccessary.

Documenting Code

• TSDoc

Braces

• Spaces before opening curly brace ({) for functions and in CSS.
  Prefer: function name() {} over function(){}
• Conditional Rendering in JSX
  
  Prefer:
  

    {
        condition ? <><> : <><>
    }

Over: {condition ? <><> : <><>}

• Template literals, JSX classNames, etc.
  Prefer: className={ name } & console.log(`${ name }`) Over: className={name} & console.log(`${name}`)

Return statements in JSX

• For JSX return statements that take up more than one line (including return statement), please wrap the JSX in parentheses.
  Prefer:
  ` return (
  ...

);<br> Over: <br>return

...

; `

Spaces in JSX components

• Prefer <Component />
  
• Over <Component/>

Whitespace & Block Indentation

• Break up unrelated statements with whitespace.

Pull Requests

• Please include screen-shots or videos of the changes you made (from the website).