Back

Bus Line

Year

2025

Tech & Technique

MERN Stack, Tailwind CSS, ShadCN, Framer Motion, Socket.io, Mapbox, i18next, JWT, Cloudinary

Description

A modern transportation platform built to connect students with private bus drivers, solving daily commute challenges for schools and universities.

Key Features:
  • 🔐 Multi-Role Authentication: Separate login systems for Admin, Driver, and Student
  • 🎫 Real-Time Booking: Interactive booking system with live trip updates
  • 🗺️ Google Maps Integration: Interactive maps with route visualization and real-time tracking
  • 👨‍💼 Admin Dashboard: Complete CRUD operations for users, drivers, buses, trips, and destinations
  • 🚗 Driver Portal: Trip management, passenger tracking, and earnings overview
  • 🎓 Student Portal: Trip booking, history view, and live bus tracking
  • ⭐ Review System: Customer testimonials and rating system
  • 📱 Fully Responsive: Modern, professional design optimized for all devices

Technical Highlights:
  • Implemented real-time communication using Socket.io for live tracking
  • Built secure JWT-based authentication with role-based access control
  • Integrated Cloudinary for efficient image management and uploads
  • Developed coordinate extraction system for Google Maps links
  • Created modern toast notification system replacing browser alerts
  • Optimized performance with code splitting and lazy loading

My Role

Team Leader & Backend Lead & Full-Stack Contributor (Team Project)
Led backend development and contributed to full-stack integration:
  • 🔧 Backend Architecture: Built complete Node.js/TypeScript backend with Express framework
  • 🗄️ Database Design: Designed and implemented MongoDB schemas with Mongoose ODM
  • 🔒 Authentication System: Developed JWT-based authentication with bcrypt encryption and role-based access control
  • 🌐 RESTful API: Created comprehensive API endpoints for all platform features
  • ⚡ Real-Time Features: Implemented Socket.io for live bus tracking and instant updates
  • ☁️ Cloud Integration: Configured Cloudinary for secure image uploads and management
  • 🔗 Frontend Integration: Connected backend APIs with React frontend and handled data flow
  • 🎨 UI Development: Built key frontend pages and components using React and Tailwind CSS
  • 🌍 Localization: Implemented full Arabic/English translation system across the platform
  • 🚀 Deployment: Deployed backend on Render with production-ready configuration
  • 🐛 Testing & Debugging: Ensured API reliability and handled error management

AHMED

ALSALEH