TravelBin - Travel Planner

Inspired by Wanderlog, Google Sheets, Pastebin, Partiful, and soon Splitwise.

TravelBin is a web application designed to make trip planning simple and collaborative. Create an account, start a travel list for your destination, add activities, and share your unique trip link with friends or family. If they have an account, you can also invite them via email to co-edit the itinerary with you in real-time.

The idea for TravelBin was inspired by existing tools like Wanderlog—but with a twist. While Wanderlog offers many features, I found its interface too cluttered, especially on mobile. I wanted something cleaner and more focused. So I took the concept of collaborative planning, blended it with the simplicity of Pastebin, the visual appeal of Partiful, and the shared editing experience of Google Sheets—to build an app that felt intuitive, lightweight, and easy to use.

Key Features

  • ✅ Account creation & authentication
  • Users can register for an account and securely log in using a custom authentication system, ensuring only authorized users can create and edit trips. Session management is handled via JSON Web Tokens (JWT) for secure access.
  • 📝 Trip creation and activity tracking
  • After logging in, users can create a new trip with a custom name and destination. Within each trip, they can add planned activities like sightseeing spots, reservations, or to-dos—structured in a way that keeps trip planning organized.
  • 📩 Email-based collaboration
  • Users can invite others to co-edit a trip by entering their email addresses. If the invited user has an account, they’ll be added as a collaborator, enabling real-time updates and shared editing capabilities.
  • 🔗 Shareable links for view-only access
  • Each trip has a unique public link that can be shared with friends or family. Visitors with the link can view the trip plan without needing an account, making it easy to share plans with people who just want to see, not edit.
  • 🌐 Fully responsive design
  • The UI is optimized for mobile, tablet, and desktop views. Whether users are planning on their laptop or checking an itinerary on their phone, the app remains clean and easy to navigate.

Tech Stack

Frontend

  • HTML, CSS, JavaScript
  • React.js

Backend

  • Python
  • Django
  • Django Rest Framework

Database

  • SQLite – AWS PostgreSQL when hosted on Heroku

Other

  • Visual Studio Code
  • Google OAuth 2.0 – optional for user account creation and authentication
  • Figma – design and planning
  • Jira – task and ticket management
  • JSON Web Tokens (JWT) – secure user authentication

Figures

Figma screenshot
Fig. 1 - Figma planning. Click for the full image.
Fig. 2 - user registration form, traditional or Google OAuth
Fig. 3 - login form.
Fig. 4 - logged in user's profile page displaying travel destinations. Add more here.
Fig. 5 - Profile page being viewed while logged out or not as the profile's user.
Fig. 6 - Destination's entry list while logged in. Only users part of this destination can add and edit.
Fig. 7 - Destination's entry list while logged out. Anyone with the link can view this.
Fig. 8 - Light mode/dark mode toggle available throughout the app.