https://github.com/john-weeks-dev/uber-clone

This is an Uber Clone made with Vue 3, Tailwind CSS, Node JS, Pinia, and Google Maps
https://github.com/john-weeks-dev/uber-clone

google-authentication google-cloud-platform googlemaps googlemaps-api javascript node nodejs pinia pinia-plugin-persist pwa tailwindcss uber uber-clone vue vue3-google-signin vuejs

Last synced: 7 months ago
JSON representation

This is an Uber Clone made with Vue 3, Tailwind CSS, Node JS, Pinia, and Google Maps

• Host: GitHub
• URL: https://github.com/john-weeks-dev/uber-clone
• Owner: John-Weeks-Dev
• Created: 2022-11-12T14:57:16.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-21T01:56:04.000Z (over 1 year ago)
• Last Synced: 2024-12-07T16:41:05.260Z (over 1 year ago)
• Topics: google-authentication, google-cloud-platform, googlemaps, googlemaps-api, javascript, node, nodejs, pinia, pinia-plugin-persist, pwa, tailwindcss, uber, uber-clone, vue, vue3-google-signin, vuejs
• Language: Vue
• Homepage: https://youtube.com/watch?v=zXpr8zaK2eA
• Size: 909 KB
• Stars: 32
• Watchers: 2
• Forks: 22
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Uber Clone (uber-clone)

### Tutorial series on how to build this

If you'd like a step by step guide on how to build this just **CLICK THE IMAGE BELOW**

[![GO TO JOHN WEEKS DEV TUTORIAL VIDEOS](https://user-images.githubusercontent.com/108229029/203519788-671b6891-e2fb-4a68-8418-2d359df54acc.jpeg)](https://www.youtube.com/watch?v=zXpr8zaK2eA)

Come and check out my YOUTUBE channel for lots more tutorials -> https://www.youtube.com/@johnweeksdev

**LIKE**, **SUBSCRIBE**, and **SMASH THE NOTIFICATION BELL**!!!

## App Setup

Clone the repository

```

git clone https://github.com/John-Weeks-Dev/uber-clone.git

```

Open a terminal, CD in to the folder and run these commands

```

npm i

cp .env.example .env

```

Now go to https://console.cloud.google.com/

Generate an API KEY.

You'll need to ENABLE Maps API, Directions API, Places API, and Distance Matrix API.

Add your new API KEY to the script inside **public/index.html**

![Screenshot 2022-11-23 at 17 40 53](https://user-images.githubusercontent.com/108229029/203526600-42f9f3be-6e9d-4fcc-aff0-5d6c6c7e8d87.png)

Now run this command to start the project 

```

npm run serve

```

And to start in PWA mode run the command

```

npm run pwa

```

![Screenshot 2022-11-23 at 17 44 01](https://user-images.githubusercontent.com/108229029/203527683-4b43f88e-07d8-4e2a-bfad-9a785afed02f.png)

Open another terminal

```

cd server

npm i

cp .env.example .env

```

Add the Google API Key to the .env

```

GOOGLE_MAPS_API_KEY=keyhere

npm run watch

```

![Screenshot 2022-11-23 at 17 53 00](https://user-images.githubusercontent.com/108229029/203529049-d7790bc7-0d0e-4b20-80d5-9cea46017c57.png)

You should be good to go!

# Application Images