CityRide

🚌 CityRide Nagpur — Digital Bus Pass Management System

A production-grade, full-stack Digital Bus Pass Management Web Application customized for Nagpur City Bus Transportation (Mahanagar Parivahan).

Built with React (Vite + React Router) on the frontend and Python Flask connected to MySQL / SQLite on the backend.

📸 Screenshots

CityRide home page and digital pass preview

CityRide home page showing the digital bus pass preview

Sign in and demo accounts

CityRide login page showing the available demo accounts

🌟 Key Features & Updates

  1. Full Authentication (Login & Signup)
    • Secure account registration (Name, Mobile, Email, Password, Address in Nagpur, DOB, Gender).
    • Password hashing and MySQL credential verification.
    • Protected Routes: /my-pass, /apply, /renew, /history, and /profile are guarded and automatically redirect unauthenticated users to /login.
    • 1-Click Demo Logins on the login page for rapid evaluator demonstration:
      • Rahul Sharma (rahul@nagpur.com / password123) $\rightarrow$ Active Pass (22 days left)
      • Priya Patel (priya@nagpur.com / password123) $\rightarrow$ Expiring Soon (3 days left)
      • Amit Verma (amit@nagpur.com / password123) $\rightarrow$ Expired Pass (expired 12 days ago)
  2. Flawless React Router Navigation
    • Full browser Back, Forward, direct URL navigation, and page refresh support without breaking state.
    • Dedicated Back button on every view.
    • Real NavLink / Link elements across desktop and mobile bottom navigation.
  3. Nagpur Transit Data & Corridors
    • Major hubs & corridors: Sitabuldi Interchange, Nagpur Railway Station, Airport & Mihan, Dharampeth, Manish Nagar, Wardha Road, Hingna Naka, Sadar, Kamptee, Medical Square, Ajni.
    • Realistic pass plans (Daily ₹50, Monthly ₹900, Quarterly ₹2,400, Student Concession ₹450).
  4. Authentic Digital Bus Pass Card
    • High-contrast navy transit card with holographic security strip.
    • Real dynamic SVG QR Code.
    • Live ticking security clock with pulsing green validation dot.
    • Tap-to-zoom QR code modal for transit conductors.
    • “Show this pass when boarding” badge.
  5. Real Expiry Tracking & Smart Consecutive Renewal
    • ACTIVE: > 7 days remaining.
    • EXPIRING_SOON: 1 to 7 days remaining (with amber alert banner).
    • EXPIRED: Validity period passed (with red alert banner).
    • Consecutive Renewal: Active passes extend validity consecutively after their current expiry date without resetting remaining days. Expired passes start validity from the current date.
  6. Pass History Audit Log & Passenger Profile
    • Complete audit trail of issuance and renewals with transaction amounts and timestamps.
    • Passenger profile view and live editing stored directly in MySQL.

🏗️ Project Structure

BUS PASS Management/
│
├── frontend/
│   ├── package.json
│   ├── vite.config.js               # Auto-opens browser on dev launch
│   ├── index.html
│   └── src/
│       ├── App.jsx                  # React Router & protected routes
│       ├── main.jsx
│       ├── context/
│       │   └── AuthContext.jsx      # Authentication & pass synchronization
│       ├── components/
│       │   ├── Navbar.jsx           # Responsive header & mobile bottom bar
│       │   ├── ProtectedRoute.jsx   # Route guarding & redirect handling
│       │   ├── DigitalPassCard.jsx  # Live QR, security ticker & transit card
│       │   └── ToastContainer.jsx   # Notification feedback
│       ├── pages/
│       │   ├── HomePage.jsx         # Landing page & demo overview
│       │   ├── LoginPage.jsx        # Login & 1-click demo switcher
│       │   ├── SignupPage.jsx       # Registration
│       │   ├── PlansPage.jsx        # Nagpur fare tiers & selection
│       │   ├── ApplyPassPage.jsx    # 4-step issuance wizard
│       │   ├── MyPassPage.jsx       # Digital pass & expiry countdown
│       │   ├── RenewPassPage.jsx    # Consecutive renewal
│       │   ├── PassHistoryPage.jsx  # Audit log & timeline
│       │   └── ProfilePage.jsx      # Commuter profile
│       └── styles/
│           └── index.css            # Master transit design system
│
├── backend/
│   ├── app.py                       # Flask REST API & auth engine
│   ├── bus_pass_management.sql      # MySQL schema & seed data
│   ├── database.db                  # Local auto-fallback database
│   └── requirements.txt
│
├── database/
│   └── bus_pass_management.sql      # Direct MySQL Workbench import
│
└── README.md

🗄️ MySQL Database Setup (MySQL Workbench)

  1. Open MySQL Workbench.
  2. Connect to your local MySQL Server.
  3. Open database/bus_pass_management.sql (or backend/bus_pass_management.sql).
  4. Click the Execute (Lightning icon) button.
  5. The bus_pass_management database with tables (users, pass_plans, bus_passes, pass_history) and seed data will be created.

Zero-Friction Fallback: If MySQL is not running on your machine, app.py automatically initializes and operates seamlessly using local SQLite (database.db), ensuring immediate plug-and-play execution without crashing.

🚀 How to Run

1. Start Backend Server

cd backend
pip install -r requirements.txt
python app.py

Backend runs at http://127.0.0.1:5001

2. Start Frontend

cd frontend
npm install
npm run dev

Vite will automatically launch your default browser at http://localhost:5173.

🔑 Demo Credentials for Presentation

Temporary project login

This fixed account is stored in the MySQL users table and is created automatically if it does not exist:

Commuter Email Password Pass State Route
Rahul Sharma rahul@nagpur.com password123 ACTIVE (22 days left) Dharampeth ↔ Sitabuldi ↔ Hingna Naka
Priya Patel priya@nagpur.com password123 EXPIRING SOON (3 days left) Manish Nagar ↔ Wardha Road ↔ Medical Sq
Amit Verma amit@nagpur.com password123 EXPIRED (0 days left) Sadar ↔ Railway Station ↔ Kamptee