OTaxi — Multilingual Taxi Booking Web Application

OTaxi is a modern taxi booking web application designed to deliver a seamless ride-booking experience for users across multilingual regions. The platform was built with full localization support for English and Arabic, including dynamic RTL (Right-to-Left) layout switching for Arabic to ensure a truly native user experience.

The application focuses on usability, real-time map interaction, and responsive booking workflows, offering a smooth and intuitive transportation booking experience across devices.

Built with React.js, Tailwind CSS, Ant Design, Redux Toolkit, and Google Maps integration, the platform combines performance, scalability, and localization-first architecture. Figma was used as the collaborative design source for the UI implementation workflow.

Building a taxi booking platform goes beyond creating standard booking forms. Transportation applications demand real-time interaction, map visualization, intuitive location workflows, and multilingual accessibility.

Key challenges included:

• Building a smooth ride-booking experience with complex state-driven workflows
• Supporting both LTR (English) and RTL (Arabic) layouts dynamically
• Maintaining UI consistency while switching language and layout direction in real time
• Managing location-based interactions through Google Maps
• Handling trip state management efficiently across multiple booking steps
• Creating a responsive interface for mobile, tablet, and desktop users
• Ensuring scalable frontend architecture for future feature expansion

To solve these challenges, I developed a modular, localization-aware frontend architecture optimized for ride-booking workflows.

The application was designed with a strong focus on speed, UX clarity, and seamless language adaptation.

Core functionality included:

A streamlined booking flow allowing users to:

• Select pickup and drop-off locations
• View route information dynamically
• Estimate ride details
• Confirm bookings through a guided UX flow

Interactive map functionality for location selection and route visualization.

Features included:

• Live location selection
• Pickup/drop pin placement
• Route rendering
• Distance-aware trip workflows
• Location search experience

Full localization support for:

• English
• Arabic

This included:

• Dynamic text translation
• Locale-aware content rendering
• Instant language switching without disrupting the booking experience

One of the key technical implementations was seamless directional layout switching.

When users switch to Arabic:

• Layout direction automatically changes to RTL
• Navigation alignment updates dynamically
• Components adapt to mirrored spacing and alignment
• Forms and UI interactions remain natural for Arabic users

This creates a true native Arabic user experience instead of simple translated content.

Frontend Stack:
React.js
Redux Toolkit
Tailwind CSS
Ant Design
Google Maps API
React Router
Localization/i18n architecture

Architecture Highlights:

• Centralized state management using Redux Toolkit
• Modular component-based architecture
• Reusable UI patterns for rapid scaling
• Localization-first application structure
• RTL-aware design implementation
• Optimized rendering for map-heavy workflows
• Scalable API-ready frontend architecture