Nexus API SaaS - Client Dashboard

Welcome to the frontend application for Nexus API SaaS! This is a beautifully crafted, highly responsive Next.js application built with React and Tailwind CSS. It serves as the primary administrative dashboard for users to manage their organizations, API keys, subscription billing, and customer feedback boards.

🌐 Ecosystem Links

• Backend Server Repo: nexus-api-server GitHub (Assume located in the server directory)
• Nexus API Portal: nexus-api-client.vercel.app
• Live Customer Demo Portal(For Testing): nexus-customer.vercel.app

🚀 What is this project?

The Nexus API SaaS client is the control center for developers and businesses using our Headless API. It provides a sleek, dark-mode-ready interface for monitoring API usage, managing API keys securely, moderating feedback coming from end-users, and upgrading subscription limits via Razorpay.

Core Technologies

• Framework: Next.js (App Router) & React 18+
• Styling: Tailwind CSS + Shadcn UI (Radix UI primitives)
• Authentication: Clerk (Organization & User Management)
• Data Visualization: Recharts (for API usage analytics)
• Forms & Validation: React Hook Form + Zod
• Notifications: Sonner (Toast notifications)
• Payments: Razorpay Checkout Integration

---

📂 Folder Structure

client/
├── public/                 # Static assets (images, fonts, favicons)
├── src/
│   ├── app/                # Next.js App Router structure
│   │   ├── (auth)/         # Clerk Sign-in/Sign-up routes
│   │   ├── dashboard/      # Protected dashboard routes (Billing, Boards, API Keys)
│   │   ├── layout.tsx      # Root application layout (Providers, Themes)
│   │   └── page.tsx        # Landing page
│   ├── components/         # React Components
│   │   ├── layout/         # Header, Collapsible Sidebar
│   │   ├── providers/      # Context Providers (DashboardContext, ThemeProvider)
│   │   ├── ui/             # Reusable Shadcn UI components (Buttons, Modals, Inputs)
│   │   └── ...             # Feature components (FeedbackFeedClient, ApiKeyManager)
│   └── lib/                # Utility functions (e.g., Tailwind `cn` merger)
├── .env                    # Environment variables (Clerk keys, Server URLs)
├── tailwind.config.ts      # Tailwind CSS configuration and theme design system
├── components.json         # Shadcn UI configuration
└── package.json

---

⚙️ Dashboard Architecture Flow

The following diagram illustrates how the client dashboard seamlessly communicates with our backend ecosystem:

sequenceDiagram
    participant U as User (Browser)
    participant C as Next.js Client
    participant A as Clerk Auth
    participant S as Express Backend
    participant R as Razorpay

    %% Authentication
    U->>C: Access /dashboard
    C->>A: Validate Session (Middleware)
    A-->>C: Session Valid (returns orgId/userId)
    
    %% Data Fetching (Server Components)
    C->>S: Fetch Dashboard Stats, Boards, & Keys
    S-->>C: Returns JSON Data
    C->>C: Hydrate DashboardContext Provider
    
    %% UI Interaction
    U->>C: Clicks "Buy More Credits"
    C->>S: Request Razorpay Order ID
    S-->>C: Return order_id
    C->>R: Open Razorpay Checkout Modal
    R-->>U: User Completes Payment
    R-->>C: Return Payment Signature
    C->>S: POST /api/billing/verify
    S-->>C: Verification Success
    C->>U: Display Confetti Success Modal!

Loading

---

🔧 Setup & Local Development

1. Install Dependencies

npm install
# or
pnpm install

2. Environment Variables

Create a .env file in the root of the client/ folder and populate it with the required Clerk Publishable Key, Backend Server URL, and Razorpay Key ID.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

NEXT_PUBLIC_SERVER_URL="http://localhost:5000"
NEXT_PUBLIC_RAZORPAY_KEY_ID=rzp_test_...

3. Start the Development Server

Run the local Next.js server with hot-module reloading.

npm run dev

The client will start on http://localhost:3000. Navigate to /sign-in to authenticate via Clerk and access the dashboard.

---

✨ UI/UX Highlights

1. State-of-the-Art Aesthetics: Built with meticulously crafted Tailwind classes utilizing dynamic dark mode, glassmorphism layers, and micro-animations to create a premium SaaS feel.
2. Collapsible Sidebar: A responsive, state-driven sidebar that natively collapses into icon-only mode to maximize workspace real estate without relying on heavy global state management.
3. Optimized Layouts: The dashboard layout leverages Server Components for heavy initial data fetching (Axios), passing the payload down into a lightweight Client Context Provider (DashboardContext), ensuring lightning-fast client-side navigation!