georges/waseel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a0b297285a01ed77d7bb585de9d007c52119b902
waseel/README.md
T

14 KiB
Raw Blame History

Ryde - A Full Stack Uber clone using React Native and Expo

Ryde - A Full Stack Uber clone using React Native and Expo

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits GitHub issues GitHub pull requests

📔 Table of Contents

‼️ Folder Structure

Here is the folder structure of Ryde.

uber-clone/
  |- .eas/
    |-- workflows/
  |- app/
    |-- (api)/
    |-- (auth)/
    |-- (root)/
    |-- _layout.tsx
    |-- +html.tsx
    |-- index.tsx
  |- assets/
  |- components/
    |-- custom-button.tsx
    |-- driver-card.tsx
    |-- google-text-input.tsx
    |-- input-field.tsx
    |-- map.tsx
    |-- oauth.tsx
    |-- payment.tsx
    |-- ride-card.tsx
    |-- ride-layout.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- lib/
    |-- auth.ts
    |-- fetch.ts
    |-- map.ts
    |-- utils.ts
  |- scripts/
    |-- reset-project.js
  |- store/
    |-- index.ts
  |- types/
    |-- image.d.ts
    |-- type.d.ts
  |- .env.example
  |- .env/.env.local
  |- .eslintrc.js
  |- .gitignore
  |- app.json
  |- babel.config.js
  |- bun.lockb
  |- eas.json
  |- environment.d.ts
  |- nativewind-env.d.ts
  |- package.json
  |- tailwind.config.js
  |- tsconfig.json

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env file in root folder.
  4. Contents of .env:
# .env

# clerk publishable key
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE

# postgres db url (neon db)
DATABASE_URL="postgresql://username:password@hostname:port/uber-clone?sslmode=require"

# expo api server url (you can set it to any random url for development)
EXPO_PUBLIC_SERVER_URL="https://example.com/"

# geoapify api key
EXPO_PUBLIC_GEOAPIFY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# google api key
EXPO_PUBLIC_GOOGLE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# areeba payment gateway (credentials issued after merchant onboarding)
AREEBA_API_BASE_URL="https://your-gateway-host.areeba.com"
AREEBA_MERCHANT_ID=your_merchant_id
AREEBA_API_PASSWORD=your_api_password
AREEBA_API_VERSION=100

  1. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

  2. Install Expo Cli using npm i -g expo-cli or yarn global add expo-cli to run your Expo app.

7. Clerk Publishable Key

  • Go to the Clerk Dashboard.
  • Sign in or sign up if you don’t have an account.
  • Create a new application (or select your existing project).
  • Navigate to the "API Keys" section.
  • Copy the Publishable Key that starts with pk_test_.
  • Add it to your .env file:
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE

8. PostgreSQL Database URL (Neon Database)

  • Go to the Neon Dashboard.
  • Sign in or create an account.
  • Create a new project.
  • Once the project is created, go to the "Connection Details" section.
  • Copy the connection string and replace the placeholder values with your actual database credentials.
  • The URL will look something like this:
DATABASE_URL="postgresql://username:password@hostname:port/uber-clone?sslmode=require"

Replace username, password, hostname, and port accordingly.

9. Expo API Server URL

  • This can be any URL during development.
  • Set it to a random URL for local testing:
EXPO_PUBLIC_SERVER_URL="https://example.com/"

10. Geoapify API Key

  • Go to the Geoapify Dashboard.
  • Sign up or log in to your account.
  • Navigate to the "API Keys" section under your profile.
  • Generate a new API key.
  • Copy the key and add it to your .env file:
EXPO_PUBLIC_GEOAPIFY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

11. Google API Key

  • Go to the Google Cloud Console.
  • Create a new project (or use an existing one).
  • Navigate to the "APIs & Services" section and enable the required APIs (Places API, Directions API).
  • Go to the "Credentials" tab and click on "Create Credentials."
  • Select "API Key."
  • Copy the generated API Key and add it to your .env file:
EXPO_PUBLIC_GOOGLE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

12. Areeba Payment Gateway

  • Contact Areeba to open a merchant account (Lebanon).
  • After onboarding, Areeba provides your gateway host, merchant ID, API password, and integration docs.
  • Add them to your .env file:
AREEBA_API_BASE_URL="https://your-gateway-host.areeba.com"
AREEBA_MERCHANT_ID=your_merchant_id
AREEBA_API_PASSWORD=your_api_password
AREEBA_API_VERSION=100
  1. Now app is fully configured 👍 and you can start using this app using expo start.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

Functional Login component Functional Register component

Modern UI/UX Choose a driver

Payment Integration with Stripe Easily Book your ride

⚙️ Tech Stack

React JS Typescript CSS Tailwind CSS Babel

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and libraries that are used in Ryde:

☕ Buy Me a Coffee

🚀 Follow Me

Follow Me Tweet about this project

📚 Learn more

To learn more about developing your project with Expo, look at the following resources:

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)

Reference in New Issue View Git Blame Copy Permalink