CUB-194: scaffold Vite + React + TypeScript + Tailwind frontend
otto/review PR approved by Otto - frontend scaffold verified clean
ci/build Build + type-check + lint verified clean

- Initialize Vite project with React + TypeScript + Tailwind CSS
- Dark theme dashboard design (rig-dark palette, rig-accent colors)
- Minimal App with RemoteRig header + 'Dashboard coming soon' placeholder
- Directory structure: components, hooks, services, types, utils
- TypeScript types for Camera, CameraFeed, SystemHealth, StreamConfig
- Custom hooks: useCameraStatus, useSystemHealth (with mock data)
- API service layer with proxy config for /api → localhost:8080
- eslint, postcss, autoprefixer configured
- lucide-react icons integrated (Camera icon)
- .env.example, .gitignore, tsconfig basepaths configured
- Build + type-check + lint verified clean
This commit is contained in:
2026-05-19 07:31:23 -04:00
commit 5793617be3
23 changed files with 4335 additions and 0 deletions
+46
View File
@@ -0,0 +1,46 @@
import { Camera } from 'lucide-react'
function App() {
return (
<div className="min-h-screen bg-rig-dark-900">
{/* Header */}
<header className="border-b border-rig-dark-700 bg-rig-dark-800/50 backdrop-blur-sm">
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<div className="flex items-center gap-3">
<Camera className="h-7 w-7 text-rig-accent" />
<h1 className="text-xl font-bold tracking-tight text-rig-dark-50">
RemoteRig
</h1>
<span className="ml-2 rounded-full bg-rig-accent/10 px-2.5 py-0.5 text-xs font-medium text-rig-accent">
Dashboard
</span>
</div>
</div>
</header>
{/* Main Content */}
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-rig-dark-600 bg-rig-dark-800/30 py-24 text-center">
<Camera className="mb-4 h-12 w-12 text-rig-dark-500" />
<h2 className="text-lg font-semibold text-rig-dark-200">
Dashboard Coming Soon
</h2>
<p className="mt-2 max-w-sm text-sm text-rig-dark-400">
Camera monitoring and remote control interface under construction.
</p>
</div>
</main>
{/* Footer */}
<footer className="border-t border-rig-dark-700 bg-rig-dark-800/30">
<div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
<p className="text-center text-xs text-rig-dark-500">
RemoteRig v0.1.0 &mdash; Multi-Camera Remote Monitoring System
</p>
</div>
</footer>
</div>
)
}
export default App