Setup and initialize a new React project

Set up a React project with TypeScript, Tailwind CSS, and HeroUI.

Building Flight Header Component

Create the flight header with search criteria and navigation.

Building Flight Card Component

Build a flight card showing airline, times, and pricing.

Building Flight List Component

Implement the flight list with loading and empty states.

Building Flight Filter Form Component

Create a filter form for price, airlines, stops, and times.

Building Flight Filter Drawer Component

Build a responsive filter drawer for mobile views.

Building Flight Sort Menu Component

Implement a sort menu for price, duration, and times.

Building Flight Preferences Component

Create a preferences component for saved searches.

Putting It All together

Combine all components into a complete booking page.

UK Flag

Name: Build a Flight Booking UI with React, Tailwind and HeroUI
Author: Vu Nguyen

Build a Flight Booking UI with React, Tailwind and HeroUI

Vu NguyenSoftware Engineer, NAB

This comprehensive tutorial guides you through creating a modern, interactive flight booking page using React and HeroUI. You'll learn how to build reusable components for displaying flight information, implementing advanced filtering and sorting functionalities, and creating a responsive user interface. By the end of this tutorial, you'll have a fully functional flight booking page that showcases best practices in React development and UI/UX design.

Prerequisites

Basic knowledge of React and TypeScript
Familiarity with modern JavaScript concepts
Understanding of component-based architecture in React
Basic knowledge of CSS and Tailwind
Familiarity with package managers (npm or yarn) and command-line interfaces
Basic understanding of form handling and state management in React
(Optional) Experience with HeroUI or similar component libraries is helpful but not required

Before we dive into coding, let's get your project set up.

Prerequisites: Ensure you have Node.js, yarn (or npm) and git installed on your machine.
Clone our starter repo — a minimal React + HeroUI project with everything pre-configured so you can jump straight into building:

git clone https://github.com/upskillsdev/starter-app.git

Install dependencies and start the dev server:

cd starter-app && yarn install

yarn dev

You should see a startup screen at http://localhost:5173/ in your browser. Now head over to src/pages/index.tsx and start building the search flight page by following the sections below.

How the starter project structure will look like:

├── public ├── src # Core source code of the application │ ├── components # Reusable UI elements │ ├── config # Configuration files of the application │ ├── hooks # Custom React hooks for shared logic │ ├── layouts # Page layouts or templates │ ├── pages # Individual pages of the application │ ├── styles # Global or component-specific styles │ ├── types # TypeScript type definitions │ ├── App.tsx # Root component of the application │ ├── main.tsx # Entry point of the application │ ├── provider.tsx # HeroUI Provider component │ ├── vite-env.d.ts # TypeScript declarations for Vite env variables ├── ...other files

Build a Flight Booking UI with React, Tailwind and HeroUI

Vu NguyenSoftware Engineer, NAB

Prerequisites

Basic knowledge of React and TypeScript
Familiarity with modern JavaScript concepts
Understanding of component-based architecture in React
Basic knowledge of CSS and Tailwind
Familiarity with package managers (npm or yarn) and command-line interfaces
Basic understanding of form handling and state management in React
(Optional) Experience with HeroUI or similar component libraries is helpful but not required

Before we dive into coding, let's get your project set up.

Prerequisites: Ensure you have Node.js, yarn (or npm) and git installed on your machine.
Clone our starter repo — a minimal React + HeroUI project with everything pre-configured so you can jump straight into building:

git clone https://github.com/upskillsdev/starter-app.git

Install dependencies and start the dev server:

cd starter-app && yarn install

yarn dev

You should see a startup screen at http://localhost:5173/ in your browser. Now head over to src/pages/index.tsx and start building the search flight page by following the sections below.

How the starter project structure will look like:

Build a Flight Booking UI with React, Tailwind and HeroUI

Section 1: Setup and initialize a new React project with HeroUI

Section 2: Building Flight Header Component

Section 3: Building Flight Card Component

Section 4: Building Flight List Component

Section 5: Building Flight Filter Form Component

Section 6: Building Flight Filter Drawer Component

Section 7: Building Flight Sort Menu Component

Section 8: Building Flight Preferences Component

Section 9: Putting It All Together

Vu Nguyen

Build a Flight Booking UI with React, Tailwind and HeroUI

Section 1: Setup and initialize a new React project with HeroUI

Section 2: Building Flight Header Component

Section 3: Building Flight Card Component

Section 4: Building Flight List Component

Section 5: Building Flight Filter Form Component

Section 6: Building Flight Filter Drawer Component

Section 7: Building Flight Sort Menu Component

Section 8: Building Flight Preferences Component

Section 9: Putting It All Together

Vu Nguyen