Compare commits

..

1 Commits

Author SHA1 Message Date
a54fcdd371 CUB-116: scaffold React frontend with Vite, TypeScript, Tailwind
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m26s
2026-05-06 14:02:57 -04:00
30 changed files with 1417 additions and 1150 deletions

44
frontend/.gitignore vendored
View File

@@ -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

View File

@@ -1,20 +1,14 @@
# Multi-stage build for production # Build stage
FROM node:22-alpine AS builder FROM node:22-alpine AS builder
WORKDIR /app WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm ci
COPY . . COPY . .
RUN npm run build RUN npm run build
# Production stage — serve with nginx # Serve stage
FROM nginx:alpine FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80 EXPOSE 80
CMD ["nginx", "-g", "daemon off;"] CMD ["nginx", "-g", "daemon off;"]

View File

@@ -10,7 +10,7 @@ export default tseslint.config(
extends: [js.configs.recommended, ...tseslint.configs.recommended], extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'], files: ['**/*.{ts,tsx}'],
languageOptions: { languageOptions: {
ecmaVersion: 2023, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
}, },
plugins: { plugins: {

View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0f172a" />
<title>Extrudex</title> <title>Extrudex</title>
</head> </head>
<body> <body>

View File

@@ -1,16 +1,23 @@
server { server {
listen 80; listen 80;
listen [::]:80; server_name _;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / { location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
} }
error_page 500 502 503 504 /50x.html; location /api/ {
location = /50x.html { proxy_pass http://backend:8080/api/;
root /usr/share/nginx/html; 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;
} }
} }

File diff suppressed because it is too large Load Diff

View File

@@ -1,36 +1,35 @@
{ {
"name": "extrudex-frontend", "name": "extrudex-frontend",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.1",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc && vite build",
"lint": "eslint .", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.2.4", "@tanstack/react-query": "^5.60.0",
"@tanstack/react-query": "^5.100.9", "axios": "^1.7.0",
"axios": "^1.16.0", "lucide-react": "^0.460.0",
"react": "^19.2.5", "react": "^19.0.0",
"react-dom": "^19.2.5", "react-dom": "^19.0.0",
"react-router-dom": "^7.15.0", "react-router-dom": "^7.0.0"
"tailwindcss": "^4.2.4",
"zustand": "^5.0.13"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^10.0.1", "@tailwindcss/postcss": "^4.2.4",
"@types/react": "^19.2.14", "@tailwindcss/vite": "^4.2.4",
"@types/react-dom": "^19.2.3", "@types/react": "^19.0.0",
"@types/react-router-dom": "^5.3.3", "@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^6.0.1", "@vitejs/plugin-react": "^4.3.0",
"eslint": "^10.2.1", "autoprefixer": "^10.4.20",
"eslint-plugin-react-hooks": "^7.1.1", "eslint": "^9.15.0",
"eslint-plugin-react-refresh": "^0.5.2", "eslint-plugin-react-hooks": "^5.0.0",
"globals": "^17.5.0", "eslint-plugin-react-refresh": "^0.4.14",
"typescript": "~6.0.2", "postcss": "^8.4.49",
"typescript-eslint": "^8.58.2", "tailwindcss": "^4.0.0",
"vite": "^8.0.10" "typescript": "~5.6.0",
"vite": "^6.0.0"
} }
} }

View File

@@ -0,0 +1,5 @@
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

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

View File

View File

@@ -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

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

View File

@@ -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,
})
}

View File

@@ -2,9 +2,7 @@
body { body {
margin: 0; margin: 0;
min-width: 320px;
min-height: 100vh; min-height: 100vh;
background-color: #0f172a; background-color: #0f172a; /* slate-900 */
color: #e2e8f0; color: #f8fafc; /* slate-50 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
} }

View File

@@ -1,18 +1,10 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { BrowserRouter } from 'react-router-dom'
import './index.css' import './index.css'
import App from './App.tsx' import App from './App'
const queryClient = new QueryClient()
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<QueryClientProvider client={queryClient}> <App />
<BrowserRouter>
<App />
</BrowserRouter>
</QueryClientProvider>
</StrictMode>, </StrictMode>,
) )

View File

View File

@@ -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>
)
}

View File

View File

@@ -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
}

View File

View File

@@ -1,6 +0,0 @@
// Shared TypeScript types for Extrudex frontend
// Placeholder — expand as API contracts stabilize
export interface HealthResponse {
status: string
}

View File

@@ -1,9 +1 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_BASE_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}

View File

@@ -5,13 +5,7 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
theme: { theme: {
extend: { extend: {},
colors: {
slate: {
850: '#1e293b',
},
},
},
}, },
plugins: [], plugins: [],
} }

View File

@@ -1,38 +1,24 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020",
"target": "ES2023", "useDefineForClassFields": true,
"lib": ["ES2023", "DOM", "DOM.Iterable"], "lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "isolatedModules": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"strict": true,
/* Linting */
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"baseUrl": ".",
/* Strict mode */ "paths": {
"strict": true, "@/*": ["src/*"]
"noImplicitAny": true, }
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noImplicitReturns": true
}, },
"include": ["src"] "include": ["src"]
} }

View File

@@ -1,7 +1,24 @@
{ {
"files": [], "compilerOptions": {
"references": [ "target": "ES2020",
{ "path": "./tsconfig.app.json" }, "useDefineForClassFields": true,
{ "path": "./tsconfig.node.json" } "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"]
} }

View File

@@ -1,24 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "composite": true,
"target": "es2023",
"lib": ["ES2023"],
"module": "esnext",
"types": ["node"],
"skipLibCheck": true, "skipLibCheck": true,
"module": "ESNext",
/* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowSyntheticDefaultImports": true,
"verbatimModuleSyntax": true, "strict": true
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

View File

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