VantageEdge Frontend v2 - Modern API Gateway Dashboard

A production-ready, fully-featured dashboard for VantageEdge API Gateway with synchronized authentication, real-time data, and modern UI/UX.

✅ Project Status: COMPLETE & PRODUCTION READY

All features implemented, tested, and deployed to production (Vercel).

🎨 Design Features

Unique Design Elements

Space Grotesk Font - Modern, geometric sans-serif typography
Purple/Pink Gradient Theme - Distinctive color palette with dark mode
Glassmorphism Effects - Modern frosted glass UI components
Framer Motion Animations - Smooth, delightful page transitions
Grid & Dot Patterns - Subtle background textures
Gradient Text - Eye-catching headings with gradient effects
Custom Animations - Shimmer loading, fade, scale effects

Authentication & Security

Auto-sync with Backend - User and tenant automatically synced on login
Clerk Integration - Beautiful, secure authentication UI
Organization Support - Multi-tenant with Clerk organizations
Token Management - Automatic JWT token handling in all API calls
API Key Authentication - Support for service-to-service auth

Architecture

Type-Safe API Client - Full TypeScript support with proper types
Auth Sync Service - Dedicated service for backend synchronization
Dual API Clients - Separate clients for auth and tenant operations
Theme Support - Dark mode with system preference detection
State Management - React Query for server state, Zustand for client state
Error Handling - Comprehensive error interceptors and user feedback

🚀 Quick Start

Install dependencies

npm install

Configure environment

cp .env.example .env.local
# Add your Clerk keys and API URL

Run development server

npm run dev

Open browser http://localhost:3000

📦 Complete Feature Set

Pages (All Implemented ✅)

✅ Landing Page - Modern hero section with gradient effects
✅ Auth Pages - Glassmorphic sign-in/sign-up with Clerk
✅ Dashboard Overview - Real-time stats, top routes, quick actions
✅ Services Management - Full CRUD for backend origins
✅ Routes Configuration - Create, edit, delete routes with auth modes
✅ API Keys - Generate, view, and manage API keys securely
✅ Analytics Dashboard - Real-time metrics and request analytics
✅ Cache Explorer - View and manage cached entries
✅ Settings - Tenant settings with tenant ID display

Components (All Built ✅)

✅ Button - Multiple variants (default, outline, ghost, destructive)
✅ Card - Glassmorphic cards with hover effects
✅ Badge - Status indicators and labels
✅ Input - Form inputs with proper styling
✅ Label - Form labels
✅ Dialog - Modal dialogs for forms
✅ Dashboard Shell - Sidebar navigation with active states
✅ Add Origin Dialog - Create/edit backend services
✅ Add Route Dialog - Configure routing rules

Core Features (All Working ✅)

✅ Automatic User/Tenant Sync - Seamless backend synchronization
✅ JWT Token Handling - Automatic token injection in API calls
✅ API Key Authentication - Support for X-API-Key header
✅ Real-time Data Fetching - All data from live API endpoints
✅ CRUD Operations - Create, read, update, delete for all resources
✅ Search & Filtering - Search functionality across resources
✅ Responsive Design - Mobile-first, works on all devices
✅ Loading States - Shimmer effects and skeleton loaders
✅ Error Handling - User-friendly error messages with retry
✅ Toast Notifications - Success/error feedback with Sonner
✅ Copy to Clipboard - Easy tenant ID and API key copying

🔄 Authentication Flow

User signs in with Clerk
Frontend automatically syncs with backend:
- POST /api/v1/auth/sync-user (creates user record)
- POST /api/v1/auth/sync-tenant (creates tenant if needed)
Tenant ID resolved from Clerk user/org ID
All API calls include JWT token in Authorization header
Backend validates token and maps to internal user/tenant
User can access all dashboard features

🎯 Tech Stack

Framework: Next.js 14.2.5 (App Router)
Language: TypeScript 5.4.5
Styling: Tailwind CSS 3.4.4 + Custom animations
UI Library: Radix UI primitives (shadcn/ui)
Auth: Clerk 5.1.0 (with org support)
Animations: Framer Motion 11.2.10
Data Fetching: TanStack Query 5.40.0
API Client: Axios 1.7.2 with interceptors
Theme: next-themes 0.3.0
Toast: Sonner 1.4.41
Forms: React Hook Form 7.51.5 + Zod 3.23.8
Icons: Lucide React 0.395.0

📁 Project Structure

app/
├── auth/
│   ├── sign-in/[[...sign-in]]/    # Clerk sign in page
│   └── sign-up/[[...sign-up]]/    # Clerk sign up page
├── dashboard/
│   ├── layout.tsx                  # Dashboard shell with sidebar
│   ├── page.tsx                    # Overview with real-time stats
│   ├── services/                   # Origin/Service management
│   ├── routes/                     # Route configuration
│   ├── api-keys/                   # API key management
│   ├── analytics/                  # Real-time analytics
│   ├── cache/                      # Cache explorer
│   └── settings/                   # Tenant settings
├── layout.tsx                      # Root layout with providers
├── page.tsx                        # Landing page
└── globals.css                     # Custom styles & animations

components/
├── dashboard/
│   ├── shell.tsx                   # Sidebar + header navigation
│   ├── add-origin-dialog.tsx       # Create/edit origins
│   └── add-route-dialog.tsx        # Create/edit routes
├── ui/
│   ├── button.tsx                  # Button component
│   ├── card.tsx                    # Card component
│   ├── badge.tsx                   # Badge component
│   ├── input.tsx                   # Input component
│   ├── label.tsx                   # Label component
│   └── dialog.tsx                  # Dialog component
└── providers.tsx                   # Query + Theme + Auth providers

lib/
├── api/
│   ├── client.ts                   # Server-side API client
│   ├── client-api.ts               # Browser API client (tenant-based)
│   └── auth-sync.ts               # Auth synchronization service
├── auth/
│   └── sync.ts                     # User/tenant sync utilities
├── contexts/
│   └── tenant-context.tsx          # Tenant context provider
├── types/
│   └── index.ts                    # TypeScript type definitions
└── utils.ts                        # Utility functions

🔑 Environment Variables

# Clerk (REQUIRED)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

# Clerk URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/auth/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/auth/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# API
NEXT_PUBLIC_API_URL=https://vantageedge.onrender.com
NEXT_PUBLIC_GATEWAY_URL=http://localhost:8000

🎨 Design System

Colors

Primary: Purple (hsl(262 83% 58%))
Secondary: Slate
Success: Green (#22C55E)
Warning: Orange (#F97316)
Destructive: Red (#EF4444)
Muted: Subtle grays for backgrounds

Typography

Font: Space Grotesk (geometric sans-serif)
Headings: Bold with tight tracking
Gradient Text: Purple to pink gradient for emphasis
Monospace: For code, IDs, and technical data

Effects

Glassmorphism: bg-background/80 backdrop-blur-xl
Shadows: Subtle, layered shadows for depth
Animations: Smooth transitions (300ms)
Patterns: Grid and dot backgrounds
Hover Effects: Scale and shadow on interactive elements

🔧 Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Type check
npm run type-check

# Build for production
npm run build

# Start production server
npm start

🚢 Deployment

Vercel (Production)

Push to GitHub
Import in Vercel
Add environment variables:
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
- CLERK_SECRET_KEY
- NEXT_PUBLIC_API_URL
Deploy automatically on push

Current Production URL: https://vantageedge.vercel.app

Docker

docker build -t vantageedge-frontend .
docker run -p 3000:3000 vantageedge-frontend

🔐 Backend Integration

Fully integrated with VantageEdge Go backend:

✅ Auth Endpoints

POST /api/v1/auth/sync-user
POST /api/v1/auth/sync-tenant
GET /api/v1/auth/me
GET /api/v1/auth/tenant

✅ Resource Endpoints

Tenants: CRUD operations
Origins: Full CRUD with health checks
Routes: Create, update, delete with auth modes
API Keys: Generate, list, delete with secure hashing
Analytics: Real-time metrics and statistics
Cache: View and manage cached entries

✅ Authentication

JWT tokens validated by backend
API key authentication supported
Clerk user/org IDs mapped to internal tenant IDs

✨ Key Features

Real-Time Data

All dashboard data fetched from live API
No hardcoded data - everything is dynamic
Auto-refresh for analytics (30s interval)
Loading states with shimmer effects

User Experience

Smooth page transitions with Framer Motion
Responsive sidebar navigation
Search functionality across all resources
Copy-to-clipboard for IDs and keys
Toast notifications for all actions
Error handling with retry options

Multi-Tenant Support

Automatic tenant creation on signup
Tenant ID visible in settings
All resources scoped to tenant
Clerk organization support

📊 Production Metrics

Build Status: ✅ Compiles successfully
Type Safety: ✅ 100% TypeScript coverage
Linting: ✅ No errors
Deployment: ✅ Live on Vercel
Backend: ✅ Deployed on Render
Database: ✅ PostgreSQL with 6 migrations
Cache: ✅ Redis integration

📝 Implementation Notes

✅ Auth sync happens automatically on every sign-in
✅ All API calls include JWT token automatically
✅ Theme persists across sessions (dark mode)
✅ Responsive design works on all devices
✅ All CRUD operations fully functional
✅ Real-time analytics with auto-refresh
✅ Cache management with search
✅ Tenant ID display and copying
✅ API key generation with secure prefixes

🎯 What's Working

✅ Complete user authentication flow
✅ Automatic backend synchronization
✅ Full CRUD for all resources
✅ Real-time analytics dashboard
✅ Cache exploration and management
✅ API key generation and management
✅ Route configuration with multiple auth modes
✅ Service/origin management with health checks
✅ Settings page with tenant information
✅ Production deployment on Vercel

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
app		app
components		components
lib		lib
public		public
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
middleware.ts		middleware.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Rakshit-gen/vantageedge-fe

Folders and files

Latest commit

History

Repository files navigation