prettier config

.github/workflows/app-ci.yml

@@ -3,7 +3,7 @@ run-name: ${{ github.actor }} is executing ${{ github.workflow }} on ${{ github.
 
 on:
   pull_request:
-    branches:    
+    branches:
       - main
     paths:
       - front/**
@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v3
       - name: Setup Node 18
         uses: actions/setup-node@v3
-        with: 
+        with:
           node-version: 18
       - name: Install dependencies
         uses: borales/actions-yarn@v4
@@ -30,9 +30,12 @@ jobs:
         uses: borales/actions-yarn@v4
         with:
           cmd: --cwd front lint # front/yarn lint
+      - name: Format code
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: --cwd front format # front/yarn format
       - name: Check tests
         uses: borales/actions-yarn@v4
         with:
           cmd: --cwd front test # front/yarn test
 
-

front/.eslintrc.json

@@ -1,17 +1,15 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "rules": {
-    "max-lines": ["error", { "max": 200, "skipBlankLines": true }],
-    "max-lines-per-function": [
-      "error",
-      { "max": 75, "skipBlankLines": true, "skipComments": true }
+    "extends": [
+        "next/core-web-vitals",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
     ],
-    "complexity": ["error", 6],
-    "prettier/prettier": ["error", {"tabWidth": 4}]
-  }
+    "rules": {
+        "max-lines": ["error", { "max": 200, "skipBlankLines": true }],
+        "max-lines-per-function": [
+            "error",
+            { "max": 75, "skipBlankLines": true, "skipComments": true }
+        ],
+        "complexity": ["error", 6]
+    }
 }

front/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "singleQuote": false
+}

front/.vscode/settings.json

@@ -1,7 +1,13 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.unusedImports": true
-  }
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+        "source.organizeImports": true,
+        "source.unusedImports": true
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

front/README.md

@@ -10,10 +10,11 @@ SST is a tool that makes it easy for us to build, run and deploy our NextJS web
 
 If you are developing the website without the external resources, e.g using dummy data and don't want to setup the AWS stack, use this option.
 
-- `yarn` to install dependencies.
-- `yarn local` to start the next web app locally.
+-   `yarn` to install dependencies.
+-   `yarn local` to start the next web app locally.
 
 If you click the localhost URL in the console, you should see the Next.js app running.
+
 ### 2. Set up local AWS credentials
 
 Having AWS credentials on your local machine is required to use SST.
@@ -23,22 +24,25 @@ You can see the [steps required to add AWS credentials here.](/docs/aws_setup.md
 If you completed these steps correctly, you should be able to run `aws sts get-caller-identity --profile <aws_iam_access_key_profile_name>` and see your AWS account ID.
 
 ### 3. Add database URI to .env
+
 It should look like this, with `?pgbouncer=true` at the end ([see issue](https://github.com/prisma/prisma/issues/11643#issuecomment-1034078942)):
 `DATABASE_URL=<your_database_uri>?pgbouncer=true`
+
 ### 4. Build Next.js app into Lambdas and deploy them locally
 
-- `yarn sst dev --profile <aws_iam_access_key_profile_name> --stage <your_name>-dev` to start the Live Lambda Development environment.
-  - This command does the following:
-    - Starts a local Lambda environment
-    - Builds the Next.js app into lambda functions, 
-    - and deploys them to the local Lambda environment
+-   `yarn sst dev --profile <aws_iam_access_key_profile_name> --stage <your_name>-dev` to start the Live Lambda Development environment.
+    -   This command does the following:
+        -   Starts a local Lambda environment
+        -   Builds the Next.js app into lambda functions,
+        -   and deploys them to the local Lambda environment
 
 ### 5. Bind Next.js app to local Lambda environment so that it can invoke AWS resources
 
-- `yarn dev --profile <aws_iam_access_key_profile_name> --stage <your_name>-dev` to bind the Next.js app to sst, which allows it to invoke AWS resources.
-  - This command does the following:
-    - Starts the Next.js app at localhost
-    - Binds the Next.js app to the local Lambda environment (therefore allowing it to use AWS resources)
+-   `yarn dev --profile <aws_iam_access_key_profile_name> --stage <your_name>-dev` to bind the Next.js app to sst, which allows it to invoke AWS resources.
+    -   This command does the following:
+        -   Starts the Next.js app at localhost
+        -   Binds the Next.js app to the local Lambda environment (therefore allowing it to use AWS resources)
 
 ## Deploying to staging
-- `yarn sst deploy --profile <aws_iam_access_key_profile_name> --stage staging`
+
+-   `yarn sst deploy --profile <aws_iam_access_key_profile_name> --stage staging`

front/package.json

@@ -1,52 +1,53 @@
 {
-  "name": "front",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "local": "next dev",
-    "dev": "sst bind next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "jest",
-    "generate": "yarn prisma generate --generator client_js",
-    "db-push": "npx prisma db push"
-  },
-  "prisma": {
-    "schema": "../prisma/schema.prisma"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "@prisma/client": "5.1.1",
-    "@types/node": "20.4.8",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.13",
-    "next": "13.4.13",
-    "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "server-only": "^0.0.1",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.0.1",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.3",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "aws-cdk-lib": "2.84.0",
-    "constructs": "10.1.156",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "prettier": "^3.0.1",
-    "prisma": "^5.1.1",
-    "sst": "^2.23.6"
-  }
+    "name": "front",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "local": "next dev",
+        "dev": "sst bind next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "test": "jest",
+        "generate": "yarn prisma generate --generator client_js",
+        "db-push": "npx prisma db push",
+        "format": "prettier --write ."
+    },
+    "prisma": {
+        "schema": "../prisma/schema.prisma"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "@prisma/client": "5.1.1",
+        "@types/node": "20.4.8",
+        "@types/react": "18.2.18",
+        "@types/react-dom": "18.2.7",
+        "autoprefixer": "10.4.14",
+        "eslint": "8.46.0",
+        "eslint-config-next": "13.4.13",
+        "next": "13.4.13",
+        "postcss": "8.4.27",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "server-only": "^0.0.1",
+        "tailwindcss": "3.3.3",
+        "typescript": "5.1.6"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^6.0.1",
+        "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.3",
+        "@typescript-eslint/eslint-plugin": "^6.3.0",
+        "aws-cdk-lib": "2.84.0",
+        "constructs": "10.1.156",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.6.2",
+        "jest-environment-jsdom": "^29.6.2",
+        "prettier": "^3.0.1",
+        "prisma": "^5.1.1",
+        "sst": "^2.23.6"
+    }
 }

front/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

front/src/app/globals.css

@@ -3,25 +3,25 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+    :root {
+        --foreground-rgb: 255, 255, 255;
+        --background-start-rgb: 0, 0, 0;
+        --background-end-rgb: 0, 0, 0;
+    }
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+            to bottom,
+            transparent,
+            rgb(var(--background-end-rgb))
+        )
+        rgb(var(--background-start-rgb));
 }

front/sst.config.ts

@@ -2,19 +2,19 @@ import { SSTConfig } from "sst";
 import { NextjsSite } from "sst/constructs";
 
 export default {
-  config(_input) {
-    return {
-      name: "front",
-      region: "eu-west-2",
-    };
-  },
-  stacks(app) {
-    app.stack(function Site({ stack }) {
-      const site = new NextjsSite(stack, "site");
+    config(_input) {
+        return {
+            name: "front",
+            region: "eu-west-2",
+        };
+    },
+    stacks(app) {
+        app.stack(function Site({ stack }) {
+            const site = new NextjsSite(stack, "site");
 
-      stack.addOutputs({
-        SiteUrl: site.url,
-      });
-    });
-  },
+            stack.addOutputs({
+                SiteUrl: site.url,
+            });
+        });
+    },
 } satisfies SSTConfig;

front/tailwind.config.ts

@@ -20,7 +20,7 @@ const config: Config = {
                 "theodo-light-blue": "#6CB4E6",
                 "theodo-turquoise": "#009DAC",
                 "theodo-blue": "#2D7FAE",
-            }
+            },
         },
     },
     plugins: [],

front/tsconfig.json

@@ -1,29 +1,29 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noUncheckedIndexedAccess": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
 }