TransitGo represents a cutting-edge, centralized platform designed to revolutionize the public transport experience. Developed with the latest web technologies, including Next.js 15.5 and React 19, this system bridges the information gap between transit operators and passengers. It provides a real-time, interactive interface for tracking bus fleets, optimizing commute planning, and managing transit operations with unprecedented efficiency.
The primary objective of this initiative was to engineer a high-performance, scalable web application that leverages reactive geospatial data visualization to solve the complex logistical challenge of real-time urban mobility.
This platform integrates several sophisticated functionalities to deliver a seamless user experience:
-
Real-Time Geolocation Tracking
Leveraging Mapbox GL and Firebase Firestore, the system renders the live position of transit vehicles with sub-second latency. This allows passengers to visualize bus movements on an interactive map in real-time, significantly reducing wait-time uncertainty. -
Dynamic Route Visualization
The application utilizes the Mapbox Directions API to project precise route paths and estimated arrival times (ETAs). This component dynamically adjusts to traffic conditions (where supported) and route deviations, ensuring accurate information delivery. -
Reactive User Interface
Built on React 19 and Tailwind CSS 4, the frontend ensures a fluid, responsive experience across all devices. The interface employs advanced state management to handle high-frequency data updates without compromising render performance. -
Role-Based Access Control
Secure authentication via Firebase Auth segregates functionality between administrators (fleet management) and passengers (view-only access), ensuring data integrity and operational security.
The system adopts a modern serverless-first architecture, utilizing Next.js for the frontend and API layer, coupled with Firebase for backend services and Mapbox for geospatial intelligence.
+-------------------------------------------------------+
| Client Side (Browser) |
| +---------------------------------------------------+ |
| | Next.js Framework | |
| | (React 19 / Tailwind CSS 4 / Framer Motion) | |
| +-------------------------+-------------------------+ |
| ^ | ^ |
| | Real-time | | Map Tiles |
| | Listener | | & Routes |
| v v v |
+-------------------+ +---------------+ +-------------+
| Firebase | | Next.js API | | Mapbox |
| - Firestore DB | | (Serverless) | | API |
| - Authentication | +---------------+ +-------------+
+-------------------+
App Router Architecture
Server & Client Components
Utility-First Styling
Fluid Transitions
Interactive Maps
Real-time Database
- Node.js (v18+ recommended)
- NPM or Yarn
- Firebase Project Credentials
- Mapbox Public Access Token
Create a .env.local file in the root directory and populate it with your secure credentials:
# Mapbox Configuration
NEXT_PUBLIC_MAPBOX_TOKEN=pk.eyJ1...
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=AIza...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-app-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-app.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123...
NEXT_PUBLIC_FIREBASE_APP_ID=1:123...Execute the following command to install all required packages:
npm install
# or
yarn installStart the high-performance local development server using Turbopack:
npm run devAccess the application at: http://localhost:3000
To generate an optimized production build:
npm run buildTo start the production server:
npm start