Project case study
ChargeOps Frontend.
Driver app, operator console, and public portal
A frontend monorepo for the ChargeOps ecosystem: an Expo driver app, a multi-role React operations console, a Next.js marketing portal, custom Keycloak themes, and shared API and UI packages. The applications serve drivers, station owners, staff, administrators, and prospective operators across Vietnam.
The problem
A driver reservation must remain consistent across payment, check-in, cancellation, and station operations.
My contribution
Defined domain rules, implemented booking and payment workflows, built driver and management interfaces, and maintained project documentation.
Current scope
Final-year software project with web/mobile surfaces and API integration. Charging telemetry is simulated; this is not evidence of a deployed commercial charging network.
A decision in context.
Choice
Keep booking and refund states explicit. The current policy gives a full refund during the eligible grace period, and no voluntary refund after it. Verified station incidents follow a separate review path.
Verification
Compare a scenario against the current policy and trace its booking, payment, and refund states in the implementation. The earlier tiered 100/50/0 policy is obsolete.
Limits
This case study documents implementation and policy decisions; it does not claim commercial usage or independently measured performance.
Key takeaway
The challenge extends beyond a booking screen: payment states, cancellations, refunds, and permissions all need to agree.
The driver journey.
- 01
Discover a station and inspect connector availability.
- 02
Choose a time slot and complete the reservation and payment flow.
- 03
Check in with the connector QR code during the eligible window.
- 04
Follow session and booking history. Charging telemetry is simulated.
Inside the project.
Project decisions
What went into
the project.
Driver App & Booking Journey
The Expo application supports station discovery with map and connector filters, time-slot reservations, QR check-in, charging-session monitoring, booking history, refund status, and bilingual legal policies.
Owner, Staff & Administrator Console
The React web console separates workflows by role: owners manage stations, pricing, and their ledger; staff handle inspections and incident reports; administrators manage users, station approvals, and escalated disputes.
Shared Contracts & UI Packages
Typed TypeScript API contracts and a shared component library keep common domain models, design tokens, badges, toasts, and responsive patterns consistent across the web applications.
Real-Time Refund & History Updates
The driver client listens for private WebSocket/STOMP notifications. When a refund is pending or processing, adaptive 2.5-second polling keeps the status current and stops when the refund is resolved.
Marketing, Identity & Localization
Separate public surfaces serve marketing, the operator console, and the driver app. The frontend repository also includes custom Keycloak themes and Vietnamese/English localization with Vietnam-time formatting.
Implementation
Tools & systems
- React 19
- Vite
- React Native
- Expo SDK 54
- Next.js App Router
- Tailwind CSS v4
- TanStack Query
- React Router v7
- React i18next
- TypeScript
- Axios