Frontend Overview
The NeXuS frontend is a Next.js 16 application with React 19, TypeScript, and Tailwind CSS. It provides the dashboard UI for managing infrastructure, monitoring services, and configuring DNS.
Tech Stack
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI component library |
| TypeScript | Type safety |
| Tailwind CSS | Utility-first styling |
| JetBrains Mono | Monospace font for the dark theme |
Project Structure
frontend/
├── app/
│ ├── layout.tsx # Root layout (AuthProvider, PlanProvider)
│ ├── login/page.tsx # Login / register page
│ ├── dashboard/
│ │ ├── layout.tsx # Dashboard layout (Sidebar + Topbar)
│ │ ├── page.tsx # Main dashboard (container stats)
│ │ ├── services/page.tsx # Service health overview
│ │ ├── dns/page.tsx # Cloudflare DNS management
│ │ ├── mcp/page.tsx # MCP server status
│ │ ├── grafana/page.tsx # Embedded Grafana
│ │ └── settings/page.tsx # User settings
│ ├── globals.css # Global styles + Tailwind imports
│ ├── global-error.tsx # Error boundary
│ └── not-found.tsx # 404 page
├── components/
│ ├── Sidebar.tsx # Navigation sidebar
│ ├── Topbar.tsx # Top navigation bar
│ └── ProtectedRoute.tsx # Auth guard component
├── lib/
│ ├── AuthContext.tsx # JWT auth context + auto-refresh
│ ├── auth.ts # Auth API client
│ └── plan.tsx # Plan tier context + feature gating
└── tsconfig.json
Key Features
- Dark theme with NeXuS palette (
#0a0e1a,#04101d,#4cc9f0,#ffb400) - JWT authentication with httpOnly cookie refresh tokens
- Auto-refresh access tokens every 13 minutes
- Plan-based feature gating — UI elements show/hide based on tier
- Protected routes — redirects to login if unauthenticated
- Responsive layout with collapsible sidebar
Environment Variables
NEXT_PUBLIC_API_URL=https://api.sebhosting.com
NEXT_PUBLIC_AUTH_URL=https://auth.sebhosting.com