Travel Labs

A UX experimentation platform for airline upgrade experiences.

Live at: codefirst.design

Overview

Travel Labs is a password-protected laboratory for testing innovative UX patterns that transform how travelers upgrade their flights.

Features

• Public landing page - Introduces the lab concept
• Password-protected experiments - Secure access to all experiments
• Experiments dashboard - Browse all available experiments
• Individual experiment pages - Deep dive into each concept

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Deployment: Vercel

Getting Started

npm install
npm run dev

Open http://localhost:3000

Password Protection

The experiments section is protected with a simple password system.

Default password: travellabs2024

To change the password, edit the LAB_PASSWORD constant in: app/experiments/layout.tsx

For production, consider using environment variables:

const LAB_PASSWORD = process.env.LAB_PASSWORD || 'fallback'

Adding New Experiments

1. Add the experiment to the list in app/experiments/page.tsx
2. Add experiment data to app/experiments/[slug]/page.tsx
3. Create the interactive prototype in the experiment page

Deployment

1. Push to GitHub
2. Import to Vercel
3. Add custom domain: codefirst.design

Project Structure

travel-labs/
├── app/
│   ├── page.tsx              # Public landing page
│   ├── layout.tsx            # Root layout
│   ├── globals.css           # Global styles
│   └── experiments/
│       ├── layout.tsx        # Auth wrapper + sidebar
│       ├── page.tsx          # Experiments dashboard
│       └── [slug]/
│           └── page.tsx      # Individual experiment pages
└── public/

Design

Inspired by Vercel's aesthetic:

• Dark theme with subtle gradients
• Clean typography (Inter + JetBrains Mono)
• Grid background pattern
• Glowing card effects
• Color-coded badges by category

License

Private project.