Initial scaffold: FastAPI backend + React frontend + Docker Compose

- Backend: FastAPI with SQLite, clip CRUD, health check
- Frontend: React + Vite + TypeScript + Tailwind, dark theme
- Components: Generator, Gallery, Player
- Docker: Compose setup for backend + frontend
- Architecture docs in Palace KB

.gitignore

@@ -0,0 +1,33 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+.venv/
+
+# Node
+node_modules/
+dist/
+*.log
+
+# Data
+data/clips/*.mp3
+data/*.db
+*.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.local

README.md

@@ -0,0 +1,49 @@
+# Lyria Studio
+
+A webapp for generating, playing, and storing music clips using Google's Lyria music generation models.
+
+Built by Kagamine Rin & Ryan.
+
+## Quick Start
+
+```bash
+# Backend
+cd backend
+python -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+cd src
+uvicorn main:app --reload
+
+# Frontend (new terminal)
+cd frontend
+npm install
+npm run dev
+```
+
+## Architecture
+
+- **Backend**: FastAPI (Python) — async Lyria API client, SQLite metadata, file storage
+- **Frontend**: React + Vite + TypeScript + Tailwind — dark theme, audio player
+- **Storage**: SQLite for clip metadata, local filesystem for MP3 files
+
+## API
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/health` | GET | Health check |
+| `/api/generate` | POST | Start clip generation |
+| `/api/clips` | GET | List all clips |
+| `/api/clips/{id}` | GET | Get clip metadata |
+| `/api/clips/{id}/audio` | GET | Stream MP3 |
+| `/api/clips/{id}` | DELETE | Delete clip |
+
+## Models
+
+- **v0.1**: Lyria 3 Clip Preview (30s, REST)
+- **v0.2**: Lyria 3 Pro (structure-aware, ~3min)
+- **v0.3**: Lyria RealTime (WebSocket streaming)
+
+## License
+
+MIT — Hardcore will never die.

backend/Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY src/ ./src/
+
+WORKDIR /app/src
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.115.0
+uvicorn[standard]==0.32.0
+httpx==0.27.0
+aiosqlite==0.20.0
+pydantic==2.9.0
+python-multipart==0.0.12

backend/src/database.py

@@ -0,0 +1,80 @@
+import aiosqlite
+import uuid
+from datetime import datetime
+from pathlib import Path
+
+DB_PATH = Path(__file__).parent.parent / "data" / "lyria.db"
+DB_PATH.parent.mkdir(parents=True, exist_ok=True)
+
+INIT_SQL = """
+CREATE TABLE IF NOT EXISTS clips (
+    id TEXT PRIMARY KEY,
+    prompt TEXT NOT NULL,
+    model TEXT NOT NULL,
+    duration_seconds INTEGER,
+    filename TEXT NOT NULL,
+    file_size_bytes INTEGER,
+    status TEXT DEFAULT 'generating',
+    error_message TEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_clips_created ON clips(created_at DESC);
+"""
+
+async def init_db():
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.executescript(INIT_SQL)
+        await db.commit()
+
+async def create_clip(prompt: str, model: str, duration: int) -> str:
+    clip_id = str(uuid.uuid4())
+    filename = f"{clip_id}.mp3"
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.execute(
+            "INSERT INTO clips (id, prompt, model, duration_seconds, filename, status) VALUES (?, ?, ?, ?, ?, ?)",
+            (clip_id, prompt, model, duration, filename, "generating")
+        )
+        await db.commit()
+    return clip_id
+
+async def update_clip_status(clip_id: str, status: str, file_size: int = None, error: str = None):
+    async with aiosqlite.connect(DB_PATH) as db:
+        if file_size is not None:
+            await db.execute(
+                "UPDATE clips SET status = ?, file_size_bytes = ? WHERE id = ?",
+                (status, file_size, clip_id)
+            )
+        elif error is not None:
+            await db.execute(
+                "UPDATE clips SET status = ?, error_message = ? WHERE id = ?",
+                (status, error, clip_id)
+            )
+        else:
+            await db.execute(
+                "UPDATE clips SET status = ? WHERE id = ?",
+                (status, clip_id)
+            )
+        await db.commit()
+
+async def get_clips(limit: int = 50, offset: int = 0):
+    async with aiosqlite.connect(DB_PATH) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute(
+            "SELECT * FROM clips ORDER BY created_at DESC LIMIT ? OFFSET ?",
+            (limit, offset)
+        ) as cursor:
+            rows = await cursor.fetchall()
+            return [dict(row) for row in rows]
+
+async def get_clip(clip_id: str):
+    async with aiosqlite.connect(DB_PATH) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM clips WHERE id = ?", (clip_id,)) as cursor:
+            row = await cursor.fetchone()
+            return dict(row) if row else None
+
+async def delete_clip(clip_id: str):
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.execute("DELETE FROM clips WHERE id = ?", (clip_id,))
+        await db.commit()

backend/src/main.py

@@ -0,0 +1,76 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, StreamingResponse
+from pathlib import Path
+import os
+
+from models import GenerateRequest, GenerateResponse, ClipList
+from database import init_db, create_clip, get_clips, get_clip, delete_clip, update_clip_status
+
+app = FastAPI(title="Lyria Studio", version="0.1.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+CLIPS_DIR = Path(__file__).parent.parent / "data" / "clips"
+CLIPS_DIR.mkdir(parents=True, exist_ok=True)
+
+@app.on_event("startup")
+async def startup():
+    await init_db()
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok", "version": "0.1.0"}
+
+@app.post("/api/generate", response_model=GenerateResponse)
+async def generate(request: GenerateRequest):
+    clip_id = await create_clip(request.prompt, request.model, request.duration)
+    # TODO: T-003 — integrate Lyria API client
+    return GenerateResponse(
+        id=clip_id,
+        status="generating",
+        message="Clip generation started. Check back for status."
+    )
+
+@app.get("/api/clips", response_model=ClipList)
+async def list_clips(limit: int = 50, offset: int = 0):
+    clips = await get_clips(limit, offset)
+    return ClipList(clips=clips, total=len(clips))
+
+@app.get("/api/clips/{clip_id}")
+async def get_clip_by_id(clip_id: str):
+    clip = await get_clip(clip_id)
+    if not clip:
+        raise HTTPException(status_code=404, detail="Clip not found")
+    return clip
+
+@app.get("/api/clips/{clip_id}/audio")
+async def stream_audio(clip_id: str):
+    clip = await get_clip(clip_id)
+    if not clip:
+        raise HTTPException(status_code=404, detail="Clip not found")
+    file_path = CLIPS_DIR / clip["filename"]
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="Audio file not found")
+    return FileResponse(file_path, media_type="audio/mpeg", filename=clip["filename"])
+
+@app.delete("/api/clips/{clip_id}")
+async def remove_clip(clip_id: str):
+    clip = await get_clip(clip_id)
+    if not clip:
+        raise HTTPException(status_code=404, detail="Clip not found")
+    file_path = CLIPS_DIR / clip["filename"]
+    if file_path.exists():
+        file_path.unlink()
+    await delete_clip(clip_id)
+    return {"deleted": True}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/src/models.py

@@ -0,0 +1,28 @@
+from pydantic import BaseModel
+from datetime import datetime
+from typing import Optional
+
+class GenerateRequest(BaseModel):
+    prompt: str
+    model: str = "lyria-3-clip-preview"
+    duration: int = 30
+
+class GenerateResponse(BaseModel):
+    id: str
+    status: str
+    message: str
+
+class Clip(BaseModel):
+    id: str
+    prompt: str
+    model: str
+    duration_seconds: int
+    filename: str
+    file_size_bytes: Optional[int] = None
+    status: str
+    error_message: Optional[str] = None
+    created_at: datetime
+
+class ClipList(BaseModel):
+    clips: list[Clip]
+    total: int

docker-compose.yml

@@ -0,0 +1,24 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./data:/app/data
+    environment:
+      - LYRIA_API_KEY=${LYRIA_API_KEY}
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+    restart: unless-stopped

frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 3000

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <title>Lyria Studio</title>
+  </head>
+  <body class="bg-lyria-dark text-lyria-text">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 3000;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "lyria-studio-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react'
+import Generator from './components/Generator'
+import Gallery from './components/Gallery'
+import Player from './components/Player'
+
+interface Clip {
+  id: string
+  prompt: string
+  model: string
+  duration_seconds: number
+  status: string
+  created_at: string
+}
+
+function App() {
+  const [clips, setClips] = useState<Clip[]>([])
+  const [currentClip, setCurrentClip] = useState<Clip | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  const fetchClips = async () => {
+    try {
+      const res = await fetch('/api/clips')
+      const data = await res.json()
+      setClips(data.clips)
+    } catch (err) {
+      console.error('Failed to fetch clips:', err)
+    }
+  }
+
+  useEffect(() => {
+    fetchClips()
+    const interval = setInterval(fetchClips, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const handlePlay = (clip: Clip) => {
+    setCurrentClip(clip)
+    setIsPlaying(true)
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await fetch(`/api/clips/${id}`, { method: 'DELETE' })
+      if (currentClip?.id === id) {
+        setCurrentClip(null)
+        setIsPlaying(false)
+      }
+      fetchClips()
+    } catch (err) {
+      console.error('Failed to delete clip:', err)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-lyria-dark">
+      <header className="border-b border-white/10 px-6 py-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
+            L
+          </div>
+          <h1 className="text-xl font-bold text-white">Lyria Studio</h1>
+          <span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
+        </div>
+      </header>
+
+      <main className="max-w-6xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-1">
+          <Generator onGenerate={fetchClips} />
+        </div>
+        <div className="lg:col-span-2 space-y-4">
+          <Gallery
+            clips={clips}
+            onPlay={handlePlay}
+            onDelete={handleDelete}
+            currentClipId={currentClip?.id}
+          />
+        </div>
+      </main>
+
+      {currentClip && (
+        <Player
+          clip={currentClip}
+          isPlaying={isPlaying}
+          onTogglePlay={() => setIsPlaying(!isPlaying)}
+          onClose={() => {
+            setCurrentClip(null)
+            setIsPlaying(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default App

frontend/src/components/Gallery.tsx

@@ -0,0 +1,90 @@
+interface Clip {
+  id: string
+  prompt: string
+  model: string
+  duration_seconds: number
+  status: string
+  created_at: string
+}
+
+interface Props {
+  clips: Clip[]
+  onPlay: (clip: Clip) => void
+  onDelete: (id: string) => void
+  currentClipId?: string
+}
+
+export default function Gallery({ clips, onPlay, onDelete, currentClipId }: Props) {
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  if (clips.length === 0) {
+    return (
+      <div className="bg-lyria-panel rounded-lg p-8 border border-white/5 text-center">
+        <p className="text-lyria-muted text-sm">No clips yet. Generate your first one!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-lyria-panel rounded-lg border border-white/5">
+      <div className="px-5 py-4 border-b border-white/5">
+        <h2 className="text-sm font-semibold text-white uppercase tracking-wider">
+          Gallery ({clips.length})
+        </h2>
+      </div>
+
+      <div className="divide-y divide-white/5">
+        {clips.map((clip) => (
+          <div
+            key={clip.id}
+            className={`px-5 py-4 flex items-center gap-4 hover:bg-white/5 transition-colors ${
+              currentClipId === clip.id ? 'bg-white/5' : ''
+            }`}
+          >
+            <button
+              onClick={() => onPlay(clip)}
+              className="w-10 h-10 rounded-full bg-lyria-accent/20 flex items-center justify-center text-lyria-accent hover:bg-lyria-accent/30 transition-colors shrink-0"
+            >
+              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </button>
+
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-white truncate">{clip.prompt}</p>
+              <div className="flex items-center gap-2 mt-1">
+                <span className={`text-xs px-1.5 py-0.5 rounded ${
+                  clip.status === 'ready'
+                    ? 'bg-green-500/20 text-green-400'
+                    : clip.status === 'generating'
+                    ? 'bg-yellow-500/20 text-yellow-400'
+                    : 'bg-red-500/20 text-red-400'
+                }`}>
+                  {clip.status}
+                </span>
+                <span className="text-xs text-lyria-muted">{clip.duration_seconds}s</span>
+                <span className="text-xs text-lyria-muted">{formatDate(clip.created_at)}</span>
+              </div>
+            </div>
+
+            <button
+              onClick={() => onDelete(clip.id)}
+              className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/components/Generator.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+
+interface Props {
+  onGenerate: () => void
+}
+
+export default function Generator({ onGenerate }: Props) {
+  const [prompt, setPrompt] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!prompt.trim()) return
+
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: prompt.trim(),
+          model: 'lyria-3-clip-preview',
+          duration: 30
+        })
+      })
+
+      if (!res.ok) throw new Error('Generation failed')
+
+      setPrompt('')
+      onGenerate()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-lyria-panel rounded-lg p-5 border border-white/5">
+      <h2 className="text-sm font-semibold text-white mb-4 uppercase tracking-wider">
+        Generate
+      </h2>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs text-lyria-muted mb-1.5">
+            Prompt
+          </label>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Dark gabber kick at 180 BPM with distorted synth lead..."
+            className="w-full h-24 bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white placeholder:text-lyria-muted/50 focus:outline-none focus:border-lyria-accent resize-none"
+          />
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-lyria-muted">
+          <span>Model: lyria-3-clip-preview</span>
+          <span>30s</span>
+        </div>
+
+        {error && (
+          <p className="text-xs text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isLoading || !prompt.trim()}
+          className="w-full py-2.5 bg-lyria-accent text-white text-sm font-medium rounded-md hover:bg-lyria-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          {isLoading ? 'Generating...' : 'Generate'}
+        </button>
+      </form>
+    </div>
+  )
+}

frontend/src/components/Player.tsx

@@ -0,0 +1,70 @@
+import { useRef, useEffect } from 'react'
+
+interface Clip {
+  id: string
+  prompt: string
+  duration_seconds: number
+}
+
+interface Props {
+  clip: Clip
+  isPlaying: boolean
+  onTogglePlay: () => void
+  onClose: () => void
+}
+
+export default function Player({ clip, isPlaying, onTogglePlay, onClose }: Props) {
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  useEffect(() => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.play()
+      } else {
+        audioRef.current.pause()
+      }
+    }
+  }, [isPlaying, clip.id])
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-6 py-3">
+      <div className="max-w-6xl mx-auto flex items-center gap-4">
+        <button
+          onClick={onTogglePlay}
+          className="w-10 h-10 rounded-full bg-lyria-accent flex items-center justify-center text-white hover:bg-lyria-accent/90 transition-colors shrink-0"
+        >
+          {isPlaying ? (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          )}
+        </button>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-white truncate">{clip.prompt}</p>
+          <p className="text-xs text-lyria-muted">{clip.duration_seconds}s</p>
+        </div>
+
+        <audio
+          ref={audioRef}
+          src={`/api/clips/${clip.id}/audio`}
+          onEnded={() => onTogglePlay()}
+          className="hidden"
+        />
+
+        <button
+          onClick={onClose}
+          className="text-lyria-muted hover:text-white transition-colors shrink-0"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/index.css

@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: #0a0a0f;
+  color: #e0e0e0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0a0a0f;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2a2a3a;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3a4a;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'lyria-dark': '#0a0a0f',
+        'lyria-panel': '#12121a',
+        'lyria-accent': '#ff6b35',
+        'lyria-text': '#e0e0e0',
+        'lyria-muted': '#6b6b7b',
+      }
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      }
+    }
+  }
+})