What is Rodando Passenger?
Rodando Passenger is a modern mobile application built with Ionic Angular that enables passengers to book and track rides in real-time with Rodando Confort ride-sharing service. The app provides an intuitive interface for requesting trips, monitoring driver locations, and managing ride history.Real-time Tracking
Live driver location updates via WebSocket connections using Socket.io
Interactive Maps
Mapbox integration for route visualization, geocoding, and place search
Smart State Management
NgRx Signals-based architecture for predictable state updates
Native Features
Capacitor plugins for geolocation, secure storage, and device APIs
Key Features
Rodando Passenger offers a comprehensive set of features designed for seamless ride-sharing:- Real-time ride booking with interactive map-based pickup and destination selection
- Live trip tracking with continuous driver location updates via Socket.io WebSocket connections
- Dual authentication flow supporting both mobile and web session types
- Mapbox integration for accurate directions, geocoding, and reverse geocoding
- NgRx Signals state management for reactive and predictable data flow
- Ionic 8 components with custom layouts, theming, and dark mode support
- Native device capabilities including geolocation, secure storage, and haptic feedback
- Trip history management with active trip monitoring and completed ride records
- Driver information with real-time status updates (assigned, en route, arrived, in progress)
- Trip rating system for post-ride feedback
Technology Stack
Frontend Framework
Angular 18.2
Standalone components with modern Angular architecture
Ionic 8.4
Cross-platform mobile UI components and navigation
Core Dependencies
| Technology | Version | Purpose |
|---|---|---|
| Angular Core | ^18.2.0 | Application framework |
| Ionic Angular | ^8.4.3 | Mobile UI components |
| Capacitor | ^7.4.2 | Native device APIs |
| NgRx Store | ^18.1.1 | State management |
| NgRx Signals | ^18.1.1 | Signal-based state |
| Socket.io Client | ^4.8.1 | Real-time WebSocket communication |
| Mapbox GL | ^3.15.0 | Interactive maps and routing |
| RxJS | ~7.8.0 | Reactive programming |
| TypeScript | 5.5.4 | Type-safe development |
Native Capabilities (Capacitor Plugins)
@capacitor/geolocation(^7.1.5) - GPS location services@capacitor/app(7.0.1) - App lifecycle events@capacitor/preferences(^7.0.2) - Local storage@aparajita/capacitor-secure-storage(^7.1.6) - Encrypted storage for tokens@capacitor/keyboard(7.0.1) - Keyboard appearance control@capacitor/haptics(7.0.1) - Tactile feedback@capacitor/status-bar(7.0.1) - Status bar styling
Project Architecture
The application follows a modern Angular architecture with:- Standalone components for better tree-shaking and lazy loading
- Feature-based structure with organized modules for tabs, authentication, and trip management
- Facade pattern for clean separation between UI and business logic
- Custom layouts (Default Layout with tabs/sidebar, Map Layout for full-screen maps)
- Route guards with automatic token refresh for protected routes
- HTTP interceptors for authentication and error normalization
The app uses path aliases configured in
tsconfig.json with @/* mapping to src/* for cleaner imports.Environment Configuration
The application requires configuration for:- Backend API URL - REST API endpoint for authentication and trip management
- WebSocket URL - Socket.io connection for real-time updates
- Mapbox Access Token - For maps, directions, and geocoding services
- App Audience - Set to
passenger_appto distinguish from driver apps - Session Type - Supports both
mobileandwebauthentication flows
Getting Started
Ready to run the app? Follow these guides:Quick Start
Get the app running locally in minutes
Installation
Detailed setup with prerequisites and platform configuration
Core Features
Explore authentication, booking, and tracking features
Architecture
Understand the app’s structure and patterns
Next Steps
Explore the documentation to learn more:- Quick Start Guide - Run the app in development mode
- Authentication Flow - Learn about login and session management
- Trip Booking - Understand the ride request process
- Map Integration - Explore Mapbox features
- State Management - Deep dive into NgRx Signals architecture