Travel Finder

Travel Finder is a flight search form project implemented using TypeScript, React, React Hook Form, and Tailwind CSS. Upon form submission, it retrieves JSON data and displays it according to the provided design.

Instructions

Installation

1. Clone the repository:

   git clone https://github.com/iibrahim70/travel-finder

2. Navigate to the project directory:

   cd travel-finder

Running the Application

1. Install dependencies:

pnpm i

2. Run the development server:

pnpm dev

Open http://localhost:5173 in your browser to view the application.

Time Spent

I spent approximately 1.30 hours completing this task.

Best Practices

• Utilized TypeScript for full type safety, ensuring robust code.
• Leveraged React and React Hook Form for optimized code structure and performance.
• Used Tailwind CSS for efficient and responsive styling, adhering to modern design principles.
• Followed consistent naming conventions and separated concerns to maintain code clarity and readability.

Project Structure

The project structure is designed with simplicity and clarity in mind, consisting of the following key components:

• Components: This folder contains only two essential components:

  • SearchForm: Responsible for rendering the flight search form.
  • DetailsTable: Displays the retrieved flight details in a tabular format.

• Types: Inside the types folder, an interface has been declared to ensure type safety throughout the project, enhancing robustness and maintainability.

Live Projects

Here are two of my live frontend projects for reference:

• Givers Heaven: A platform connecting donors with those in need during post-disaster relief efforts. Built with React.js and TypeScript and more.
• Frozify: An e-commerce website specializing in selling refrigerators. Built with Next.js and TypeScript and more.

Git Repositories

Explore my top two personal Git repositories:

• Givers Heaven: Frontend repository for the Givers Heaven project.
• Frozify: Frontend repository for the Frozify project.