Gimme.flights - web app for flight search

Karolis Butvinskas

1

Web Designer

Frontend Engineer

Web Developer

Astro

React

Tailwind CSS

New colorful minimalistic way to find best deals of flights

Gimme Flights showcases a unique design language for flight search interface. The design philosophy centers around three core principles:
Minimalistic Design: The interface strips away unnecessary complexity while maintaining a playful, colorful aesthetic that makes flight searching enjoyable rather than overwhelming. The conversational UI guides users through each step with animated questions and smooth transitions.
Visual Hierarchy: Using a dynamic color-coded pricing system and hierarchical organization (Country → City → Flight), the design helps users quickly identify the best deals. Each flight card provides comprehensive information including total trip cost, duration, and passenger details.
Seamless Interaction: The UI features smooth animations, persistent form state, and real-time flight updates through server-sent events (SSE). Interactive elements like the heart icon for saving flights and the share button for generating shareable links make trip planning collaborative.
The application leverages Astro for optimal performance through partial hydration, TypeScript for type safety and reliable functionality, Tailwind CSS for consistent responsive design, Framer Motion for smooth animations, server-sent events for real-time flight updates, and local storage for persisting user preferences and saved flights.

Lightspeed Performance

Built on a foundation of Astro and React, the application delivers perfect performance through optimal CDN deployment and efficient client-side hydration. TypeScript ensures type safety and reliable functionality throughout the codebase, while Tailwind CSS provides a consistent and responsive design system. The backend efficiently integrates with Ryanair's public API, utilizing server-sent events (SSE) for real-time updates while maintaining fast initial load times.

Flight Management & Sharing

The heart of Gimme Flights lies in its intuitive flight management system. Each flight card presents a comprehensive view of journey, from departure to return, with clear visual indicators for flight duration and pricing. The color-coded pricing system instantly communicates value, with greener hues indicating better deals within search parameters. When user finds an appealing flight, a single tap on the heart icon saves it to the personal collection. The saved flights section provides a clean, organized view of all your shortlisted options, displaying crucial details like total price, passenger count, and exact flight times. The sharing feature transforms trip planning into a collaborative experience. By generating unique links that capture all flight details, including passenger configuration and pricing context, you can easily share potential itineraries with fellow travelers. The saved flights interface includes intuitive removal options and preserves the chronological order of user's selections.

Accessibility & User Experience

The application prioritizes accessibility with keyboard navigation support and screen reader compatibility through semantic HTML and ARIA attributes. The responsive design seamlessly adapts to various screen sizes, ensuring a consistent experience across devices. Users can choose between dark and light themes, with the interface respecting system preferences for optimal viewing comfort.
Like this project
1

Posted Feb 13, 2025

A modern flight search app was built with Astro & React. Features real-time updates, smart weekend planning, perfect Lighthouse scores. https://gimme.flights/

Likes

1

Views

1

Tags

Web Designer

Frontend Engineer

Web Developer

Astro

React

Tailwind CSS

Oaksun Studio Website
Oaksun Studio Website
Architectural Studio Website
Architectural Studio Website
Mobile-Optimized VR Interior Tour Experience
Mobile-Optimized VR Interior Tour Experience