Skip to content

omarashzeinhom/uberclone-ionic-react-ts-firebase

Repository files navigation

Uber Clone App with Ionic 6, React, and Firebase

Introduction

Welcome to the Uber Clone App built using Ionic 6, React, TypeScript, and Firebase. This project aims to replicate some of the core functionalities of the Uber app, allowing users to request rides, calculate prices, and authenticate securely using Firebase.

Features

  • Confirm Page: Users can confirm their ride details.
  • Map Integration: Random points are plotted on the map for pickup and drop-off locations.
  • Marker Placement: Pickup and drop-off locations are marked on the map.
  • Navigation: Seamless navigation between different pages.
  • Price Calculation: Prices for rides are dynamically calculated.
  • Login Page: Users can authenticate securely.
  • Firebase Integration: Firebase is utilized for authentication and potentially other functionalities.

Installation

This project uses Yarn as the package manager. Make sure you have Yarn installed on your system. Run the following command to install dependencies:

yarn install

Dependencies

  • Sass: A CSS preprocessor to enhance styling capabilities.

    yarn add sass
  • Mapbox GL JS: For interactive and customizable maps.

    yarn add mapbox-gl

Usage

  1. Clone the repository to your local machine.
  2. Install dependencies using yarn install.
  3. Follow the Firebase setup instructions to integrate Firebase with the app.
  4. Run the app using the appropriate command for your development environment.

References

  • Ionic Documentation: For Ionic-specific functionality and components.
  • React Router Documentation: For navigation and routing in React applications.
  • TypeScript Documentation: For implementing type safety and enhancing code quality.
  • Firebase Documentation: For integrating Firebase services like authentication and database.

Tasks

  • Add navigation between pages.
  • Implement price calculation logic.
  • Create a login page for authentication.
  • Integrate Firebase services.
  • Implement TypeScript for type safety.
  • Secure routes using router guards.
  • Enable social authentication using Firebase.
  • Access authenticated user globally across the app.

Conclusion

This Uber Clone App serves as a starting point for building your own ride-sharing application. With features like map integration, authentication, and price calculation, it provides a solid foundation for further development and customization. Feel free to contribute, extend, or modify according to your project requirements.

Happy coding! 🚀