CUB-116: scaffold React frontend with Vite, TypeScript, Tailwind

2026-05-06 14:02:57 -04:00
30 changed files with 1417 additions and 1150 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,44 +0,0 @@
-# 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,20 +1,14 @@
-# Multi-stage build for production
+# Build stage
 FROM node:22-alpine AS builder
-
 WORKDIR /app
-
 COPY package*.json ./
 RUN npm ci
-
 COPY . .
 RUN npm run build

-# Production stage — serve with nginx
+# Serve stage
 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: 2023,
+      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,6 @@
    <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,16 +1,23 @@
 server {
    listen 80;
-    listen  [::]:80;
-    server_name  localhost;
+    server_name _;

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

-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/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;
    }
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,36 +1,35 @@
 {
  "name": "extrudex-frontend",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
-    "@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"
+    "@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"
  },
  "devDependencies": {
-    "@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"
+    "@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"
  }
 }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,5 @@
+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,16 +1,27 @@
-import { Routes, Route } from 'react-router-dom'
-import ErrorBoundary from './components/ErrorBoundary'
-import HomePage from './pages/HomePage'
+import { useState, useEffect } from 'react'

 function App() {
+  const [health, setHealth] = useState<any>(null)
+
+  useEffect(() => {
+    fetch('/api/health')
+      .then(r => r.json())
+      .then(setHealth)
+      .catch(console.error)
+  }, [])
+
  return (
-    <ErrorBoundary>
-      <div className="min-h-screen bg-slate-900 text-slate-100">
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-        </Routes>
+    <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>
+        )}
+      </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
@@ -1,50 +0,0 @@
-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
@@ -1,21 +0,0 @@
-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
@@ -1,14 +0,0 @@
-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
@@ -1,11 +0,0 @@
-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,9 +2,7 @@

 body {
  margin: 0;
-  min-width: 320px;
  min-height: 100vh;
-  background-color: #0f172a;
-  color: #e2e8f0;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #0f172a; /* slate-900 */
+  color: #f8fafc; /* slate-50 */
 }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,18 +1,10 @@
 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.tsx'
-
-const queryClient = new QueryClient()
+import App from './App'

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
-    <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
@@ -1,36 +0,0 @@
-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
@@ -1,25 +0,0 @@
-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
@@ -1,6 +0,0 @@
-// 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,9 +1 @@
 /// <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,13 +5,7 @@ export default {
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {
-      colors: {
-        slate: {
-          850: '#1e293b',
-        },
-      },
-    },
+    extend: {},
  },
  plugins: [],
 }
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,38 +1,24 @@
 {
  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
-    "types": ["vite/client"],
    "skipLibCheck": true,
-
-    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
-
-    /* Linting */
+    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
-
-    /* Strict mode */
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
-    "noImplicitReturns": true
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
  },
  "include": ["src"]
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,7 +1,24 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "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"]
 }
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,24 +1,11 @@
 {
  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023"],
-    "module": "esnext",
-    "types": ["node"],
+    "composite": true,
    "skipLibCheck": true,
-
-    /* Bundler mode */
+    "module": "ESNext",
    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
+    "allowSyntheticDefaultImports": true,
+    "strict": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,15 +2,18 @@ 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,
-    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      }
+    }
  },
  build: {
    outDir: 'dist',
-    sourcemap: true,
-  },
+  }
 })