Karachi Smart Transit System (KSTS) - Frontend

Undergraduate Database Systems Project — A modern React frontend for a transit information system with interactive maps and route visualization.

This project demonstrates modern web development practices with React, Vite, and interactive mapping technologies.

Note: This is the frontend-only version of the full-stack Karachi Smart Transit System. The complete project with backend, database, and admin features is available at: FAST-Dev-Team-Semester-Projects/karachi-smart-transit-system

---

Key Features

Interactive Transit Maps

• Route Visualization: Display Karachi BRT and bus routes on interactive Leaflet maps
• Stop Markers: Clickable stop locations with route information
• Service Filtering: Filter routes by service type (BRT, Peoples Bus, etc.)

Route Information

• Route Details: Complete stop sequences for all routes
• Service Types: BRT (Green/Orange/Red/Yellow/Blue/Brown) and Peoples Bus services
• Route Lengths: Distance information for route planning

User Experience

• Responsive Design: Mobile-first approach with Tailwind CSS
• Dark/Light Theme: User preference with local storage persistence
• Smooth Navigation: React Router for single-page application
• Modern UI: shadcn/ui components with Radix UI primitives

---

Architecture

Tech Stack

• Frontend: React single-page application with Vite build system
• Mapping: Leaflet.js for interactive transit route visualization
• Styling: Tailwind CSS with dark mode support
• Routing: React Router for single-page navigation
• Data: Static JSON files containing transit route and stop information

System Design

• Static Data Architecture: Pre-loaded transit data for offline functionality
• Interactive Maps: Real-time route visualization with stop markers
• Responsive Design: Mobile-first approach with modern UI components
• Theme System: Dark/light mode support with local storage persistence

---

Project Structure

• Frontend: React + Vite SPA with interactive transit maps
• Data: Static JSON files with Karachi transit route information
• Components: Reusable UI components with Tailwind CSS styling
• Pages: Landing page, route maps, and route information displays

---

Quick Start

Prerequisites

• Node.js 18+ installed
• npm (comes with Node.js)

Installation & Development

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

# Build for production
npm run build

# Preview production build
npm run preview

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

---

Key Locations

• Main Entry: src/main.jsx
• App Component: src/App.jsx
• Pages: src/pages/ (LandingPage, RoutesMap, PublicRoutes)
• Components: src/components/ (UI components and ThemeToggle)
• Data: src/data/ (routes.json, stops.json, routes_stops.json)
• Styling: src/index.css (Tailwind CSS imports)

---

Related Project

For the complete full-stack implementation including:

• Backend API with Node.js/Express
• Database with MySQL and advanced SQL features
• Admin dashboard with trip management
• Real-time features and authentication
• Complete booking and payment system

Visit: FAST-Dev-Team-Semester-Projects/karachi-smart-transit-system

---

License

This project is licensed under the MIT License - see the LICENSE file for details.