docs-translator — Frontend

Web UI for docs-translator — a self-hosted document translation service that preserves layout. Built with Next.js 15 (App Router) + TypeScript + Tailwind + shadcn-style UI.

Backend required. This app is a client for the docs-translator FastAPI backend. See the backend repo to run the API first.

Stack

• Next.js 15 (App Router, React 19, Turbopack-ready)
• TypeScript strict
• Tailwind CSS + custom theme tokens (light/dark)
• shadcn/ui-style primitives (Button, Card, Input, Dialog, Select, Progress, DropdownMenu, Avatar, Badge, Separator)
• TanStack Query v5 — caching + auto-polling for live job progress
• Axios — typed API client with JWT auth + refresh-token rotation
• Lucide icons, Sonner toasts, next-themes, react-dropzone

File structure

frontend/src/
├── app/                              # Next.js App Router
│   ├── (auth)/                       # Public auth group
│   │   ├── layout.tsx                # Centered card layout w/ glow
│   │   ├── login/page.tsx
│   │   └── register/page.tsx
│   ├── (dashboard)/                  # Protected group (sidebar + topbar)
│   │   ├── layout.tsx                # Auth guard + chrome
│   │   ├── dashboard/page.tsx        # Overview + stats + system health
│   │   ├── documents/page.tsx        # Upload + grid + translate dialog
│   │   └── jobs/
│   │       ├── page.tsx              # Jobs list (auto-polling)
│   │       └── [id]/page.tsx         # Job detail (progress + result)
│   ├── globals.css                   # Theme tokens, gradients, glass
│   ├── layout.tsx                    # Root (fonts, Providers)
│   ├── page.tsx                      # Landing
│   └── providers.tsx                 # Theme + Query + Auth + Toaster
├── components/
│   ├── ui/                           # Primitives (Button, Card, …)
│   ├── layout/                       # Logo, Sidebar, Topbar, UserMenu, ThemeToggle
│   ├── auth/AuthForm.tsx
│   ├── documents/                    # FileUploader, FileTypeIcon, DocumentCard
│   └── translation/                  # StatusBadge, JobCard, NewJobDialog
├── lib/
│   ├── api.ts                        # Axios client + auth interceptor
│   ├── types.ts                      # Mirror of backend Pydantic schemas
│   ├── languages.ts                  # Supported source/target languages
│   └── utils.ts                      # cn(), formatBytes, formatDate
└── hooks/
    ├── use-auth.tsx                  # AuthProvider + useAuth
    └── use-data.ts                   # useDocuments / useJobs / useJob / useHealth

Setup

git clone https://github.com/Mirxonjon/docs-translator-Frontend.git
cd docs-translator-Frontend

# Install deps (Node.js 20+)
npm install

# Point at your backend (defaults to http://localhost:8000/v1)
cp .env.example .env.local

# Dev server
npm run dev

Open http://localhost:3030

Pages

Route	Description
/	Landing — hero, features, CTA
/login	Sign in
/register	Create account
/dashboard	Stats + recent jobs + system health
/documents	Upload dropzone + document grid + translate dialog
/jobs	All translations (auto-polls while any is RUNNING)
/jobs/[id]	Job detail with live progress, result preview, copy & download

Backend requirements

The backend must be reachable at NEXT_PUBLIC_API_URL (default http://localhost:8000/v1) and have CORS enabled. The provided docker-compose already sets CORS_ORIGINS=*.

Default seeded user: admin@docs.example.com / Admin123!

Design tokens

• Primary: 262 83% 58% (violet 600) — gradient pair with fuchsia 500
• Radius: 0.75rem
• Glass effect class: .glass
• Gradient text: .gradient-text
• Subtle gradient border: .gradient-border
• Mobile: bottom-nav, sidebar hidden under lg

Build

npm run build
npm start          # production on :3030

License

MIT — see LICENSE.