Kinetic Route Comparison Engine
(AetherWays uses a striking industrial brutalist design language)
AetherWays is an intelligent, multi-modal travel planning application. Instead of just showing flights, it compares flights, trains, buses, and self-drive options in real-time, calculating price and duration.
I built this to experiment with blending high-performance software engineering with kinetic UI/UX design. The interface moves away from generic clean aesthetics towards an "Industrial Brutalism meets High-Tech Data Terminal" vibe—characterized by sharp geometry, striking typography, high contrast (pure black and electric lime), and fast, aggressive motion.
Live Site: https://asmithcodes.github.io/AetherWay-Travel-Planning/
- Frontend Framework: React 19 + TypeScript — for a robust, type-safe application shell.
- Build Tool: Vite — for lightning-fast HMR and optimized production builds.
- Styling: Tailwind CSS — used extensively for the brutalist design system (borders, raw colors, rigid spacing).
- Animation: Framer Motion — powering the complex view-state transitions and micro-interactions.
- AI Integration: Google Gemini API (
@google/genai) — processes user inputs and generates grounded, realistic route data. - Auth & Database: Supabase — handles secure user identity and stores saved route vectors/history.
- State Management: Zustand — for lightweight, boilerplate-free global state.
- Charts: Recharts — customized to fit the brutalist aesthetic for price/duration visualization.
- API Security: Cloudflare Workers — proxies the Google Gemini API requests to keep the API key secure on the fully static frontend deployment.
To run this project locally, you will need Node.js 20+, a Supabase account, and a Google Gemini API key.
# Clone the repository
git clone https://github.com/Asmithcodes/AetherWay-Travel-Planning.git
cd AetherWay-Travel-Planning
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local with your credentials:
# VITE_SUPABASE_URL=...
# VITE_SUPABASE_ANON_KEY=...
# VITE_WORKER_URL=... (or GEMINI_API_KEY if testing locally without the proxy)
# Start the dev server
npm run devThe UI Architecture: The application operates as a single-page view-state router (landing → explore → favorites → history). Transitions between these states use Framer Motion with carefully tuned, aggressive cubic-beziers to simulate the feel of a high-tech terminal switching contexts.
The API Proxy: Because this is a static frontend deployed to GitHub Pages, embedding the Google Gemini API key directly in the client would be a security risk. To solve this, I built a Cloudflare Worker (/cloudflare-worker). The frontend pings the Worker, and the Worker (which safely holds the secret key) makes the actual request to Google, returning the AI-generated routes to the client.
- Commitment to Aesthetic: Building an explicitly "brutalist" UI meant resisting the urge to round corners or use soft shadows. It required discipline to stick to harsh 1px borders, pure hex colors, and monospaced typography (
JetBrains Mono). - Edge Deployment: Setting up the Cloudflare Worker proxy was a great exercise in securing serverless, edge-deployed frontends. It's a highly scalable pattern that costs virtually nothing to run.
- Add direct booking deep-links for major airlines and rail carriers.
- Implement an interactive map view drawing the actual vector paths of the AI-generated routes.
- Add an "export to PDF/Terminal receipt" feature for saved routes.
MIT License.
Developed by Asmith
📧 asmyth@duck.com