AeroVista Frontend

Premium React, TypeScript, Vite, Tailwind CSS frontend for flight booking, airport operations, and flight tracking.

Stack

• React, TypeScript, Vite
• Tailwind CSS
• React Router
• TanStack Query
• Zustand auth/session store
• React Hook Form and Zod
• Framer Motion
• React Leaflet with OpenStreetMap
• Recharts
• Lucide icons

Local Setup

1. Install dependencies:

npm install

2. Configure environment:

cp .env.example .env

3. Start the backend at http://localhost:4000.

4. Start the frontend:

npm run dev

Frontend: http://localhost:5173

Demo Credentials

All accounts use DemoPass123!.

• passenger@aerovista.test
• agent@aerovista.test
• airline@aerovista.test
• airport@aerovista.test
• admin@aerovista.test
• superadmin@aerovista.test

Main Screens

• / landing page with OpenStreetMap route hero and search
• /search flight search and filters
• /flights/:flightId flight details
• /track/:flightId live/simulated tracker
• /booking/:flightId booking wizard
• /airports and /airports/:airportId
• /airlines and /airlines/:airlineId
• /app/dashboard
• /app/bookings
• /admin
• /airline
• /airport

Scripts

• npm run dev
• npm run build
• npm run preview
• npm run lint
• npm run typecheck

Deployment Notes

Deploy on Vercel or Netlify.

Production variables:

VITE_API_BASE_URL=https://your-api.example.com/api/v1
VITE_APP_NAME=AeroVista
VITE_OPENSTREETMAP_TILE_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
VITE_OPENSTREETMAP_ATTRIBUTION=(c) OpenStreetMap contributors

The frontend is fully functional with backend seeded data and does not require paid API keys.