Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iibrahim70/travel-finder
Travel Finder is an flight search form powered by TypeScript, React, React Hook Form, and Tailwind CSS. It efficiently retrieves JSON data upon submission, providing users with quick access to flight details.
https://github.com/iibrahim70/travel-finder
react-hook-form react-js react-select tailwind-css typescript
Last synced: 7 days ago
JSON representation
Travel Finder is an flight search form powered by TypeScript, React, React Hook Form, and Tailwind CSS. It efficiently retrieves JSON data upon submission, providing users with quick access to flight details.
- Host: GitHub
- URL: https://github.com/iibrahim70/travel-finder
- Owner: iibrahim70
- Created: 2024-05-12T13:58:09.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-05-13T15:53:18.000Z (5 months ago)
- Last Synced: 2024-09-18T03:14:39.476Z (15 days ago)
- Topics: react-hook-form, react-js, react-select, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://travel-finder.netlify.app/
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/iibrahim70/travel-finder
```
2. Navigate to the project directory:
```bash
cd travel-finder
```
### Running the Application
1. Install dependencies:
```bash
pnpm i
```
2. Run the development server:
```bash
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](https://givers-heaven.netlify.app/): A platform connecting donors with those in need during post-disaster relief efforts. Built with React.js and TypeScript and more.
- [Frozify](https://frozify.netlify.app/): 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](https://github.com/iibrahim70/givers-heaven-client): Frontend repository for the Givers Heaven project.
- [Frozify](https://github.com/iibrahim70/frozify-client): Frontend repository for the Frozify project.