uber-clone/
  |- app/
    |-- (api)/
    |-- (auth)/
    |-- (root)/
    |-- _layout.tsx
    |-- +html.tsx
    |-- index.tsx
  |- assets/
    |-- fonts/
    |-- icons/
    |-- images/
  |- 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
  |- .env.example
  |- .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

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root folder.
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

# stripe api key
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE
STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE

Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
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. Stripe API Keys

Go to the Stripe Dashboard.
Log in or sign up for an account.
Navigate to the "Developers" section, then "API Keys."
Copy the Publishable Key (starts with pk_test_) and Secret Key (starts with sk_test_).
Add them to your .env file:

EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE
STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE

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:

⚙️ Tech Stack

🙌 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

📚 Learn more

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

Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

⭐ Give A Star

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

🌟 Star History

(back to top)

README.md Unescape Escape

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

📔 Table of Contents

‼️ Folder Structure