Travel Booking: Hotel Reservation Project

Travel Booking is a case study of a hotel reservation platform using Next.js and TypeScript on the front-end, with a SQL database and Prisma for the back-end.

• Implemented OAuth for user authentication and Hotels API for retrieving hotel data.
• Utilized Stripe Payments and Webhooks for handling payment transactions and keep a customer booking history.
• Styled the application with Tailwind CSS and integrated MapBox for displaying hotel locations.
• This project allowed me to gain experience with modern web development technologies and practices such as serverless architecture and third-party API integration.

🔗 Open live Demo

Tech Stack

• Next.js
• React.js
• TypeScript
• Tailwind CSS
• Prisma
• CockroachDB (Uses PostgreSQL wire protocol 3.0)
• NextAuth
• Google OAuth
• Hotels API
• Stripe Checkout
• Webhooks
• MapBox

Features

• Responsive UI with Tailwind CSS.
• Hotels search via Hotels API
• Hotel map location with MapBox.
• Payment Checkout flow with Stripe
• Customer Booking History
• Data fetching and caching techniques using SSR (Server Side Rendering) with Next.js.
• User Authentication with NextAuth and Google OAuth.
• Robust code using TypeScript.

Screen Captures

Screenshots

Installation

First, clone the project and open it with Visual Studio Code:

git clone https://github.com/javigong/travel-nextjs-typescript-tailwind-mapbox-calendar-date-picker.git

cd travel-nextjs-typescript-tailwind-mapbox-calendar-date-picker

code .

Then, create a .env.local file in the root of the project and configure the following environment variables:

# Mapbox
NEXT_PUBLIC_MAPBOX_TOKEN=

# Rapidapi, Hotels API
NEXT_PUBLIC_RAPIDAPI_KEY=

# Firebase client
FIREBASE_CLIENT_API_KEY=
FIREBASE_CLIENT_AUTH_DOMAIN=
FIREBASE_CLIENT_PROJECT_ID=
FIREBASE_CLIENT_STORAGE_BUCKET=
FIREBASE_CLIENT_MESSAGING_SENDER_ID=
FIREBASE_CLIENT_APP_ID=

# Authentication
# Need to add Authorized redirect URIs to Google Cloud OAuth Service
# http://localhost:3000/api/auth/callback/google or https://your.deployment.url.com/api/auth/callback/google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# Next Auth
# You can generate the secret via 'openssl rand -base64 32' on Linux
# More info: https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET=
NEXTAUTH_URL=

# Stripe Payments
# More info: https://stripe.com/docs/payments/accept-a-payment
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=

# Stripe Terminal/CLI
STRIPE_SIGNING_SECRET=

To send Stripe events to a local webhook install Stripe CLI, login into your Stripe account, and use the --forward-to flag pointing to the webhook endpoint, and create a trigger for successful customer payments :

brew install stripe/stripe-cli/stripe

stripe login

stripe listen --forward-to localhost:3000/api/webhook

stripe trigger checkout.session.completed

Finally, install the npm dependencies and run the application:

npm install

npm run dev

Now the application is running on http://localhost:3000 🚀

How to test Stripe Checkout

The current Stripe Checkout implementation simulates payments in test mode.

⛔️ Please, do not use real card details. Use the following test card details:

• Use a card number, such as 4242 4242 4242 4242. Enter the card number in the Dashboard or in any payment form.
• Use a valid future date, such as 12/34.
• Use any three-digit CVC (four digits for American Express cards).
• Use any value you like for other form fields.

Deployment details

Travel Bookings deployed using Vercel:

Deployment Activity Log