Landing page
View your travel locations on an interactive globe
Swipe through your travel memories per location

Check it out at pastport.me !

Inspiration

Pastport was born out of our shared love for exploration and travel. Frustrated by the challenge of sharing our travel memories amid the clutter of saved memes and food photos, we envisioned a seamless solution. We created an app to effortlessly document and share our "past" travels with our friends.

What it does

Upload photos and preserve the moments you want to cherish forever. These curated memories adorn your profile and unfold across your personal globe, meticulously tracking your journey. Swipe through your timeline and fly to your memories. Witness your travel history come to life, watching the map fill in with each destination you've explored. With PastPort, every photo is a milestone, and every journey is a story waiting to be revisited.

How we built it

We utilized Mapbox’s API on top of React.js in order to create an interactive globe. We transmitted data from the client side to the server side through tRPC, for events such as when a user registers, when a user records a travel event, etc.. On the backend, we used tRPC on top of Next.js serverless functions in order to create type safe routes/procedures, with all data being stored in a Neon Postgres DB featuring connection pooling.

Challenges we ran into

Learning tRPC was a challenge due to the different paradigm of RPC. Initial challenges include adding our authorization token to the headers of all incoming requests, as well as testing he tRPC procedures, but in the end it became intuitive and improved our workflow.
Designing the user flow and user use cases proved to be a challenge because we wanted to create a unique and captivating user experience.
We had trouble converting longitude and latitude to ISO 3166 country codes using Melissa Geocoding API as we received countless errors testing the API calls.

Accomplishments that we're proud of

We made a stunning user interface within 48 hours that truly captivates the audience. Moreover, we are proud of successfully utilizing tRPC, and seeing the true power of type safe communication between the client side and the server side. It was also amazing to implement authentication on top of this, working directly with the JWT authentication flow, creating decoders in our backend, as well as modifying the client side to include the token in every header (harder than it seems due to the nature of tRPC moving away from using headers and other standard HTTP request conventions).

What we learned

As a team, we learned to efficiently delegate tasks to optimize the fast creation of our app. Andy and Joshua worked primarily on the frontend, creating the globe interface, while Tyler and Ibrahm worked primarily on the backend, ensuring the tRPC procedures were working properly, implementing authentication, etc. We learned about the full JWT authentication flow, and how to verify all incoming requests based on a JWT secret which we integrated into our tRPC backend. It was also very cool seeing the benefit of tRPC as we wrote many requests to and from our backend, and whenever we made errors with input types, the compiler would give us an error before hand, saving us countless hours.

What's next for Pastport

The adventure continues! Future plans for Pastort include exciting features, connecting with friends, tracking upcoming flights, and personalizing your globe and profile layout. We also want to create yearly/monthly challenges, inviting users to showcase their most-traveled countries or share their best travel photos. Stay tuned for the next chapter in the Pastport story!