micronomicon/frontend

Micronomicon — Frontend

React 19 + Vite + TypeScript + shadcn/ui. See the root README for full project docs.

Dev

npm install
npm run dev   # http://localhost:5173 — proxies /api to localhost:8080

Build

npm run build   # output → dist/ (copied into Docker image)

Structure

src/
  App.tsx                       ← routes
  routes/
    DashboardView.tsx            ← page table
    EditorView.tsx               ← split-pane editor
    GraphView.tsx                ← React Flow graph
  components/
    dashboard/StatusBadge.tsx
    editor/
      EditorPane.tsx             ← CodeMirror 6
      PreviewPane.tsx            ← micron output (ScrollArea)
      ToolBar.tsx
    shared/
      AppShell.tsx               ← TooltipProvider + Toaster wrapper
      NavBar.tsx
    ui/                          ← shadcn components (auto-generated)
  lib/
    utils.ts                     ← cn() utility
  stores/
    editorStore.ts               ← Zustand: markdown, micron, dirty state
    pagesStore.ts                ← Zustand: pages list, fetch/delete
  hooks/
    useConversion.ts             ← debounced POST /api/convert
    useGraph.ts                  ← GET /api/graph
    useUnsavedGuard.ts           ← beforeunload + dirty guard