ViajApp: How I Built Interactive Maps and Shared Expenses for a Travel App

ViajApp: Interactive Maps and Shared Expenses

I just shipped three major features for ViajApp, my Japan travel platform. Here's what I built and the technical challenges.

1. Interactive Route Map

The trip planner now includes a Leaflet/OpenStreetMap component that visualizes your Japan route.

How it works:

• Cities are stored with coordinates in a cityCoords dictionary
• A FitBounds component auto-zooms to show all markers
• L.divIcon creates custom numbered markers (red for stops, green for final)
• A dashed polyline connects all cities
• Mobile-optimized: scrollWheelZoom={false} prevents accidental zoom

The tricky part:

The react-leaflet library requires client-side rendering only. I used Next.js dynamic() with { ssr: false } to prevent SSR errors:

const RouteMap = dynamic(() => import("./RouteMap"), { ssr: false });

2. Shared Expenses

Built a complete expense splitting system:

• Groups: Create a group, add members
• Expenses: Add expenses with amount, currency, description
• Balances: Auto-calculate who owes whom
• Supabase RLS: Row-level security policies for data isolation

Backend (FastAPI):

@router.post("/groups")
async def create_group(data: CreateGroup, user = Depends(get_current_user)):
    group = supabase.table("expense_groups").insert({...}).execute()
    return group.data[0]

3. Community Tips

A Reddit-like system where travelers share tips:

• Categories: budget, transport, food, safety, accommodation
• Like system for voting
• Filter by city or category
• Moderation via approved flag

Results

• 63 pages live
• 35+ API endpoints
• All features working in production

Try it: viajapp.app