A modern, responsive frontend application for managing campus parking operations. Built with React, TypeScript, TailwindCSS v4, and Recharts.
Note: This is a frontend-only implementation using mock data. No backend or database is required.
# Install dependencies
npm install
# Start development server
npm run dev
# Production build
npm run buildThe app will be available at http://localhost:5173/
| Technology | Purpose |
|---|---|
| React 19 + TypeScript | UI framework & type safety |
| Vite 7 | Build tool & dev server |
| TailwindCSS v4 | Utility-first styling with dark mode |
| React Router v7 | Client-side routing |
| Recharts | Data visualizations & charts |
| Lucide React | Icon library |
| Sonner | Toast notifications |
src/
├── components/
│ ├── layout/ # DashboardLayout, Sidebar, Topbar
│ └── ui/ # DataTable, Modal, StatCard, ParkingGrid, etc.
├── data/
│ └── mockData.ts # All mock entities & chart datasets
├── hooks/
│ └── useTheme.ts # Dark mode toggle with localStorage
├── pages/
│ ├── admin/ # Super Admin pages
│ ├── security/ # Security Personnel pages
│ ├── user/ # Staff/Student pages
│ └── shared/ # Shared pages (Reports & Analytics)
├── types/
│ └── index.ts # TypeScript interfaces for all entities
├── utils/
│ └── cn.ts # TailwindCSS class merge utility
├── App.tsx # Router & route definitions
├── main.tsx # App entry point
└── index.css # TailwindCSS config, theme, custom utilities
The app simulates 3 user roles, each with a dedicated dashboard and sidebar navigation. Select a role on the landing page (/) to enter its workspace.
Full control over the parking system.
| Page | Route | Description |
|---|---|---|
| Dashboard | /admin |
Stats overview, occupancy bars, plate search, recent activity |
| User Management | /admin/users |
CRUD for system users with role/status management |
| Carpark Registration | /admin/carparks |
Register carparks with capacity and occupancy tracking |
| Park Spaces | /admin/spaces |
Visual parking grid — color-coded by status (vacant/occupied/reserved) |
| Vehicle Registration | /admin/vehicles |
Register vehicles with plate, make/model, type |
| Parking Allocation | /admin/allocation |
Allocate spaces via permits (daily/weekly/monthly/annual) |
| Visitor Management | /admin/visitors |
Register visitors, check-in/cancel, status tracking |
| Reports & Analytics | /admin/reports |
Charts: occupancy trends, vehicle distribution, violations, peak hours |
| Settings | /admin/settings |
System config, parking rules, dark mode, notifications |
Gate operations and monitoring.
| Page | Route | Description |
|---|---|---|
| Dashboard | /security |
Live stats, plate search, entry/exit monitor, carpark grid |
| Scan QR Entry | /security/scan-entry |
Simulated QR/RFID scanner with approve/deny actions |
| Scan for Exit | /security/scan-exit |
Exit scanner with duration tracking |
| Parking Permissions | /security/permissions |
View/approve/reject/verify permits |
| Vehicle History | /security/history |
Complete entry & exit log |
| Report Incident | /security/incidents |
Report and track parking violations |
Personal parking management.
| Page | Route | Description |
|---|---|---|
| Dashboard | /user |
My vehicles, active permits, parking status |
| My Vehicles | /user/vehicles |
Register and manage personal vehicles |
| Register Visitor | /user/visitors |
Pre-register expected campus visitors |
| Apply for Permit | /user/apply-permit |
Submit parking permit applications |
| Permit Status | /user/permit-status |
Track application status |
| Parking History | /user/history |
Personal entry/exit history |
| Notifications | /user/notifications |
System alerts with read/unread state |
| Profile Settings | /user/profile |
Update personal info & password |
| Component | Description |
|---|---|
DashboardLayout |
Sidebar + Topbar + content wrapper |
Sidebar |
Collapsible desktop nav + mobile drawer, role-aware |
Topbar |
Search, dark mode toggle, notifications dropdown, profile menu |
DataTable |
Generic table with search, sort, pagination |
Modal |
Overlay dialog with ESC/click-outside close |
ParkingGrid |
Visual parking space grid with color-coded status |
StatCard |
Dashboard metric widget with icon & trend |
StatusBadge |
Color-coded status pill (active, pending, expired, etc.) |
ProgressBar |
Occupancy/progress visualization |
Toggle via the sun/moon icon in the Topbar. The preference is persisted in localStorage and respects system settings on first visit.
The Reports & Analytics page (/admin/reports) includes 4 interactive charts powered by Recharts:
- Line Chart — Occupancy trends throughout the day
- Pie Chart — Vehicle category distribution (Car, SUV, Motorcycle, etc.)
- Bar Chart — Monthly violation counts
- Area Chart — Peak usage hours across weekdays (Mon–Fri stacked)
# Type check
npx tsc --noEmit
# Build for production
npm run build
# Preview production build
npm run previewThis project was built as a practical coursework submission for 400-Level, Bells University of Technology.