Uber Taxi: A Cross-Platform Mobile Taxi Booking App

Uber Taxi is a React Native mobile application developed over three days, designed to provide a seamless taxi booking experience for both iOS and Android users. This app integrates advanced features like route mapping, fare estimation, and state management to deliver a user-centric mobile solution.

🚀 Introduction

Uber Taxi is a React Native app for both iOS and Android platforms that allows users to order a taxi. The app is capable of selecting origin and destination points, saving them to the Redux store, displaying them on the map using MapViewDirections and MapView from 'react-native-maps', and calculating the travel time, distance, and fare amount.

✨ Key Features

• 📱 Cross-Platform Compatibility: Built using React Native, the app works seamlessly on both iOS and Android platforms.
• 🚖 Order a Taxi: The primary functionality allows users to book a taxi with ease.
• 📍 Select Origin and Destination: Users can specify their pickup location and desired destination using react-native-google-places-autocomplete for location search and selection.
• 💾 Save Locations: The app saves the user's origin and destination points to the Redux store, ensuring a consistent state throughout the application.
• 🗺️ Interactive Map: Displays the selected route on the map using MapViewDirections and MapView from the react-native-maps library.
• ⏱️ Travel Time, Distance, and Fare Estimation: Calculates and displays the travel time, distance, and fare amount for the user's trip, considering different taxi types with their own fare multipliers.
• 🧭 Navigation: Intuitive navigation setup using @react-navigation/native and @react-navigation/native-stack for seamless screen transitions.
• ⭐ Favorites: Users can save frequently visited places or preferred rides in a favorites section.
• ✅ Feedback & Confirmation: Provides modal confirmation once a ride is booked, indicating that the car is on its way.

🎨 User Interface

• Elegant UI Components: The app utilizes react-native-elements for sleek and user-friendly UI components.
• Icons: Sourced from react-native-vector-icons to enhance the app's visual appeal.
• Responsive Design: The design layout is responsive and elegant, leveraging the twrnc utility for consistent styling.

Pro Tip: The UI is optimized for both iOS and Android, ensuring a seamless experience across devices!

🛠️ Architecture

• React Native Framework: Built with React Native for a single codebase supporting both iOS and Android, ensuring consistency and rapid development.
• State Management - Redux: Wrapped in a Redux Provider, the app uses Redux Toolkit for managing state with reducers and actions, ensuring predictable data flow.
• Navigation: Uses NavigationContainer and createNativeStackNavigator from @react-navigation for stack-based navigation, including HomeScreen and MapScreen.
• User Interface: Incorporates SafeAreaProvider for proper UI rendering, KeyboardAvoidingView for input field accessibility, and StatusBar for consistent platform design.
• Google APIs Integration: Leverages react-native-google-places-autocomplete for location search and react-native-maps for route visualization.
• Styling: Combines inline styling, StyleSheet, and twrnc for a consistent and appealing look.
• Environmental Considerations: Uses react-native-dotenv for secure management of environment variables like Google Maps API keys, with platform-specific logic for iOS and Android.
• Modularity: Structured with separate components (e.g., HomeScreen, MapScreen, RideOptionsCard) for maintainability and scalability.

🧠 Technical Solutions

• Cross-Platform Mobile Development: React Native enables a single codebase for iOS and Android.
• State Management: Redux and Redux Toolkit ensure consistent state management across components.
• Rapid Development & Testing: Expo facilitates quick prototyping and testing.
• Application Navigation: React Navigation manages smooth screen transitions and routing.
• Interactive Maps & Routes Display: React Native Maps and MapViewDirections provide map rendering and route plotting.
• Location Search & Autocomplete: React Native Google Places Autocomplete simplifies location selection.
• User Interface Components: React Native Elements and Vector Icons ensure a consistent and appealing UI.
• Safe UI Rendering: SafeAreaProvider prevents overlap with system UI elements.
• Improved Screen Performance: React Native Screens optimizes performance with native primitives.
• Styling Utility: TWRNC enables rapid and consistent styling.
• Environment Variables Management: React Native Dotenv securely manages API keys.
• Interactive Bottom Sheet: @gorhom/bottom-sheet displays additional content interactively.
• JavaScript Transpilation: Babel ensures compatibility with modern JavaScript features.

Fun Fact: The modular architecture allows for easy feature additions, making Uber Taxi scalable and future-proof!

🛠️ Tech Stack

📷 Gallery

🔗 Links

• GitHub Repository: Uber Taxi
• Live Preview: Uber Taxi

🎉 Conclusion

Uber Taxi, constructed using React Native, embodies a modern approach to mobile application development. By leveraging a combination of powerful libraries and tools, the app ensures a seamless, efficient, and high-quality user experience across both iOS and Android platforms. The integration of Redux for state management solidifies consistent data flow and state predictability, while the use of React Navigation ensures smooth transitions and intuitive navigation flows. Furthermore, the integration of Google APIs facilitates precise and user-friendly location services. The meticulous selection of libraries, from UI components to environment variable management, reflects a keen focus on both the end-user experience and developer efficiency. In essence, Uber Taxi is a testament to the capabilities of today's mobile development technologies and the potential they hold in crafting robust, feature-rich, and user-centric applications.

Dive in, explore the platform, and share your feedback to help shape its future!

Built with ❤️ by Brandon