Ticket Stub Diary

I've been collecting tickets from all over the world. This site is my virtual diary to share those experiences.

Comment

Inspiration

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

Notes

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:

Updates