# Repository Installation and Setup

This guide discusses setting up the Polar Edge Analytics repository for local development.

## Prerequisites

This guide assumes you have the following already set up (TODO: add references on how to get these configured)

- Node.js installed; we recommend using [nvm](https://github.com/nvm-sh/nvm) (MacOS/Linux) or [fnm](https://github.com/Schniz/fnm) (Windows) to manage your Node.js version
- [pnpm](https://pnpm.io/installation) installed
- [Docker](https://docs.docker.com/get-started/get-docker/) installed

## Get Scouting

You will first need to clone the polar-edge repository.

Once cloned, in the repository root directory, run `pnpm install` to install dependencies across the entire repository. We recommend installing the `turbo` CLI globally to make running commands easier. This can be done by running `pnpm i -g turbo`.

Developing applications often requires the use of *environmental variables*. These are used to configure various secrets and environment-specific configuration (i.e., is this running on someone's laptop or is it the hosted version of the scouting site). In order to prevent API keys from being leaked on the internet, these are stored in a file that is only on your machine and not tracked by Git.

A file titled `.env.example` exists in the `apps/scouting` folder. This is a template you can use in creating your `.env.local`. To create your `.env.local`, do the following:

1. Create a copy of the `.env.example` file and rename the copy to `.env.local`
2. Create a new application in the [Discord Developer Portal](https://discord.com/developers/applications). After creating the app, go to the tab titled "OAuth2." Copy the client id value, and set DISCORD\_CLIENT\_ID to this value in your `.env.local`. Click the "Reset Secret" button in the Discord Developer portal to get the client secret, and do the same. You should NEVER share the secret value.
3. Still in the OAuth2 tab, add the following URL to the Redirects section: `<a href="http://localhost:3000/api/auth/callback/discord">http://localhost:3000/api/auth/callback/discord</a>`
4. Add your Discord username to the `.env.local` for ADMIN\_USERS. This value is shown in the bottom left corner of Discord

This should be all the setup required for everyday development of the scouting application. To get the development server running, first ensure you have Docker running. Running `pnpm dev:scouting` or `turbo dev --filter scouting` will launch the database, and start up the scouting app.

#### Recommended VSCode Extensions and Configuration

Our application used Tailwind and Biome, both of which have very helpful extensions for VSCode:

- [https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [https://biomejs.dev/reference/vscode/](https://biomejs.dev/reference/vscode/)

To configure VSCode settings for the workspace, create a folder called `.vscode` in the root of the repo. Within that, create a file called `settings.json` (this should not be tracked by Git, as settings are user-specific). Paste the following content:

```json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.action.useSortedKeys.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "tailwindCSS.experimental.configFile": {
    "packages/ui/src/styles/globals.css": [
      "packages/ui/src/**",
      "apps/scouting/src/**",
      "apps/basecamp-fe/src/**"
    ]
  }
}

```

This will enable formatting on save, and set the default formatter to Biome. This also points the TailwindCSS Intellisense extension to the correct configuration file.

### Get Basecamp(ing)

WIP, docs coming soon as this is a bit more complicated...