Travel slower. Feel deeper. Discover more.
Triply reimagines the way we explore the world by combining AI-powered personalization with the emerging trend of calm travel (calmcations). Instead of overwhelming tourists with endless options, we create mindful, stress-free journeys that prioritize:
- 🌊 Meaningful experiences over tourist traps
- 🌱 Eco-conscious choices and sustainability
- 💆 Mental well-being and reduced travel stress
- 🎭 Cultural immersion with local communities
- ⏱️ Slow travel philosophy - quality over quantity
Modern travel planning is:
- Overwhelming: Too many choices lead to decision fatigue
- Stressful: Tight schedules and crowded attractions
- Impersonal: Generic recommendations ignore individual needs
- Unsustainable: Environmental impact often ignored
- Surface-level: Missing authentic cultural exchanges
Triply is an AI-powered travel planner that creates personalized "calm routes" based on:
- Mood Detection - Relax, Culture, or Adventure vibes
- AI-Powered Curation - Smart itineraries with emotional insights
- Stress Metrics - Noise levels, crowd data, eco-scores
- Mindful Pacing - Built-in breaks and reflection time
- Local Connections - Authentic experiences, not tourist traps
Inspired by Apple's minimalist aesthetic and the Calm app's peaceful UX:
- Clean, spacious layouts with generous white space
- Smooth, natural animations (Framer Motion)
- Emotional language and empathetic copy
- Focus on feelings, not just features
- Premium, polished experience
- Frontend: React 19 + Vite
- Router: React Router v6
- Animations: Framer Motion
- Icons: Lucide React
- Styling: CSS Modules + CSS Variables
- Geocoding: Geoapify API (location search)
src/
├── pages/ # 🏠 Route-level components (Views)
│ ├── LandingPage.jsx
│ ├── TripSelector.jsx
│ ├── TripView.jsx
│ └── index.js # Barrel exports
│
├── components/ # 🧩 Reusable UI components
│ ├── Header.jsx
│ ├── TripHero.jsx
│ ├── LocationSearchDropdown.jsx # NEW: Search autocomplete
│ └── index.js # Barrel exports
│
├── hooks/ # 🪝 Custom React hooks
│ └── useLocationSearch.js # NEW: Search state management
│
├── services/ # 🌐 External API integrations
│ └── geocoding.js # NEW: Geoapify location search
│
├── data/ # 📊 Mock data & constants
│ └── mockTrips.js
│
├── App.jsx # 🎯 Root + Router setup
└── main.jsx # ⚡ Entry point
Key Principles:
- Pages: Route-mapped views (use Router hooks)
- Components: Reusable UI blocks (pure presentation)
- Barrel Exports: Clean imports via
index.js
See PROJECT_STRUCTURE.md for detailed architecture guide.
- Data: Mock JSON (ready for API integration)
- Deployment: Vercel-ready
- 🎯 Beautiful landing page with clear value proposition
- 🔍 Global location search with autocomplete (100,000+ cities)
- ⚡ Debounced search (smart API call optimization)
- 🌍 Destination & mood selector
- 📅 Multi-day itinerary view with detailed activities
- 📊 Activity metrics (noise level, eco-score, cost, duration)
- 💝 Emotional insights for each location
- 📱 Fully responsive design
- ✨ Smooth page transitions and micro-interactions
- 🤖 Real AI integration (OpenAI/Gemini) for dynamic itineraries
- 🗺️ Interactive maps (Mapbox)
- 🌙 Dark mode toggle
- 👤 User profiles and saved trips
- 📍 Real-time location suggestions
- 🔔 Mindful notifications ("Time for a break")
- 🌐 Multi-language support
- 💬 Community reviews & tips
# 1. Install dependencies
npm install
# 2. Setup environment (optional for location search)
# Get free API key: https://www.geoapify.com/
# Create .env file and add:
# VITE_GEOAPIFY_API_KEY=your_key_here
# 3. Run development server
npm run dev
# 4. Build for production
npm run build
# Preview production build
npm run preview63% of travelers report feeling stressed during trip planning (source: Booking.com). The rise of calmcations shows people want meaningful, regenerating travel experiences.
First-of-its-kind "Calm Travel AI" that:
- Personalizes based on emotional state, not just preferences
- Provides stress metrics alongside traditional info
- Focuses on sustainability and authenticity
- Trend: Calmcations growing 40% YoY
- Target: Millennials & Gen Z seeking mindful experiences
- Differentiation: Not a booking platform or map app - it's a feeling curator
- Freemium: Basic trips free, premium AI features paid
- Affiliate: Eco-friendly hotels, local experiences
- B2B: Partner with wellness brands, tourism boards
Included mock trips:
- Lisbon, Portugal - 3-day calm coastal journey
- Kraków, Poland - 2-day slow cultural immersion
Each includes:
- Curated activities with emotional descriptions
- Stress/noise metrics
- Eco-friendly ratings
- Transport recommendations
- Cost breakdowns
| Criterion | Score Target | Our Approach |
|---|---|---|
| Idea & Innovation (30%) | 10/10 | New category: "Calm Travel AI" |
| Relation to Category (20%) | 10/10 | Perfect fit: reimagining travel exploration |
| Usability (20%) | 9/10 | Apple-inspired UX, 3-click journey creation |
| Design (20%) | 10/10 | Premium aesthetic, emotional design |
| Completeness (10%) | 9/10 | Fully functional MVP with real data |
"Less code, more experience"
We prioritize:
- User emotion over technical complexity
- Design details over feature quantity
- Calm, intentional interactions
- Accessibility and inclusivity
MIT License - Built with ❤️ for meaningful travel
Made for [Hackathon Name] | "Reimagine the way we explore the world"
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.