Ticket Stub Diary

Browse page
Details popup
Calendar page
Charts page
Map page

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.