ZipTrip is a web application that lets users create travel itineraries by picking places right from an interactive map and connecting points to build a tour, a day trip, or a simple city sightseeing plan.
The idea came to me after watching an Instagram story about how to spend a perfect weekend in San Francisco. The creator showed which train to take, which streets to walk, which cafés and restaurants to visit, what to order, how much everything costs, and which parks or viewpoints to see. It was such a clear, detailed guide that I tried following it myself too. As a developer, I immediately thought: I wish there was an app that I could list all those notes, places’ details, plus the walking direction routes, all in one place.
That was the moment the idea for ZipTrip began to form in my mind.
Team Project & First Version
Later, when I joined Code the Dream’s Practicum program, I sketched a prototype and presented it to my team along with other ideas. Everyone agreed to build ZipTrip, so we planned it together and started development.
For our backend stack, we chose Node.js, Express.js, MongoDB and Mongoose, JWT Auth and Swagger/OpenAPI for API documentation. For the frontend, we used Vite.js, React, React Router and Material UI.
We finished the MVP in two months and presented it. It was a great experience and also very educational, the program was designed to be more team work and leadership. But personally I wasn’t satisfied enough with the created app result to put it in my portfolio. So after the program, I forked the project and started refactoring the codebase, improving the architecture, replacing parts of the tech stack, and building more features.
Refactoring & Improvements
Some of the major improvements I made include refactoring the original “categories” feature into a proper city-based model and creating a dedicated Start Plan page with city autocompletion. I also enhanced the data quality by extracting rich place details directly from the Google Places API and integrated Cloudinary's Image API to handle uploading and storing images on cloud for my project.
I managed to add dark/light theme support using Tailwind CSS and built a new Explore page powered by a custom state-management hook that keeps multiple components in sync. This design was inspired by AllTrails, when a user selects a plan in the sidebar, its related marker automatically highlights on the map. I also redesigned the plan-creation flow by replacing long, traditional forms with an interactive itinerary-building experience which make it super easy for users to build their own plans.
Another major feature was adding walking directions by fetching encoded Polyline data, storing it in the database, and rendering the route on the map. Then to smooth away the sign in/up process, implemented Google OAuth using @react-oauth/google that make it one tap away being logged into the app. Eventually migrated the whole backend from Render.com to Vercel to eliminate cold-start delays that made the app feel slow on the free tier.
It was a significant amount of work, but managed to wrap up my project and applied many design patterns that learned from Frontend Masters courses in one month.
This project helped me improve my full-stack skills, work with geospatial data (my second favorite subject after EdTech), and build something that interacts with real-world mapping APIs. I also wanted to challenge myself technically and create a product I would actually use.
What’s Next
I still have a long list of improvements I want to make to ZipTrip. Some are technical enhancements, like adopting TanStack Query, implementing server or client-side markers clustering, adding place filtering on the map, and autocomplete for more intuitive search. Others focus on enriching the user experience, such as calculating distances between itinerary stops, adding flexible content blocks like notes or images, and refining the UI and mobile experience. I also plan to revisit the API design to strengthen its structure and error handling. These updates will not only make the app more robust but also bring it closer to the full vision I have for the project.
But for now I’m gonna pass to my next app and I’m super exited for it as I like to use AI inside a edtech focused idea.
Challenges
The biggest challenge was refactoring my old codebase to make it more DRY, reusable, and scalable. At the same time, I had to cleanly manage and type data flowing through every layer of the application , from MongoDB documents to API requests and responses body json. Ensuring consistent, well-defined types across both the frontend and backend required reorganizing my models, rewriting parts of the API, and standardizing how data moved through the system.
It took a lot of work, but the process taught me more than any anything else, and rebuilding ZipTrip from the ground up became one of the most valuable experiences I’ve had.
The source code is available on my GitHub account, and the app is live, and feel free to try it out and share your thoughts!