Wander Wish started as my own little experiment, a way to map all the places I’ve been dreaming of visiting. I built it completely from scratch using MapLibre GL JS, Supabase, and good old HTML/CSS/JavaScript. What began as a weekend idea slowly turned into a full-stack project that combines design, code, and data to create an interactive travel wish-list.

The app lets you drop pins, categorize spots as visited, shortlisted, or wishlisted, and watch your personal world map come to life. I focused on keeping the experience smooth and minimal with a clean interface, smart location autofill, and satisfying real-time feedback. It’s a project that showcases how thoughtful UX design and data architecture can turn a personal concept into a scalable, production-ready tool.

Target Population
Travel enthusiasts and digital nomads who enjoy visually organizing places they’ve visited or want to visit.


Timeframe
2 months (ongoing refinement and deployment)


Tools Used
MapLibre GL JS, Supabase, PostgreSQL, Vanilla JS, HTML5, CSS3, Figma


Takeaways
This project deepened my understanding of end-to-end product development from early UX sketching to backend schema design. I learned how to:
　・ Translate emotional user goals (wanderlust, curiosity, nostalgia) into functional design.
　・ Integrate real-time geographic data (country/province autofill, crosshair updates) using APIs.
　・ Optimize for clarity and performance, ensuring a balance between beauty and efficiency.
Wander Wish began as a personal experiment, a “what if” moment to visualize my travel dreams. Over time, it evolved into a proof-of-concept product integrating interaction design, real-time data logic, and database management.

Interaction Complexity
I wanted to move beyond static pins. The challenge was creating a fluid system where a user could center the map, and the app would automatically detect coordinates, autofill location data, and update the UI instantly.

Data Modeling
Designing a relational database schema that could handle places, labels, and relationships cleanly while remaining lightweight and scalable was crucial. Supabase provided flexibility but required careful constraint design (enums, joins, and cascade logic).

Visual Hierarchy
Displaying multiple layers of information (place data, categories, labels, map styles) without cluttering the interface demanded strict visual discipline — using hierarchy, motion, and spacing to convey clarity.

Technical Integration
Achieving seamless coordination among MapLibre GL, Supabase, and the country-coder API meant debugging dozens of async interactions — particularly with auto-updates for latitude, longitude, and location fields.

Usability vs. Performance
Balancing live map events, animations, and responsive elements while maintaining fast load times and reliable API calls.

Visual & Interaction Design
Designing Wander Wish was all about finding balance — I wanted it to feel calm, exploratory, and data-driven at the same time.
I began by sketching different layouts on paper to decide where the sidebar, form, and crosshair should live. Once I had a rough direction, I translated those ideas into Figma, experimenting with color palettes inspired by real travel maps and modern UI minimalism.

Hand-drawn sketch image

Figma prototype

Full-Stack Schema Optimization
Developed a normalized schema linking three tables:
　・ places (core location data)
　・ labels (style + name definitions)
　・ place_labels (many-to-many junction table)
This architecture supports scalable tagging, clean deletions, and efficient filtering. Added Supabase views (places_with_labels, labels_in_use) for optimized read queries.

Schema diagram

Label System Redesign
Introduced color-coded, pill-style labels with editable colors, counts, and filter states.
The modular structure allows users to manage main categories (Nature, Culture, Visited, and Wishlisted) and sub categories dynamically while visually keeping the map tidy.

Label chips with pop-up color editor

Auto Updating Design
Built a crosshair-based map interface where the current map center continuously updates coordinates in the form fields.
Implemented auto-fill logic using the country-coder API to instantly populate country and province fields, giving the interface a “smart” feel.

Crosshair & auto-updating fields