Frontend Overview

NestForge Pro ships a complete React frontend that covers auth, dashboard, billing, team management, settings, and admin.

Tech stack

Tool	Version	Purpose
React	19	UI library
Vite	6	Build tool and dev server
React Router	7	Client-side routing
TanStack Query	5	Server state management
Tailwind CSS	4	Utility-first styling
shadcn/ui	latest	Pre-built accessible components

Pages

Route	Page	Description
/	Landing	Conversion-optimized marketing page with pricing
/login	Login	Email/password and Google OAuth
/register	Register	Account creation
/forgot-password	Forgot password	Password reset flow
/dashboard	Dashboard	User home with quick stats
/billing	Billing	Subscription management, plan upgrades
/teams	Teams	Create/manage teams, invite members
/settings	Settings	Profile, password, notifications
/admin	Admin	User list, metrics, impersonation (admin only)

Project structure

apps/web/src/
  pages/
    landing/          # Marketing landing page
    auth/             # Login, register, forgot password
    dashboard/        # User dashboard
    billing/          # Subscription management
    settings/         # User/team settings
    admin/            # Admin panel
  components/
    ui/               # shadcn/ui components
    layout/           # Sidebar, header, footer
    shared/           # Shared components
  lib/
    api.ts            # Typed fetch wrapper
    auth.tsx          # Auth context and hooks
    utils.ts          # Utility functions
    hooks/            # TanStack Query hooks
  styles/             # Global styles and Tailwind config

Theme

The frontend uses OKLch color tokens for perceptually uniform light and dark modes. Toggle between them with the theme switcher in the header.

Design language: clean and professional, inspired by Linear and Revolut. No glassmorphism, no backdrop-blur. Desktop-first layout with full mobile responsiveness.

shadcn/ui components

15 components are pre-installed and ready to use:

• Button, Input, Label, Textarea
• Card, Dialog, Sheet
• Table, Tabs
• Select, Checkbox, Switch
• Avatar, Badge, Separator

Add more components with:

npx shadcn@latest add [component-name]

Development

Start the frontend dev server:

cd apps/web
npm run dev

The Vite dev server runs on http://localhost:3000 and proxies /api requests to http://localhost:4000 (the NestJS backend).