vip-coordinator/frontend

VIP Coordinator Frontend

React 18 frontend with TypeScript, Tailwind CSS, Auth0, and TanStack Query.

Quick Start

# Install dependencies
npm install

# Configure Auth0
# Edit .env with your Auth0 credentials

# Start development server
npm run dev

Frontend will be available at: http://localhost:5173

Tech Stack

• React 18.2.0
• TypeScript 5.3+
• Vite 5.x (build tool)
• Tailwind CSS 3.4+ (styling)
• Auth0 React SDK (authentication)
• TanStack Query v5 (data fetching)
• React Router 6.x (routing)
• Axios (HTTP client)
• Lucide React (icons)

Features

• ✅ Auth0 authentication with automatic token management
• ✅ Protected routes
• ✅ Role-based access control
• ✅ Modern, responsive UI with Tailwind CSS
• ✅ Automatic API token injection
• ✅ Real-time data with TanStack Query
• ✅ Dashboard with stats
• ✅ VIP management
• ✅ Driver management
• ✅ Schedule/event management
• ✅ Flight tracking
• ✅ User management (admin)

Pages

• /login - Auth0 login page
• /callback - Auth0 callback handler
• /dashboard - Main dashboard with stats
• /vips - VIP list and management
• /drivers - Driver list and management
• /events - Schedule and event management
• /flights - Flight tracking
• /users - User management (admin only)

Environment Variables

Create .env file:

VITE_API_URL=http://localhost:3000/api/v1
VITE_AUTH0_DOMAIN=your-tenant.us.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
VITE_AUTH0_AUDIENCE=https://your-api-identifier

Development

npm run dev      # Start dev server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Project Structure

src/
├── components/
│   ├── Layout.tsx          # Main layout with navigation
│   └── ProtectedRoute.tsx  # Route protection component
├── contexts/
│   └── AuthContext.tsx     # Auth context wrapper
├── lib/
│   ├── api.ts              # Axios client with interceptors
│   └── utils.ts            # Utility functions
├── pages/
│   ├── Login.tsx           # Login page
│   ├── Callback.tsx        # Auth callback
│   ├── Dashboard.tsx       # Main dashboard
│   ├── VIPList.tsx         # VIP management
│   ├── DriverList.tsx      # Driver management
│   ├── EventList.tsx       # Schedule management
│   ├── FlightList.tsx      # Flight tracking
│   └── UserList.tsx        # User management
├── types/
│   └── index.ts            # TypeScript interfaces
├── App.tsx                 # Root component
├── main.tsx                # Entry point
└── index.css               # Global styles

Authentication Flow

1. User clicks "Sign In with Auth0" on login page
2. Redirected to Auth0 hosted login
3. After authentication, returned to /callback
4. Token stored in localStorage
5. Axios interceptor attaches token to all API requests
6. Protected routes check authentication status
7. User redirected to dashboard

API Integration

The frontend communicates with the backend API at http://localhost:3000/api/v1.

All API calls use the Axios client in lib/api.ts which:

• Automatically adds JWT token to requests
• Handles errors globally
• Logs all requests in development

Building for Production

npm run build

This creates optimized production files in dist/ directory.

Deploy to:

• Digital Ocean App Platform
• Netlify
• Vercel
• Any static hosting service

Notes

• First user to register becomes administrator automatically
• Subsequent users require admin approval
• All routes except /login and /callback require authentication
• Token refresh handled automatically by Auth0 SDK