Flyone – AI-Powered Travel Booking Ap

Flyone is a premium, AI-powered travel booking mobile application that
aggregates flights, trains, buses, and boats into a single platform. Built
with Flutter for cross-platform deployment, featuring a luxury editorial
design system with dramatic gradient headers, choreographed animations,
and crystal-clear typography.

## The Challenge

The travel industry lacks a unified booking platform that covers all
transport modes with a premium user experience. Existing apps feel
fragmented — separate apps for flights, trains, and buses with
inconsistent design quality. Flyone solves this by bringing everything
together in one beautifully crafted mobile experience.

## What I Built

A complete Flutter mobile app with 13 screens, 102 Dart files, and a
production-grade design system — built entirely using AI-assisted
development with Claude Code (Opus 4.6) and the Superpowers plugin.

### Key Features
- Multi-modal search across flights, trains, buses & boats
- Smart booking flow with interactive seat maps and add-ons
- Digital e-tickets with QR codes and barcodes
- AI chat assistant with conversational travel help
- Real-time vehicle tracking with route visualization
- Payment integration with wallet, BNPL, and promo codes
- Booking management with upcoming/completed/cancelled tabs
- Loyalty program with tier progression
- Push notification system with categorized alerts

### Design System — "Soft Depth"
- Deep Purple (#2D2654) + Teal (#5BCFCF) + Lilac (#D6CCFF) palette
- Poppins (headings) + Inter (body) typography pairing
- Gradient hero headers across all screens
- Floating glass-morphic bottom navigation
- 3-tier shadow system (subtle + elevated)
- Staggered entrance animations with spring press states

## Development Journey — AI-Powered Workflow

This project showcases the power of AI-assisted development using Claude
Code with the Superpowers plugin:

### Phase 1: Planning & Design
- Used the **brainstorming skill** to explore design directions and settle
on "Soft Depth" aesthetic
- Created a detailed design specification with typography scales, color
tokens, and component guidelines
- Used the **writing-plans skill** to produce an 11-task implementation
plan with complete code for every step

### Phase 2: Implementation
- Executed the plan using **subagent-driven development** — dispatching
fresh AI agents per task with two-stage code review (spec compliance +
quality)
- 11 implementation tasks completed sequentially, each verified with
`flutter analyze`
- Foundation-first approach: design tokens → theme → core widgets →
screens

### Phase 3: Visual Overhaul
- Used the **frontend-design skill** to refine typography hierarchy with
specialized styles (display, routeCode, price, overline)
- Applied dramatic gradient hero headers across all 13 screens
- Ran parallel review agents (reuse, quality, efficiency) via the
**/simplify** command
- Extracted constants, deduplicated patterns, and merged redundant
containers

### Phase 4: Polish
- Added bookings list screen with seed data and tabbed status view
- Replaced generic icons with real profile photos
- Fine-tuned animations, press states, and visual hierarchy

## Tech Stack
- **Framework:** Flutter 3.7+ / Dart 3.7+
- **State Management:** Riverpod
- **Navigation:** GoRouter with ShellRoute
- **Animations:** flutter_animate
- **Typography:** Google Fonts (Poppins + Inter)
- **HTTP:** Dio
- **QR Codes:** qr_flutter
- **Images:** cached_network_image

## AI Tools Used
- **Claude Code** (Opus 4.6 with 1M context)
- **Superpowers Plugin** — brainstorming, writing-plans,
subagent-driven-development, executing-plans, code-review, frontend-design
skills
- **Parallel Subagents** — for concurrent implementation and review

## Architecture
Domain-driven feature structure with clean separation:
- Presentation layer (screens + widgets + animations)
- Domain layer (models + Riverpod providers)
- Data layer (mock repositories, ready for real API integration)

## Results
- 13 fully designed screens with consistent premium aesthetic
- 102 Dart files with zero analyzer issues
- Centralized design token system (spacing, shadows, radii, animations)
- Production-ready UI waiting for backend integration