TripPlanner.
Trip Planner is a full-stack web application I conceived, designed, and built to address the fragmented experience of modern travel planning. The app provides a comprehensive desktop interface for creating detailed itineraries—including locations, tasks, and expenses—which then generates a unique URL for a lightweight, installable Progressive Web App (PWA). This provides travelers with a seamless, all-in-one mobile companion for their journey, solving the critical gap between at-home planning and on-the-go access.
Scope
Client
Duration
Year
Skills
Tools
While numerous travel tools exist, they often force users into a disjointed workflow. Planning is done in one app, navigation in another, and budgeting in a spreadsheet. There was a clear opportunity to create a unified experience that gracefully transitions from a rich, desktop-based planning phase to a streamlined, mobile-centric execution phase.
The Business & Market Problem
The market for travel planners is saturated, yet fragmented. Users either have to use multiple single-purpose apps or deal with monolithic platforms that have clunky mobile experiences. The challenge was to design a product with a distinct architectural advantage: a powerful desktop planner that generates a purpose-built, lightweight mobile PWA, offering the best of both worlds.
The User Problem
Travelers face several key pain points during the planning process:
The "Desktop vs. Mobile" Divide: It's easiest to plan complex trips on a large screen, but accessing and interacting with that plan on a mobile device during the trip is often difficult.
Information Silos: Juggling Google Maps for locations, a notes app for reminders, and a budgeting app for expenses creates cognitive overhead and increases the chance of errors.
Connectivity Issues: Travelers often face unreliable internet access, making cloud-only solutions frustrating to use when they're needed most.
I architected and built a full-stack React application that directly solves these challenges through a unique desktop-to-PWA workflow, powered by a real-time database.
1. Core Architectural Decision: Desktop-First Planning, PWA-First Travel
The cornerstone of the solution is its hybrid nature.
Desktop Web App: A feature-rich React application designed for a large viewport, allowing users to easily research destinations using an integrated Google Maps search, create detailed itineraries, manage task lists, and track expenses.
Progressive Web App (PWA): Once planning is complete, the app generates a unique, shareable URL. When accessed on a mobile device, this URL delivers a lightweight PWA. This app is installable on the user's home screen, offers offline capabilities (via service workers), and provides a streamlined, touch-friendly interface focused on accessing the itinerary, not creating it.
2. Full-Stack Implementation
To bring this vision to life, I utilized a modern, robust tech stack:
Frontend: The entire application was built in React, using functional components and hooks for efficient state management and a dynamic user interface.
Backend & Database: Firebase (Firestore) was chosen as the backend-as-a-service. Its real-time NoSQL database is perfect for this use case, ensuring that any last-minute changes made on the desktop are instantly synced to the mobile PWA. It also manages user authentication and data storage for trips, locations, notes, and expenses.
Mapping & Geolocation: The Google Maps API was deeply integrated, not just for displaying maps, but for powering the core location search functionality, allowing users to find and save points of interest directly within the app.
Deployment: The application is deployed on Netlify, enabling continuous integration from a Git repository, ensuring smooth updates and reliable performance.
3. User-Centered Design & Workflow
The design process focused on the two distinct user contexts: planning and traveling.
Planning Phase (Desktop): The UI is designed with a multi-panel layout, allowing users to view a map, their itinerary, and detail panels simultaneously, minimizing context switching.
Traveling Phase (PWA): The mobile interface is simplified to a single-column, card-based feed of the day's events. Maps, notes, and expenses are accessible with a single tap. The design prioritizes readability in various lighting conditions and quick, at-a-glance information retrieval.
Trip Planner is a fully functional, production-ready application that successfully demonstrates a sophisticated solution to a common user problem. The project showcases a strong command of full-stack development, modern architectural patterns, and a user-centered design philosophy.
Impact & Results
✅ Seamless Cross-Platform Experience: The unique desktop-to-PWA workflow successfully bridges the gap between planning and traveling, creating a single, cohesive user journey.
✅ Full-Stack Proficiency: The project demonstrates end-to-end development skills, from frontend React components and API integration to backend database architecture and deployment.
✅ Innovative Problem-Solving: By generating a custom PWA for each trip, the solution offers a novel and highly effective alternative to traditional monolithic travel apps.
Lessons Learned
This project was a deep dive into the practical challenges of state synchronization and contextual UI design. The biggest lesson was in architecting the Firebase data structure to be both scalable and efficient, ensuring fast real-time updates to the PWA without excessive data usage. Implementing the PWA functionality, particularly service workers for offline caching, provided invaluable experience in building resilient, mobile-first web applications that feel native to the user. It reinforced that a great user experience is not just about visual design, but about thoughtful architecture that anticipates the user's context and needs.
A curated selection of my latest projects.