saddamarbaa / uber-clone-app-nex-js

==> Building Uber Clone App with React Js + Next Js + TypeScript + Redux + Tailwind CSS with styled-components + Heroicons + Vercel Hosting + User Authentication (a mobile-friendly)

Uber Clone

Building Uber Clone App with React Js, Next Js, TypeScript

Table of contents

• Author
• Demo
• Technologies
• Contributing
• Status
• Features
• Inspiration
• Support
• Feedback
• Run Locally
• Environment Variables
• Screenshots

Author

@Saddam Arbaa

Technologies

Client:

• React Js
• Next Js
• Redux
• Tailwind CSS with Styled-Components
• Heroicons

Server:

• Vercel Hosting
• Firebase Google Authentication

Demo

LIVE DEMO

Features

• User authentication
• Mapbox Integration

Contributing

Contributions are always welcome!

Support

For support, email [email protected].

Feedback

If you have any feedback, please reach out to me at [email protected]

Twitter https://twitter.com/ArbaaSaddam/

Linkedin. https://www.linkedin.com/in/saddamarbaa/

Github https://github.com/saddamarbaa

Instagram https://www.instagram.com/saddam.dev/

Facebook https://www.facebook.com/saddam.arbaa

Run_Locally

Clone the project

 https://github.com/saddamarbaa/uber-clone-app-nex-js

Go to the project directory

  cd uber-clone-app-nex-js

Install dependencies

  npm install

Start the server

npm run dev
# or
yarn dev

Environment

• To run this project, you will need to create a new project on firebase, setup Firebase google authentication and add the following environment variables to your next.config.js

• API_KEY

• AUTH_DOMAIN

• PROJECT_ID

• STORAGE_BUCKET

• MESSAIN_SENDER_ID

• APPID

• then create a new project on Mapbox and add the following environment variables to your next.config.js

• MAP_BOX_ACCESS_TOKEN

Status

Project is now in progress

Inspiration

Build By Saddam Arbaa Project inspired by [Uber] https://www.uber.com/

Screenshots

Home Page

Confirm Page

LogIn Page

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).