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.
Log in or sign up for Devpost to join the conversation.