Trevl

Overview#

Trevl is a digital travel photo diary that showcases travel memories in an elegant, multilingual format. Built with Next.js 15 and Tailwind CSS, the application provides a beautiful platform for sharing travel experiences through photos and stories. With support for four languages and automatic image optimization, Trevl demonstrates modern web development practices with a focus on performance and user experience.

Key Features#

🌍 Multilingual Support#

Comprehensive internationalization:

• Norwegian (Norsk)
• English
• Spanish (Español)
• Traditional Chinese (繁體中文)
• Seamless language switching
• Persistent language preference
• Translated photo captions
• Localized UI elements

🖼️ Elegant Photo Albums#

Beautiful photo presentation:

• Destination-based organization
• High-quality image display
• Automatic image optimization with Next.js Image
• Responsive image galleries
• Detailed captions in multiple languages
• Smooth loading transitions

📱 Responsive Design#

Optimized viewing experience:

• Desktop-first with mobile adaptations
• Touch-friendly navigation
• Readable on all screen sizes
• Optimized image sizes per device
• Consistent experience across platforms

⚡ Performance Optimized#

Lightning-fast experience:

• Next.js 15 App Router for optimal performance
• Automatic code splitting
• Image lazy loading
• Optimized bundle sizes
• Fast page transitions
• Vercel Analytics integration

🎨 Modern Design#

Clean, minimalist aesthetic:

• Professional photo presentation
• Subtle animations and transitions
• Intuitive navigation
• Focus on content
• Tailwind CSS styling

🗺️ Destination Showcase#

Featured locations:

• Amsterdam - Canal city charm
• Fredrikstad - Old town beauty
• Oslo - Capital treasures
• Thailand - Tropical paradise

Technical Implementation#

Frontend Architecture#

• Next.js 15 with App Router
• React 18 with modern hooks
• TypeScript for type safety
• Tailwind CSS 3.4 for styling
• React Context API for state management

Internationalization System#

Translation Structure:

{
  nav: {
    home: string;
    destinations: string;
    about: string;
  };
  destinations: {
    [key: string]: {
      title: string;
      description: string;
      photos: {
        caption: string;
      }[];
    };
  };
}

Language Context:

• Centralized language state
• Persistent preference in localStorage
• Easy language switching
• Fallback to default language

Image Optimization#

Next.js Image component provides:

• Automatic format selection (WebP, AVIF)
• Responsive image sizes
• Lazy loading
• Blur placeholder
• Priority loading for above-fold images

Component Structure#

DestinationGallery:

• Photo grid layout
• Image modal for full-size view
• Caption display
• Responsive columns

LanguageSwitcher:

• Flag icons for visual recognition
• Dropdown or button group
• Active language indication
• Smooth transitions

DestinationCard:

• Preview image
• Destination name and description
• Link to full gallery
• Hover effects

Routing Structure#

/                    # Home page with destination overview
/destinations/[id]   # Individual destination gallery
/about              # About the project

Challenges & Solutions#

Challenge: Multilingual Content Management#

Solution: Created a structured translation system with JSON files per language. Each destination has translations for title, description, and all photo captions, ensuring consistent multilingual support.

Challenge: Image Performance#

Solution: Leveraged Next.js Image component with proper sizing and lazy loading. Images are automatically optimized and served in modern formats, significantly improving load times.

Challenge: Language Persistence#

Solution: Implemented localStorage to save user's language preference. The app remembers the selected language across sessions, providing a seamless experience.

Challenge: Responsive Image Galleries#

Solution: Used CSS Grid with Tailwind utilities to create flexible, responsive galleries. Images adapt to screen size while maintaining aspect ratios and visual appeal.

Design Philosophy#

Content-First Approach#

Photos are the star:

• Minimal UI distractions
• Large, high-quality images
• Clean typography
• Ample white space

User Experience#

Intuitive navigation:

• Clear destination organization
• Easy language switching
• Smooth transitions
• Fast loading times

Accessibility#

Inclusive design:

• Alt text for all images
• Keyboard navigation support
• Proper heading hierarchy
• Color contrast compliance

Results#

• ✅ Beautiful photo diary with 4 language support
• ✅ Optimized image loading and performance
• ✅ Responsive design for all devices
• ✅ Intuitive navigation and user experience
• ✅ Clean, maintainable codebase
• ✅ Production-ready deployment on Vercel

Future Enhancements#

• 🗺️ Interactive map with destination markers
• 📅 Timeline view of travels
• 🔍 Search functionality
• 🏷️ Photo tagging system
• 💬 Comments and reactions
• 📤 Social media sharing
• 🎥 Video support
• 📱 Progressive Web App (PWA)
• 🔐 User authentication for private galleries
• ☁️ Cloud storage integration
• 📊 Travel statistics and insights
• 🌐 Additional language support

Lessons Learned#

This project provided valuable experience with:

• Next.js 15 App Router and performance optimization
• Internationalization implementation from scratch
• Image optimization techniques
• React Context API for global state
• TypeScript for type-safe translations
• Responsive design for photo galleries
• Tailwind CSS advanced layouts
• Vercel deployment and analytics
• Content organization strategies
• User experience design for photo-centric apps

Trevl demonstrates how modern web technologies can create beautiful, performant applications that showcase content in multiple languages while maintaining excellent user experience.

"The road goes ever on and on, down from the door where it began..."