├── .gitignore
├── README.md
├── app
├── api
│ └── create-intent
│ │ └── route.tsx
├── favicon.ico
├── globals.css
├── layout.js
├── page.js
├── payment-confirm
│ └── page.js
├── payment
│ └── page.js
├── sign-in
│ └── [[...sign-in]]
│ │ └── page.js
└── sign-up
│ └── [[...sign-up]]
│ └── page.js
├── components
├── Header.js
└── Home
│ ├── CarListItem.js
│ ├── CarListOptions.js
│ ├── CheckoutForm.js
│ ├── GoogleMapSection.js
│ ├── InputItem.js
│ └── SearchSection.js
├── context
├── DestinationContext.js
└── SourceContext.js
├── jsconfig.json
├── middleware.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── Black_v1.png
├── UberComfort.png
├── UberXL_New.png
├── UberX_Pet.png
├── UberX_v1.png
├── box.jpeg
├── dest.png
├── logo.png
├── next.svg
├── source.png
├── taxi.jpeg
├── uberbanner.jpeg
├── uberconfirm.gif
└── vercel.svg
├── tailwind.config.js
├── tsconfig.json
└── utils
└── CarListData.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 |
--------------------------------------------------------------------------------
/app/api/create-intent/route.tsx:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 | import Stripe from "stripe"
3 | const stripe =new Stripe(process.env.STRIPE_SECRET_KEY!,{
4 | typescript:true,
5 | apiVersion:"2023-10-16"
6 | })
7 |
8 | export async function POST(request:any) {
9 | const data:any=await request.json();
10 | const amount=data.amount;
11 |
12 | try{
13 | const paymentIntent=await stripe.paymentIntents.create({
14 | amount:Number(amount)*100,
15 | currency:'USD'
16 | })
17 |
18 | return NextResponse.json(paymentIntent.client_secret,{status:200})
19 | }
20 | catch(error:any)
21 | {
22 | return new NextResponse(error,{
23 | status:400
24 | })
25 | }
26 |
27 | }
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/uber-clone-web-nextjs13/6aea2419eca338d715599139132950d8d3a45e6d/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 |
7 | }
8 |
9 | @media (prefers-color-scheme: dark) {
10 | :root {
11 | --foreground-rgb: 255, 255, 255;
12 | --background-start-rgb: 0, 0, 0;
13 | --background-end-rgb: 0, 0, 0;
14 | }
15 | }
16 |
17 | body {
18 | color: rgb(var(--foreground-rgb));
19 | background: linear-gradient(
20 | to bottom,
21 | transparent,
22 | rgb(var(--background-end-rgb))
23 | )
24 | rgb(var(--background-start-rgb));
25 | }
26 |
--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
1 | import { Inter,Montserrat } from 'next/font/google'
2 | import './globals.css'
3 | import { ClerkProvider } from '@clerk/nextjs'
4 | import Header from '../components/Header'
5 |
6 | const inter = Montserrat({ subsets: ['latin'] })
7 |
8 | export const metadata = {
9 | title: 'Create Next App',
10 | description: 'Generated by create next app',
11 | }
12 |
13 | export default function RootLayout({ children }) {
14 | return (
15 |
16 |
17 |
18 |
19 | {children}
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import GoogleMapSection from './../components/Home/GoogleMapSection'
4 | import SearchSection from './../components/Home/SearchSection'
5 | import { DestinationContext } from './../context/DestinationContext'
6 | import { SourceContext } from './../context/SourceContext'
7 | import { UserButton } from '@clerk/nextjs'
8 | import { LoadScript, useJsApiLoader } from '@react-google-maps/api'
9 | import Image from 'next/image'
10 | import { useState } from 'react'
11 | import GooglePlacesAutocomplete from 'react-google-places-autocomplete'
12 |
13 | export default function Home() {
14 | const [source,setSource]=useState([])
15 | const [destination,setDestination]=useState([])
16 | // const { isLoaded } = useJsApiLoader({
17 | // id: 'google-map-script',
18 | // googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY
19 | // })
20 | return (
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
13 |
Payment Confimed
14 |
19 | Uber is Booked Successfully
21 |
25 |
26 | )
27 | }
28 |
29 | export default PaymentConfirmation
--------------------------------------------------------------------------------
/app/payment/page.js:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { Elements } from '@stripe/react-stripe-js';
3 | import { loadStripe } from '@stripe/stripe-js';
4 | import { useSearchParams } from 'next/navigation'
5 | import CheckoutForm from './../../components/Home/CheckoutForm'
6 | import React from 'react'
7 |
8 | function Payment() {
9 | const searchParam=useSearchParams();
10 | const amount=searchParam.get('amount');
11 |
12 | const stripePromise=loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHER_KEY);
13 | const options={
14 | mode:'payment',
15 | amount:Math.round(amount*100),
16 | currency:'usd'
17 | }
18 | return (
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | export default Payment
--------------------------------------------------------------------------------
/app/sign-in/[[...sign-in]]/page.js:
--------------------------------------------------------------------------------
1 | import { SignIn } from "@clerk/nextjs";
2 | import Image from "next/image";
3 |
4 | export default function Page() {
5 | return (
6 | <>
7 |
8 |
10 |
11 |
12 |
13 |
14 |
24 |
25 |
route.push('/')} />
29 |
30 | {headerMenu.map((item)=>(
31 |
32 |
34 | {item.name}
35 |
36 | ))}
37 |
39 |
40 |
7 |
8 |
9 |
11 |
12 |
14 | {car.name}
15 |
16 |
18 | {car.seat}
19 |
20 |
21 |
{car.desc}
22 |
24 |
25 | ${(car.amount*distance).toFixed(2)}
26 |
27 |
12 |
Recommeded
13 | {CarListData.map((item, index)=>(
14 |
{setActiveIndex(index);
20 | setSelectedCar(item)}}
21 | >
22 |
23 |
24 | ))}
25 |
26 | {selectedCar?.name?
29 |
Make Payment For
30 |
35 | :null}
36 |
40 |
Amount to Pay: {amount}
41 |
47 |
106 |
{source.label}
107 |
127 |
{destination.label}
128 |
49 |
50 |
51 | {getLatAndLng(place,type);
55 | setValue(place)},
56 | placeholder:placeholder,
57 | isClearable:true,
58 | className:'w-full',
59 | components:{
60 | DropdownIndicator:false
61 | },
62 | styles:{
63 | control: (provided) => ({
64 | ...provided,
65 | backgroundColor:'#00ffff00',
66 | border:'none'
67 | }),
68 | }
69 | }}
70 | />
71 |
72 |
73 | )
74 | }
75 |
76 | export default InputItem
--------------------------------------------------------------------------------
/components/Home/SearchSection.js:
--------------------------------------------------------------------------------
1 | "use client"
2 | import React, { useContext, useEffect, useState } from 'react'
3 | import InputItem from './InputItem'
4 | import { SourceContext } from '../../context/SourceContext';
5 | import { DestinationContext } from '../../context/DestinationContext';
6 | import CarListOptions from './CarListOptions';
7 |
8 | function SearchSection() {
9 | const {source,setSource}=useContext(SourceContext);
10 | const {destination,setDestination}=useContext(DestinationContext);
11 | const [distance,setDistance]=useState();
12 | const calculateDistance=()=>{
13 | console.log()
14 | const dist=google.maps.geometry.spherical.computeDistanceBetween(
15 | {lat:parseFloat(source.lat),lng:parseFloat(source.lng)},
16 | {lat:parseFloat(destination.lat),lng:parseFloat(destination.lng)}
17 | )
18 |
19 | console.log(dist*0.000621374);
20 | setDistance(dist*0.000621374)
21 | }
22 | return (
23 |
24 |
25 |
26 |
28 |
Get a ride
29 |
30 |
31 |
32 |
36 |
37 | {distance?
:null}
38 |