Build a Taxi Booking App with Next.js 13, TypeScript, and Mapbox API

Ready to build your own taxi booking application? This article walks you through the process of creating a beautiful and functional app using Next.js 13, TypeScript, Tailwind CSS, Mapbox API, and Clerk for authentication. The following content is based on an accompanying video showing the full process.

This guide covers the essential steps to develop a taxi booking application from scratch. You’ll learn how to integrate Clerk for user authentication, design the user interface with Tailwind CSS, and utilize the Mapbox API for geocoding, routing, and displaying interactive maps. We’ll also delve into Next.js 13’s app router, API endpoint creation, and database integration to build a complete and robust taxi booking platform.

Setting Up Your Next.js 13 Project

The foundation of our taxi booking app is Next.js 13. Next.js provides a robust framework for building performant and scalable web applications. Here’s how to get started:

First, ensure you have Node.js installed. Then, open your terminal and navigate to the desired directory for your project. Use the following command to create a new Next.js 13 project:

npx create-next-app@latest

The CLI will prompt you with a series of questions. Let’s walk through the recommended answers:

• Project Name: Choose a descriptive name, such as “taxi-go”.
• TypeScript: Select “Yes” to leverage the benefits of static typing.
• ESLint: Choose “No” for now.
• Tailwind CSS: Select “Yes” to integrate Tailwind CSS for styling.
• Source Directory: Choose “No”.
• App Router: Select “Yes” to use the new App Router feature in Next.js 13.
• Customize default import aliases: Choose “No”.

This setup configures your project with the essential tools and structure for building a modern web application. The App Router is a significant update in Next.js 13, offering a more flexible and powerful way to define routes and layouts.

User Authentication with Clerk

Secure user authentication is crucial for any taxi booking app. Clerk simplifies this process by providing pre-built UI components and backend services for user management, authentication, and authorization.

Integrating Clerk involves the following steps:

• Create a Clerk Account: Sign up for a free account at clerk.com.
• Create a New Application: In the Clerk dashboard, create a new application and select the desired authentication methods (e.g., Google, email).
• Install the Clerk SDK: Add the Clerk SDK to your Next.js project using npm or yarn: npm install @clerk/nextjs or yarn add @clerk/nextjs.
• Configure Environment Variables: Clerk provides environment variables that you need to set in your `.env.local` file. These variables contain your Clerk application ID and API keys.
• Wrap Your Application: Wrap your Next.js application with the `` component to enable Clerk’s authentication features.
• Use the `` and `` Components: Add the `` and `` components to your authentication pages to provide users with a seamless login/registration experience.

Clerk handles the complexities of user authentication, allowing you to focus on building the core features of your taxi booking app. You can easily customize the UI of the authentication components to match your app’s design.

Designing the User Interface with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables you to rapidly prototype and build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements directly.

Key benefits of using Tailwind CSS:

• Rapid Development: Quickly style elements without writing custom CSS.
• Consistency: Enforce a consistent design language across your application.
• Customization: Easily customize the default Tailwind CSS configuration to match your brand.
• Responsive Design: Use responsive modifiers to create layouts that adapt to different screen sizes.

For the taxi booking app, you can use Tailwind CSS to create the following UI elements:

• Navigation Bar: A responsive navigation bar with links to different sections of the app.
• Booking Form: A form for users to enter their pickup and destination addresses.
• Map Display: A map that displays the user’s current location, pickup location, and destination.
• Car Selection: A list of available car types with their corresponding prices.
• Payment Options: A selection of payment methods for users to choose from.

Tailwind CSS simplifies the process of creating a visually appealing and user-friendly interface for your taxi booking application.

Integrating Mapbox API for Geocoding and Routing

Mapbox API provides powerful tools for integrating maps, geocoding, and routing into your application. For the taxi booking app, we’ll use Mapbox to:

• Display a Map: Show an interactive map that users can pan and zoom.
• Geocoding: Convert addresses into geographic coordinates (latitude and longitude).
• Reverse Geocoding: Convert geographic coordinates into addresses.
• Routing: Calculate the optimal route between two points and display it on the map.
• Display Markers: Add markers to the map to indicate the user’s location, pickup location, and destination.

To integrate Mapbox API:

• Create a Mapbox Account: Sign up for a free account at mapbox.com.
• Get an API Key: Obtain an API key from the Mapbox dashboard.
• Install the Mapbox GL JS Library: Add the Mapbox GL JS library to your Next.js project using npm or yarn: npm install mapbox-gl or yarn add mapbox-gl.
• Configure the Map: Create a Mapbox map instance in your React component and configure it with your API key, initial coordinates, and zoom level.
• Use the Geocoding and Routing APIs: Use the Mapbox Geocoding and Routing APIs to perform address lookups and route calculations.

Mapbox API provides a comprehensive set of tools for integrating mapping and location-based services into your taxi booking app.

Building API Endpoints with Next.js 13

Next.js 13’s App Router simplifies the creation of API endpoints. You can define API routes within the app/api directory. Each file in this directory corresponds to an API endpoint.

For the taxi booking app, you might need the following API endpoints:

• `/api/geocode`: An endpoint to handle geocoding requests (converting addresses to coordinates).
• `/api/reverse-geocode`: An endpoint to handle reverse geocoding requests (converting coordinates to addresses).
• `/api/route`: An endpoint to calculate the route between two points.
• `/api/bookings`: An endpoint to handle booking requests (creating, reading, updating, and deleting bookings).

To create an API endpoint, create a new file in the app/api directory (e.g., app/api/geocode/route.ts). Inside this file, define the HTTP methods you want to support (e.g., GET, POST, PUT, DELETE). Each method should be a separate function that handles the corresponding request.

Example API endpoint for geocoding:

typescript // app/api/geocode/route.ts import { NextRequest, NextResponse } from ‘next/server’;

export async function GET(request: NextRequest) { const address = request.nextUrl.searchParams.get(‘address’);

if (!address) { return NextResponse.json({ error: ‘Address is required’ }, { status: 400 }); }

// Call the Mapbox Geocoding API const response = await fetch(https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=YOUR_MAPBOX_API_KEY); const data = await response.json();

return NextResponse.json(data); }

This example demonstrates how to create a simple API endpoint that accepts an address as a query parameter and returns the geocoding results from the Mapbox API.

Key Takeaways

• Next.js 13 App Router: Leverage the new App Router for efficient routing and layout management.
• Clerk Authentication: Simplify user authentication with Clerk’s pre-built components and backend services.
• Tailwind CSS Styling: Rapidly prototype and build custom UIs with Tailwind CSS’s utility-first approach.
• Mapbox API Integration: Integrate maps, geocoding, and routing with Mapbox API’s powerful tools.
• API Endpoint Creation: Build API endpoints with Next.js 13’s App Router for handling data requests.

Frequently Asked Questions

What are the benefits of using Next.js 13 for this project?

Next.js 13 offers several advantages, including improved performance, simplified routing with the App Router, built-in support for TypeScript, and easy API endpoint creation.

Do I need to pay for Clerk and Mapbox API?

Both Clerk and Mapbox API offer free tiers with usage limits. Depending on your application’s needs, you may need to upgrade to a paid plan.

Can I use a different CSS framework instead of Tailwind CSS?

Yes, you can use other CSS frameworks or write custom CSS. However, Tailwind CSS is recommended for its rapid development capabilities and consistent design language.

What database should I use to store booking data?

You can use any database that is compatible with Next.js, such as MongoDB, PostgreSQL, or MySQL. The choice depends on your specific requirements and preferences.

Building a taxi booking application with Next.js 13, TypeScript, Tailwind CSS, and Mapbox API is an exciting project that combines various technologies. By following the steps outlined in this article, you can create a functional and visually appealing app that meets the needs of your users. Remember to leverage the power of each technology to build a robust and scalable platform. Happy coding!

Credit: Creator

Credit: Writer

Credit: Reviewer