CompletedNext.js 14TypeScriptReact+7 more
RideShare
A premium ride-sharing platform featuring a luxury UI, real-time ride simulation, context-aware AI driver negotiation, and dynamic pricing engines.
Timeline
February 2026 (5 days)
Role
Frontend Developer
Team
Solo
Status
CompletedTechnology Stack
Next.js 14
TypeScript
React
Tailwind CSS
Shadcn UI
Azure OpenAI
Leaflet Maps
Stripe (Simulated)
Context API
Framer Motion
Key Challenges
- Real-time State Synchronization
- Leaflet SSR Compatibility
- AI Context Management
- Dual-mode Chat System
- Complex UI Animations
Key Learnings
- Next.js App Router & Server Actions
- Advanced Map Integrations
- Azure OpenAI Prompt Engineering
- Building Simulation Engines
- Glassmorphism Design Systems
Overview
RideShare is a next-generation transportation platform designed to redefine the booking experience. Built with a "dark-mode first" philosophy, it combines the sleek aesthetic of Uber Black to create a seamless, luxury user experience.
What Users Can Do
- Book Rides: Seamlessly search destinations with auto-complete and book rides instantly.
- Negotiate with AI: Chat with an AI driver persona who remembers ride details and negotiates contextually.
- Simulate Journeys: Watch a realistic, real-time simulation of the ride lifecycle (Finding Driver → Arriving → In Progress → Completed).
- Live Tracking: View dynamic map routing with custom markers and auto-fitting bounds.
- Dual Support: Switch instantly between the Driver Chat and App Support assistance.
- Premium Classes: Choose between Economy, Comfort, and Luxury vehicle tiers with dynamic pricing.
Tech Stack
- Frontend: Next.js 14 (App Router), TypeScript, React, Tailwind CSS
- UI Library: Shadcn UI, Lucide React, Framer Motion
- AI Engine: Azure OpenAI (GPT-4o) for distinct Driver/Support personas
- Maps: Leaflet, React-Leaflet, OpenStreetMap, Leaflet Routing Machine
- State: React Context API + Custom Hooks for simulation state management
Architecture & Challenges
- The "window" Problem: Integrating Leaflet with Next.js was tricky because the library depends heavily on the global
windowobject. I solved this by dynamically importing map components and wrapping logic in client-side hooks. - State Synchronization: Keeping the Map, the Ride Status Bar, and the Chat Widget in sync required a robust state machine. When the ride status changes to "Arrived," the map updates markers, and the Chatbot switches context automatically.
- AI Persona Injection: I engineered a system where the AI's system prompt is dynamically updated with the current ride state (Location, ETA, Vehicle details), allowing "Rajesh" to answer questions like "How far away are you?" accurately.
Future Plans
- Real-time WebSockets: Replace the simulation engine with actual Socket.io connections for multi-user coordination.
- Driver Portal: Build the other side of the app for drivers to accept rides.