I've been collecting ticket stubs for over 15 years. Any time I would visit a museum, attend a concert, or see a movie, I kept the ticket stub. I have hundreds of ticket stubs from all over the world. I wanted to build a website that could share a tiny bit of my life experiences in a beautiful and interactive way.

What it does

Hosts a database of ticket images, along with their metadata: name, location, date, category, etc.

How I built it

The database is hosted by Google Firebase. The information is displayed to the user with various javascript libraries.

Challenges I ran into

Finding a fully functional (but still free) mapping library was tough. Most libraries didn't have enough detail (i.e. couldn't zoom from a world view down to a specific city), or cost money (i.e. Google Maps API). I finally came across OpenLayers which uses Open Street Maps data. This is a very powerful map library that could do what I wanted, but took a larger learning curve then I was expecting.

Accomplishments that I'm proud of

  • enhanced Browse page
  • enhanced ticket details popup
  • new Charts page
  • new Map page
  • new Calendar page

What I learned

  • How to use Google Charts
  • How to use OpenLayers
  • How to better handle asynchronous Firebase database fetching

What's next for Ticket Stub Diary

  • Make each page more mobile-friendly
  • Make markers on map clickable


This project was started before the hackathon began. Prior work included: an admin page that allows the owner to add a new ticket to the database (including its image and metadata), and a simple browse page to display the items currently in the database. See the "accomplishments" section above for a description of work that was completed during the hackathon.

Share this project: