Skip to content

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

Notifications You must be signed in to change notification settings

John-Weeks-Dev/uber-clone

Repository files navigation

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

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

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

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

You should be good to go!

Application Images

Screenshot 2022-11-23 at 17 10 03 Screenshot 2022-11-23 at 17 11 15 Screenshot 2022-11-23 at 17 12 14