chore: gh action + process improvements

.github/workflows/dev.yaml

@@ -0,0 +1,32 @@
+name: DEV Test, Lint & Format
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Check Backend
+        working-directory: ./backend
+        env:
+          BACKEND_ENV_FILE: ${{ secrets.BACKEND_ENV }}
+        run: |
+          echo $BACKEND_ENV_FILE | base64 --decode > .env
+          npm install
+          npm run lint
+          npm run format:check
+          npm test
+      - name: Check Frontend
+        working-directory: ./frontend
+        env:
+          FRONTEND_ENV_FILE: ${{ secrets.FRONTEND_ENV }}
+        run: |
+          echo $FRONTEND_ENV_FILE | base64 --decode > .env
+          npm install
+          npm run lint
+          npm run format:check

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -10,3 +10,17 @@ This application shell makes use of a
 You can find the backend layer in the `/backend` folder (and setup instructions [here](/backend/README.md)) and the frontend part of the application in the `/frontend` folder (and setup instructions [here](/frontend/README.md)).
 
 Please clone the repository and follow the instructions in the respective README files to get started.
+
+## Requirements
+
+- Node.js 14+ (it's recommended to use [nvm](https://github.com/nvm-sh/nvm), and if so, you can run `nvm use` to switch to the correct Node.JS version)
+
+## Setup / Local Development
+
+The backend can be run independently. The frontend depends on the backend.
+Each can be run by following the setup on their respective README files, or you can run both at the same time by following these steps:
+
+1. Clone the repository
+2. Install dependencies: `npm run install:all`
+3. Review the README files in the `/backend` and `/frontend` folders for instructions on how to setup the .env files (third point in the setup for both)
+4. Start the local server: `npm run start:local`

backend/package.json

@@ -12,6 +12,7 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "format": "prettier --config .prettierrc --write .",
+    "format:check": "prettier --config .prettierrc --check .",
     "test": "vitest run",
     "test:dev": "vitest dev",
     "test:cov": "vitest run --coverage"

frontend/.eslintrc.cjs

@@ -1,18 +1,11 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
-}
+};

frontend/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+coverage
+.eslintcache

frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": true
+}

frontend/package.json

@@ -7,6 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --config .prettierrc --write .",
+    "format:check": "prettier --config .prettierrc --check .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -20,8 +22,11 @@
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.2.5",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

frontend/src/App.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { CircleGraph } from "./circleGraph/CircleGraph";
-import "./App.css";
+import { useEffect, useState } from 'react';
+import { CircleGraph } from './circleGraph/CircleGraph';
+import './App.css';
 
 // --- Response type definition for the backend /campaign/:campaignId/progress endpoint ---
 
@@ -27,9 +27,7 @@ type Response = SuccessResponse | ErrorResponse;
  * and renders a circle progress bar UI.
  */
 function App() {
-  const [campaignData, setCampaignData] = useState<
-    SuccessResponse["payload"] | undefined
-  >();
+  const [campaignData, setCampaignData] = useState<SuccessResponse['payload'] | undefined>();
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | undefined>();
 
@@ -38,13 +36,11 @@ function App() {
     const fetchProgress = async () => {
       try {
         const response = await fetch(
-          `${import.meta.env.VITE_API_BASE_URL}/campaigns/${
-            import.meta.env.VITE_CAMPAIGN_ID
-          }/progress`,
+          `${import.meta.env.VITE_API_BASE_URL}/campaigns/${import.meta.env.VITE_CAMPAIGN_ID}/progress`,
           {
-            method: "GET",
+            method: 'GET',
             headers: {
-              "Content-Type": "application/json",
+              'Content-Type': 'application/json',
             },
           }
         );
@@ -56,7 +52,7 @@ function App() {
 
         setCampaignData(data.payload);
       } catch (error) {
-        setError((error as Error)?.message || "Failed to fetch info");
+        setError((error as Error)?.message || 'Failed to fetch info');
       } finally {
         setIsLoading(false);
       }
@@ -66,7 +62,7 @@ function App() {
   }, []);
 
   return (
-    <div className={`card${error ? " card-error" : ""}`}>
+    <div className={`card${error ? ' card-error' : ''}`}>
       {isLoading && <p className="loadingMessage">Loading information...</p>}
       {!isLoading && (
         <>
@@ -75,15 +71,9 @@ function App() {
             <>
               <div className="infoContainer">
                 <p className="totalRaisedLabel">Total Raised</p>
-                <p className="totalRaisedAmount">
-                  $
-                  {parseFloat(campaignData?.percent_to_goal?.toFixed(2) || "0")}
-                </p>
+                <p className="totalRaisedAmount">${campaignData?.gross_amount}</p>
               </div>
-              <CircleGraph
-                percentage={campaignData?.percent_to_goal}
-                size={140}
-              />
+              <CircleGraph percentage={campaignData?.percent_to_goal} size={140} />
             </>
           )}
         </>