CUB-116: Scaffold React frontend — Vite, TS, Tailwind

2026-05-06 10:09:35 -04:00
30 changed files with 1111 additions and 1378 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,14 +1,20 @@
-# Build stage
+# Multi-stage build for production
 FROM node:22-alpine AS builder
+
 WORKDIR /app
+
 COPY package*.json ./
 RUN npm ci
+
 COPY . .
 RUN npm run build

-# Serve stage
+# Production stage — serve with nginx
 FROM nginx:alpine
+
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
 EXPOSE 80
+
 CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -10,7 +10,7 @@ export default tseslint.config(
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2023,
      globals: globals.browser,
    },
    plugins: {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0f172a" />
    <title>Extrudex</title>
  </head>
  <body>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -1,23 +1,16 @@
 server {
-    listen 80;
-    server_name _;
-
-    root /usr/share/nginx/html;
-    index index.html;
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;

    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
        try_files $uri $uri/ /index.html;
    }

-    location /api/ {
-        proxy_pass http://backend:8080/api/;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
    }
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,35 +1,36 @@
 {
  "name": "extrudex-frontend",
  "private": true,
-  "version": "0.0.1",
+  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
-    "@tanstack/react-query": "^5.60.0",
-    "axios": "^1.7.0",
-    "lucide-react": "^0.460.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.0"
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-query": "^5.100.9",
+    "axios": "^1.16.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.15.0",
+    "tailwindcss": "^4.2.4",
+    "zustand": "^5.0.13"
  },
  "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
-    "@tailwindcss/vite": "^4.2.4",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^4.0.0",
-    "typescript": "~5.6.0",
-    "vite": "^6.0.0"
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
  }
 }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,27 +1,16 @@
-import { useState, useEffect } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import ErrorBoundary from './components/ErrorBoundary'
+import HomePage from './pages/HomePage'

 function App() {
-  const [health, setHealth] = useState<any>(null)
-
-  useEffect(() => {
-    fetch('/api/health')
-      .then(r => r.json())
-      .then(setHealth)
-      .catch(console.error)
-  }, [])
-
  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="p-6 rounded-lg bg-slate-800 shadow-xl max-w-md w-full">
-        <h1 className="text-2xl font-bold mb-4 text-emerald-400">Extrudex</h1>
-        <p className="text-slate-300 mb-4">React frontend scaffold</p>
-        {health && (
-          <pre className="text-xs bg-slate-900 p-3 rounded overflow-auto">
-            {JSON.stringify(health, null, 2)}
-          </pre>
-        )}
+    <ErrorBoundary>
+      <div className="min-h-screen bg-slate-900 text-slate-100">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+        </Routes>
      </div>
-    </div>
+    </ErrorBoundary>
  )
 }

--- a/frontend/src/components/.gitkeep
+++ b/frontend/src/components/.gitkeep
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,50 @@
+import { Component, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    // eslint-disable-next-line no-console
+    console.error('ErrorBoundary caught:', error, info)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-screen items-center justify-center p-4">
+          <div className="rounded-xl border border-red-500/30 bg-red-950/40 p-6 text-center shadow-lg backdrop-blur-sm">
+            <h2 className="mb-2 text-xl font-semibold text-red-400">Something went wrong</h2>
+            <p className="mb-4 text-sm text-red-300">
+              {this.state.error?.message || 'An unexpected error occurred.'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
+            >
+              Reload Page
+            </button>
+          </div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
--- a/frontend/src/components/ErrorState.tsx
+++ b/frontend/src/components/ErrorState.tsx
@@ -0,0 +1,21 @@
+export default function ErrorState({
+  message = 'Something went wrong.',
+  onRetry,
+}: {
+  message?: string
+  onRetry?: () => void
+}) {
+  return (
+    <div className="flex min-h-[120px] flex-col items-center justify-center gap-3 rounded-xl border border-red-500/20 bg-red-950/30 p-6 text-center">
+      <p className="text-sm text-red-300">{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/components/LoadingSpinner.tsx
+++ b/frontend/src/components/LoadingSpinner.tsx
@@ -0,0 +1,14 @@
+export default function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
+  const sizeClass =
+    size === 'sm' ? 'h-4 w-4 border-2' : size === 'lg' ? 'h-10 w-10 border-4' : 'h-6 w-6 border-2'
+
+  return (
+    <div className="flex items-center justify-center p-4">
+      <div
+        className={`${sizeClass} animate-spin rounded-full border-slate-600 border-t-sky-400`}
+        role="status"
+        aria-label="Loading"
+      />
+    </div>
+  )
+}
--- a/frontend/src/hooks/.gitkeep
+++ b/frontend/src/hooks/.gitkeep
--- a/frontend/src/hooks/useHealth.ts
+++ b/frontend/src/hooks/useHealth.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { healthCheck } from '../services/api'
+
+export function useHealth() {
+  return useQuery({
+    queryKey: ['health'],
+    queryFn: healthCheck,
+    retry: 2,
+    refetchInterval: 30000,
+  })
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,7 +2,9 @@

 body {
  margin: 0;
+  min-width: 320px;
  min-height: 100vh;
-  background-color: #0f172a; /* slate-900 */
-  color: #f8fafc; /* slate-50 */
+  background-color: #0f172a;
+  color: #e2e8f0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,18 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
 import './index.css'
-import App from './App'
+import App from './App.tsx'
+
+const queryClient = new QueryClient()

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
  </StrictMode>,
 )
--- a/frontend/src/pages/.gitkeep
+++ b/frontend/src/pages/.gitkeep
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -0,0 +1,36 @@
+import LoadingSpinner from '../components/LoadingSpinner'
+import ErrorState from '../components/ErrorState'
+import { useHealth } from '../hooks/useHealth'
+
+export default function HomePage() {
+  const { data, isLoading, isError, refetch } = useHealth()
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-6 p-6">
+      <h1 className="text-3xl font-bold tracking-tight text-sky-400">Extrudex</h1>
+      <p className="text-slate-400">Filament inventory &amp; print tracking</p>
+
+      <div className="w-full max-w-md rounded-xl border border-slate-700 bg-slate-800/60 p-6 shadow-lg backdrop-blur-sm">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400">
+          Backend Health
+        </h2>
+
+        {isLoading && <LoadingSpinner />}
+
+        {isError && (
+          <ErrorState
+            message="Backend is unreachable."
+            onRetry={() => refetch()}
+          />
+        )}
+
+        {data && (
+          <div className="flex items-center gap-2 text-emerald-400">
+            <span className="h-2 w-2 rounded-full bg-emerald-400" />
+            <span className="text-sm font-medium">{data.status || 'ok'}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/services/.gitkeep
+++ b/frontend/src/services/.gitkeep
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'
+
+export const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000,
+})
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // eslint-disable-next-line no-console
+    console.error('API error:', error)
+    return Promise.reject(error)
+  }
+)
+
+export async function healthCheck(): Promise<{ status: string }> {
+  const { data } = await api.get('/health')
+  return data
+}
--- a/frontend/src/types/.gitkeep
+++ b/frontend/src/types/.gitkeep
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,6 @@
+// Shared TypeScript types for Extrudex frontend
+// Placeholder — expand as API contracts stabilize
+
+export interface HealthResponse {
+  status: string
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,7 +5,13 @@ export default {
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        slate: {
+          850: '#1e293b',
+        },
+      },
+    },
  },
  plugins: [],
 }
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,24 +1,38 @@
 {
  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "module": "ESNext",
+    "types": ["vite/client"],
    "skipLibCheck": true,
+
+    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
-    "strict": true,
+
+    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
+
+    /* Strict mode */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true
  },
  "include": ["src"]
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,24 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,11 +1,24 @@
 {
  "compilerOptions": {
-    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
    "skipLibCheck": true,
-    "module": "ESNext",
+
+    /* Bundler mode */
    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,18 +2,15 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'

+// https://vite.dev/config/
 export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:8080',
-        changeOrigin: true,
-      }
-    }
+    host: true,
  },
  build: {
    outDir: 'dist',
-  }
+    sourcemap: true,
+  },
 })