Add Vue frontend and improve local developer UX

Author: gabriele.sisinna

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ permissions:
   contents: read
 
 jobs:
-  test:
+  backend:
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
@@ -28,3 +28,26 @@ jobs:
 
       - name: Run tests
         run: ./gradlew test --no-daemon
+
+  frontend:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.12.0'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Build frontend
+        working-directory: frontend
+        run: npm run build

README.md

@@ -48,6 +48,15 @@ Read [docs/architecture.md](./docs/architecture.md) for the design rationale and
 - enums
 - `@ConfigurationProperties`
 
+### Frontend
+
+- Vue 3 + TypeScript with Vite
+- Vuetify UI layer
+- Pinia state management
+- Vue Router navigation
+- backend integration with the student and course APIs
+- a UI workflow for learning, testing, and modifying the backend
+
 ## Start here
 
 Read these files in order:
@@ -112,6 +121,55 @@ Then run the app:
 
 The app starts on `http://localhost:8080`.
 
+## Run the frontend
+
+The frontend lives in [frontend/README.md](./frontend/README.md).
+
+For a one-command local preview of frontend + backend together, run:
+
+```bash
+./scripts/start-dev.sh
+```
+
+That will:
+
+- start MongoDB with Docker Compose
+- start the Spring Boot backend on `http://localhost:8080`
+- start the Vue frontend on `http://localhost:5173`
+
+Press `Ctrl+C` to stop the frontend and backend process. MongoDB stays available in Docker.
+
+Manual start is also available if you want separate terminals.
+
+If MongoDB is already running locally and you do not want Docker in the loop, use:
+
+```bash
+./scripts/start-local-dev.sh
+```
+
+That script:
+
+- assumes MongoDB is already reachable on `localhost:27017`
+- stops old repo-owned Java and Vite processes
+- starts the backend on `http://localhost:8080`
+- starts the frontend on `http://localhost:5173`
+
+To stop any previous repo dev processes without starting again, run:
+
+```bash
+./scripts/stop-dev.sh
+```
+
+Start the backend first, then run:
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend runs on `http://localhost:5173` and proxies API requests to the backend on `http://localhost:8080`.
+
 ## Production deployment
 
 This repo now includes a simple production deployment target using Docker Compose and MongoDB.

frontend/.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

frontend/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

frontend/.gitignore

@@ -0,0 +1,42 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
+
+test-results/
+playwright-report/

frontend/.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}

frontend/README.md

@@ -0,0 +1,60 @@
+# Frontend
+
+This folder contains the dedicated frontend for the Java Spring learning repo.
+
+Stack:
+
+- Vue 3
+- TypeScript
+- Vite
+- Vuetify
+- Vue Router
+- Pinia
+
+## Purpose
+
+The frontend is built to make the backend easier to learn and modify:
+
+- dashboard for the repo overview
+- student screen for the public JSON endpoints
+- course screen for the secured MongoDB CRUD flow
+- learning screen that maps the UI back to the backend architecture
+
+## Run locally
+
+From the repo root, start MongoDB and the Spring Boot backend first:
+
+```bash
+docker compose up -d mongo
+./gradlew bootRun
+```
+
+Then start the frontend:
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend runs on `http://localhost:5173`.
+
+During development, Vite proxies these paths to the backend on `http://localhost:8080`:
+
+- `/api`
+- `/v3`
+- `/swagger-ui`
+- `/actuator`
+
+## Useful commands
+
+```bash
+npm run dev
+npm run build
+npm run type-check
+```
+
+## Notes
+
+- The course screen uses the default backend learning credentials: `student` / `password`
+- Swagger UI remains available through the backend at `/swagger-ui.html`

frontend/e2e/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": ["./**/*"]
+}

frontend/e2e/vue.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('h1')).toContainText('Explore Java objects')
+  await expect(page.getByRole('button', { name: 'Work on student endpoints' })).toBeVisible()
+})

frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />