Feriehjelper

Overview#

Feriehjelper is a comprehensive travel planning assistant that helps users organize every aspect of their trips. From budget tracking to activity planning and emergency information, the application provides a complete solution for modern travelers. Built with Next.js 13, MongoDB, and Clerk authentication, it demonstrates full-stack development with a focus on user experience and data management.

Key Features#

🌍 Complete Travel Management#

Comprehensive trip planning system:

• Create and manage multiple trips
• Set destinations and travel dates
• Track trip status (planning, active, completed)
• Overview dashboard with all trips
• Quick access to trip details

💰 Dynamic Budget Tracking#

Sophisticated financial management:

• Set overall trip budget
• Track expenses by category
• Visual budget breakdown with charts
• Real-time remaining budget calculation
• Expense history and analysis
• Currency support

📅 Activity Planning#

Organized daily planning:

• Schedule activities by date
• Add descriptions and notes
• Time-based organization
• Activity categories
• Edit and delete activities
• Day-by-day view

🚨 Emergency Information#

Critical information storage:

• Emergency contacts
• Important phone numbers
• Embassy information
• Medical information
• Insurance details
• Quick access in emergencies

🌐 Multi-language Support#

International accessibility:

• Norwegian (NO)
• English (EN)
• Spanish (ES)
• Chinese (CH)
• Easy language switching
• Persistent language preference

🔒 Secure Authentication#

Clerk integration provides:

• Email/password authentication
• Social login options
• Protected routes
• User session management
• Secure data access

📱 Responsive Design#

Optimized for all devices:

• Desktop-first with mobile adaptations
• Touch-friendly controls
• Readable on all screen sizes
• Consistent experience across devices

Technical Implementation#

Full-Stack Architecture#

• Frontend: Next.js 13 with App Router
• Backend: Next.js API Routes
• Database: MongoDB with Mongoose
• Authentication: Clerk
• State Management: React Context API
• Styling: Tailwind CSS

Database Schema#

Trip Model:

{
  userId: string;
  destination: string;
  startDate: Date;
  endDate: Date;
  budget: number;
  expenses: Expense[];
  activities: Activity[];
  emergencyInfo: EmergencyContact[];
  status: 'planning' | 'active' | 'completed';
}

Expense Model:

{
  tripId: ObjectId;
  category: string;
  amount: number;
  description: string;
  date: Date;
}

Activity Model:

{
  tripId: ObjectId;
  title: string;
  description: string;
  date: Date;
  time: string;
  category: string;
}

State Management#

React Context API manages:

• Current trip selection
• User preferences (language, theme)
• Global loading states
• Error handling
• Data synchronization

API Design#

RESTful endpoints:

• GET/POST /api/trips - Trip management
• GET/PUT/DELETE /api/trips/:id - Single trip operations
• POST /api/trips/:id/expenses - Expense tracking
• POST /api/trips/:id/activities - Activity planning
• PUT /api/trips/:id/emergency - Emergency info

Internationalization#

i18n implementation:

• JSON translation files per language
• Context-based language switching
• Persistent language preference
• Fallback to default language
• Easy addition of new languages

Challenges & Solutions#

Challenge: Complex Data Relationships#

Solution: Designed a flexible MongoDB schema with embedded documents for expenses and activities. This allows efficient querying while maintaining data integrity and relationships.

Challenge: Multi-language Support#

Solution: Implemented a custom i18n system using React Context and JSON translation files. Language preference is stored in localStorage and persists across sessions.

Challenge: Budget Visualization#

Solution: Created dynamic charts using calculated data from expenses. Real-time updates ensure users always see current budget status.

Challenge: Date Handling Across Timezones#

Solution: Standardized all dates to UTC in the database and converted to local time in the UI. This prevents timezone-related bugs and ensures consistency.

Challenge: Secure Data Access#

Solution: Integrated Clerk authentication with MongoDB queries. All API routes verify user identity and ensure users can only access their own data.

User Experience Flow#

Trip Creation#

1. User creates new trip with destination and dates
2. Sets initial budget
3. Dashboard shows new trip card

Budget Management#

1. Add expenses with category and amount
2. View visual breakdown of spending
3. Track remaining budget in real-time

Activity Planning#

1. Select date for activity
2. Add title, description, and time
3. View organized daily schedule

Emergency Preparation#

1. Add emergency contacts
2. Store important numbers
3. Quick access when needed

Results#

• ✅ Complete travel planning solution
• ✅ Intuitive budget tracking with visualization
• ✅ Organized activity planning
• ✅ Multi-language support (4 languages)
• ✅ Secure authentication and data protection
• ✅ Responsive design for all devices
• ✅ Production-ready full-stack application

Future Enhancements#

• 🗺️ Interactive maps integration
• 📸 Photo gallery for trips
• 🎫 Document storage (tickets, reservations)
• 👥 Shared trips with other users
• 📊 Advanced analytics and insights
• 🔔 Reminder notifications
• ✈️ Flight tracking integration
• 🏨 Hotel booking integration
• 🌤️ Weather forecasts
• 💱 Real-time currency conversion
• 📱 Mobile app (React Native)
• 🔄 Offline mode with sync

Lessons Learned#

This project provided valuable experience with:

• Full-stack Next.js 13 development
• MongoDB schema design for complex relationships
• Third-party authentication integration
• Internationalization implementation
• React Context API for state management
• RESTful API design patterns
• Data visualization techniques
• Responsive design for travel apps
• User experience for planning tools
• Security best practices for user data

Feriehjelper demonstrates how modern web technologies can create comprehensive, user-friendly applications that solve real-world problems for travelers.

"It's a dangerous business, going out your door. You step onto the road, and if you don't keep your feet, there's no knowing where you might be swept off to."