Create Meal Form in Frontend

.github/workflows/deploy-on-main-push.yaml

@@ -21,6 +21,8 @@ jobs:
 
       - name: Install Dependencies
         run: bun install
+        env:
+          NODE_ENV: production
 
       - name: Build Project
         run: bun run build -v

.github/workflows/deploy-to-staging.yaml

@@ -22,6 +22,8 @@ jobs:
 
       - name: Build Project
         run: bun run build -v
+        env:
+          NODE_ENV: production
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4

.github/workflows/test-on-pr.yaml

@@ -2,8 +2,13 @@ name: Run Integration Tests
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - staging
   pull_request:
+    branches:
+      - main
+      - staging
 
 jobs:
   integration-tests:

Dockerfile

@@ -6,4 +6,8 @@ COPY bun.lock .
 
 COPY package.json .
 
-RUN bun install --frozen-lockfile --ignore-scripts
+COPY packages/frontend/package.json frontend/package.json
+
+ENV NODE_ENV=development
+
+RUN bun install --ignore-scripts

docker-compose.yaml

@@ -35,7 +35,8 @@ services:
       - .:/app
       - api_node_modules:/app/node_modules
     pull_policy: build
-    command: ['bun', '--hot', 'run', './scripts/dev']
+    command: >
+      sh -c "bun run scripts/seed.ts && bun --hot run './scripts/dev'"
     extra_hosts:
       - 'db.localtest.me:host-gateway'
     environment:
@@ -47,16 +48,17 @@ services:
       - JWT_SECRET=supersecret
   frontend:
     build:
-      context: ./frontend
+      context: .
       dockerfile: Dockerfile
     volumes:
-      - ./frontend:/app
-      - frontend_node_modules:/app/node_modules
+      - .:/app
+      - frontend_node_modules:/app/packages/frontend/node_modules
     depends_on:
       - api
     ports:
       - '5173:5173'
-    command: ['bun', 'run', 'scripts/dev', '--host=0.0.0.0']
+    command: >
+      sh -c "cd /app/packages/frontend && bun run scripts/dev --host=0.0.0.0"
 
 volumes:
   db_data:

openapi.yaml

@@ -9,6 +9,25 @@ components:
       type: http
       scheme: bearer
       bearerFormat: JWT
+  responses:
+    BadRequestResponse:
+      description: Bad Request
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/BaseResponseModel"
+    UnauthorizedResponse:
+      description: Unauthorized
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/BaseResponseModel"
+    ForbiddenResponse:
+      description: Forbidden
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/BaseResponseModel"
   schemas:
     AuthRequestModel:
       type: object
@@ -141,32 +160,30 @@ paths:
               schema:
                 $ref: "#/components/schemas/LoginResponseModel"
         "400":
-          description: Invalid request
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/BaseResponseModel"
+          $ref: "#/components/responses/BadRequestResponse"
+        "401":
+          $ref: "#/components/responses/UnauthorizedResponse"
+        "403":
+          $ref: "#/components/responses/ForbiddenResponse"
   /meals:
     post:
+      security:
+        - JWTAuth: []
       requestBody:
         content:
           application/json:
             schema:
               $ref: "#/components/schemas/PostMealsRequestModel"
       responses:
-        "200":
+        "201":
           description: Meal posted successfully
           content:
             application/json:
               schema:
                 $ref: "#/components/schemas/PostMealsResponseModel"
         "400":
-          description: Invalid request
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/BaseResponseModel"
-  /refresh:
+          $ref: "#/components/responses/BadRequestResponse"
+  /refresh-token:
     post:
       requestBody:
         content:
@@ -181,11 +198,9 @@ paths:
               schema:
                 $ref: "#/components/schemas/RefreshResponseModel"
         "400":
-          description: Invalid request
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/BaseResponseModel"
+          $ref: "#/components/responses/BadRequestResponse"
+        "401":
+          $ref: "#/components/responses/UnauthorizedResponse"
   /register:
     post:
       requestBody:
@@ -194,14 +209,16 @@ paths:
             schema:
               $ref: "#/components/schemas/AuthRequestModel"
       responses:
-        "200":
+        "201":
           description: Registration successful
           content:
             application/json:
               schema:
                 $ref: "#/components/schemas/RegisterResponseModel"
         "400":
-          description: Invalid request
+          $ref: "#/components/responses/BadRequestResponse"
+        "409":
+          description: User already exists
           content:
             application/json:
               schema:

package.json

@@ -43,12 +43,20 @@
     "yargs": "^17.7.2"
   },
   "scripts": {
-    "build": "NODE_ENV=production bun run scripts/build.ts",
+    "build": "NODE_ENV=production bun run scripts/build",
     "deploy": "bun run scripts/deploy",
     "format": "bun run prettier --write .",
     "gen-spec": "bun run scripts/gen-spec-json.ts",
     "integration-tests": "bun run scripts/integration-tests.ts",
-    "postinstall": "bun run scripts/postinstall",
+    "postinstall": "NODE_ENV=development bun run scripts/postinstall",
     "push-schema": "DATABASE_URL=postgres://postgres:[email protected]:5432 bunx drizzle-kit push"
-  }
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "trustedDependencies": [
+    "esbuild",
+    "frontend",
+    "msw"
+  ]
 }

packages/frontend/lib.ts

@@ -0,0 +1,2 @@
+export { build } from './scripts/build';
+export { postinstall } from './scripts/postinstall';

frontend/orval.config.ts → packages/frontend/orval.config.ts

@@ -16,7 +16,7 @@ export const createConfigParams = (cfgOverrides?: CreateOrvalConfigParams): Conf
         target: './sdk.ts',
         schemas: './schemas',
       },
-      input: { target: path.resolve(__dirname, '../openapi.yaml') },
+      input: { target: path.resolve(__dirname, '../../openapi.yaml') },
     },
   };
 };

frontend/package.json → packages/frontend/package.json

@@ -3,10 +3,11 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "scripts/build.ts",
+  "main": "lib.ts",
   "scripts": {
     "build": "bun run scripts/build.ts",
-    "gen-client": "bun run scripts/gen-client.ts -- --reschema"
+    "gen-client": "bun run scripts/gen-client.ts -- --reschema",
+    "postinstall": "bun run scripts/postinstall.ts"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.7",

frontend/scripts/build.ts → packages/frontend/scripts/build.ts

@@ -5,8 +5,6 @@ import { hideBin } from 'yargs/helpers';
 import ViteConfig from '../vite.config.js';
 
 type BuildConfig = {
-  genClient?: boolean;
-  genClientBaseUrl?: string | null;
   outDir?: string;
   verbose?: boolean;
 };
@@ -15,20 +13,12 @@ export const build = async (configOverride: BuildConfig) => {
   console.log('Starting build process...');
 
   const defaults: Required<BuildConfig> = {
-    genClient: false,
-    genClientBaseUrl: null,
     outDir: 'dist',
     verbose: false,
   };
 
   const config = { ...defaults, ...configOverride };
-  const { genClient, genClientBaseUrl, outDir, verbose } = config;
-
-  if (genClient) {
-    if (verbose) console.log('Generating API client from OpenAPI schema...');
-    const { default: generateAPIClient } = await import('./gen-client.js');
-    await generateAPIClient({ baseUrl: genClientBaseUrl, verbose });
-  }
+  const { outDir, verbose } = config;
 
   try {
     await viteBuild({
@@ -78,6 +68,5 @@ if (import.meta.main) {
     .strict()
     .parseSync();
   const { outDir, verbose } = argv;
-  const genClient = argv['gen-client'];
-  await build({ genClient, outDir, verbose });
+  await build({ outDir, verbose });
 }

frontend/scripts/dev.ts → packages/frontend/scripts/dev.ts

@@ -1,26 +1,20 @@
-import generateAPIClient from './gen-client';
 import { createServer } from 'vite';
 import { createConfig } from '../vite.config';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 
 export type DevOptions = {
-  baseUrl?: string;
   host?: string;
   verbose?: boolean;
 };
 
 const defaults: Required<DevOptions> = {
-  baseUrl: 'http://localhost:3000/api',
   host: 'localhost',
   verbose: false,
 };
 
 export default async function dev(opts: DevOptions) {
-  const { baseUrl, host, verbose } = { ...defaults, ...opts };
-
-  if (verbose) console.log('Generating API client...');
-  await generateAPIClient({ baseUrl, verbose });
+  const { host, verbose } = { ...defaults, ...opts };
 
   if (verbose) console.log('Starting development server...');
   const server = await createServer(createConfig(host));
@@ -30,11 +24,6 @@ export default async function dev(opts: DevOptions) {
 
 if (import.meta.main) {
   const argv = yargs(hideBin(process.argv))
-    .option('base-url', {
-      type: 'string',
-      description: 'Base URL for the API',
-      default: defaults.baseUrl,
-    })
     .option('host', {
       type: 'string',
       description: 'Host to bind the development server to',

packages/frontend/scripts/postinstall.ts

@@ -0,0 +1,29 @@
+import yargs from 'yargs';
+import generateAPIClient from './gen-client';
+import { hideBin } from 'yargs/helpers';
+
+const defaults = {
+  verbose: false,
+};
+
+export const postinstall = async (overrides: { verbose?: boolean }) => {
+  const { verbose } = { ...defaults, ...overrides };
+  // generate client
+  console.log('Generating API client from OpenAPI schema...');
+
+  await generateAPIClient({
+    baseUrl: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : '/api',
+    verbose,
+  });
+};
+if (import.meta.main) {
+  const argv = await yargs(hideBin(process.argv))
+    .option('verbose', {
+      type: 'boolean',
+      description: 'Enable verbose output',
+      default: defaults.verbose,
+    })
+    .parse();
+
+  await postinstall(argv);
+}