Major Enhancement: NestJS Migration + CASL Authorization + Error Handling
Some checks failed
CI/CD Pipeline / Backend Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Tests (push) Has been cancelled
CI/CD Pipeline / Build Docker Images (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
Some checks failed
CI/CD Pipeline / Backend Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Tests (push) Has been cancelled
CI/CD Pipeline / Build Docker Images (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
Complete rewrite from Express to NestJS with enterprise-grade features: ## Backend Improvements - Migrated from Express to NestJS 11.0.1 with TypeScript - Implemented Prisma ORM 7.3.0 for type-safe database access - Added CASL authorization system replacing role-based guards - Created global exception filters with structured logging - Implemented Auth0 JWT authentication with Passport.js - Added vehicle management with conflict detection - Enhanced event scheduling with driver/vehicle assignment - Comprehensive error handling and logging ## Frontend Improvements - Upgraded to React 19.2.0 with Vite 7.2.4 - Implemented CASL-based permission system - Added AbilityContext for declarative permissions - Created ErrorHandler utility for consistent error messages - Enhanced API client with request/response logging - Added War Room (Command Center) dashboard - Created VIP Schedule view with complete itineraries - Implemented Vehicle Management UI - Added mock data generators for testing (288 events across 20 VIPs) ## New Features - Vehicle fleet management (types, capacity, status tracking) - Complete 3-day Jamboree schedule generation - Individual VIP schedule pages with PDF export (planned) - Real-time War Room dashboard with auto-refresh - Permission-based navigation filtering - First user auto-approval as administrator ## Documentation - Created CASL_AUTHORIZATION.md (comprehensive guide) - Created ERROR_HANDLING.md (error handling patterns) - Updated CLAUDE.md with new architecture - Added migration guides and best practices ## Technical Debt Resolved - Removed custom authentication in favor of Auth0 - Replaced role checks with CASL abilities - Standardized error responses across API - Implemented proper TypeScript typing - Added comprehensive logging Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
144
frontend/README.md
Normal file
144
frontend/README.md
Normal file
@@ -0,0 +1,144 @@
|
||||
# VIP Coordinator Frontend
|
||||
|
||||
React 18 frontend with TypeScript, Tailwind CSS, Auth0, and TanStack Query.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```env
|
||||
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
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
```bash
|
||||
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
|
||||
Reference in New Issue
Block a user