Tomokichi's Engineering Growth Log Tomokichi
JA

Works

Tabidea

An AI travel planner that combines automatic itinerary generation with user adjustments, supporting the entire journey from planning to post-trip reflection.

Status
active
Category
app
Stack
Next.js, TypeScript, Tailwind CSS, Supabase, Gemini API, OpenAI API, Google Maps API, Netlify, Cloud Run, Lighthouse CI

Key Highlights

  • App experience optimized specifically for travel planning beyond general-purpose chat AI
  • UX designed for seamless manual editing and re-adjustment of AI proposals
  • Holistic journey design covering pre-trip, during-trip, and post-trip phases

Overview

Tabidea is a travel planning app where AI suggests itinerary drafts based on destination, duration, budget, companions, and themes. Rather than presenting a final plan, it allows users to manually edit or refine specific parts through a chat-based AI consultation.

Background

While travel is meant for enjoyment, much time is often consumed by research and coordination. Tabidea aims to assist with these tedious tasks through AI, allowing users to enjoy the planning process and focus on the actual travel experience.

Challenges Solved

User Challenges

Reducing the burden of detailed tasks like finding spots, checking hours, and calculating travel times through AI, allowing users to focus on 'where to go' and 'how to enjoy'.

Technical Challenges

Ensuring accuracy regarding spot existence, opening hours, and regional distance, while presenting information in a structured data format that humans can easily edit.

Operational Challenges

Establishing an improvement cycle where generation results are continuously scored and evaluated to refine prompts and UI.

Main Features

  • AI Itinerary Suggestions : Generates plans based on travel preferences
  • Chat-based Refinement : Regenerate specific parts by consulting with AI
  • Waiting UX to Build Excitement : Displays tips and visualizes progress
  • Continuous Quality Improvement : Scoring and evaluation infrastructure in admin panel

Responsibilities

  • Planning & Concept Design
  • UI/UX Design
  • Frontend Implementation (Next.js)
  • AI Generation Logic & Infrastructure Design (Cloud Run)
  • Design & Operation of Quality Evaluation Flow

Tech Stack

Frontend

  • Next.js
  • TypeScript
  • Tailwind CSS

Backend / API

  • Netlify Functions
  • Cloud Run

Database / Auth

  • Supabase Auth
  • Supabase Database

Infrastructure / Hosting

  • Netlify
  • Cloud Run

Tooling

  • Lighthouse CI
  • Gemini API
  • OpenAI API
  • Google Maps API

System Architecture

Decoupled Next.js frontend from a generation API on Cloud Run. Built a system to score results in an admin panel to drive an evaluation and improvement cycle.

User
 ↓
Next.js App
 ↓
Generation API
 ↓
Gemini API / OpenAI API / Google Maps API
 ↓
Supabase
 ↓
Admin / Scoring / Quality Improvement

Technical Refinements

Planning Experience Beyond General Chat AI

Designed the experience to treat AI output not as mere text, but as structured itinerary data that can be manually edited, saved, and refined.

Continuous Quality Improvement System

Built a workflow to score results in the admin panel and test improvements, allowing continuous refinement of prompts and logic.

Accuracy-Focused Suggestion Logic

Integrates with APIs like Google Maps to consider spot existence, hours, and travel feasibility for practical itineraries.

UI/UX Design Considerations

  • Tips and progress indicators to turn waiting time into excitement
  • Designed with 'margin' for users to adjust plans to their liking
  • Mobile-friendly itinerary editing interface

Performance, SEO & Accessibility

  • Automated quality checks using Lighthouse CI
  • Interactive UI to improve perceived speed during generation wait times
  • Accessibility compliance through semantic HTML and appropriate ARIA attributes

Security & Privacy

  • Design that avoids storing itinerary data in plaintext (unreadable even by operators)
  • Isolation of execution environments handling sensitive information
  • Commitment to data minimization and Privacy by Design

Difficulties & Improvements

Challenge

Ensuring accuracy of AI suggestions (spot existence and hours)

Solution

Refined prompt engineering to control AI behavior and enhanced validation with external APIs

Result

Accurate itinerary suggestions suitable for real-world travel

Challenge

User drop-off during generation wait times

Solution

UX improvements through travel tips and detailed progress visualization

Result

Transformed wait time into anticipation, maintaining high user retention

What I Learned

  • In AI apps, input and UX design affect output quality as much as prompts do
  • The value of AI lies not just in generation, but in how easily users can adjust the output
  • A continuous evaluation and improvement cycle is vital for AI product growth

Future Plans

  • Further improving the accuracy and reliability of itineraries
  • Real-time adjustment features based on changing conditions during travel
  • Expanding the experience from post-trip reflection to next-trip inspiration

No related articles yet.