LiveHacks

Keep hackathon projects alive

Comment

Inspiration

Some of the coolest - and most useful - projects can come out of hackathons. This includes life hacks, organization tools, and even fun games. The majority of the time, hackathon projects aim to make some aspect of our lives easier or better. Why don't we keep using them after the event ends?

What it does

LiveHacks is a platform to upload live and completed (aka usable) hackathon projects for everyone to discover. Its main purpose is to keep hackathon projects alive and allow non-hackers to view the beauty of our sleepless endeavours. As a developer, you can sign in to post your own projects. Otherwise, anyone can view the projects from the discover page.

How I built it

The wireframe was first drafted up in Figma, then converted to HTML + CSS and hosted on GitHub Pages. The user authentication was done using Firestore authentication, and the data for the projects is stored in a Firestore database. (*Disclaimer, most links to projects in the demo are taken from websites/products on the internet, not real hackathon projects)

Challenges I ran into

It was a first experience using Firestore and many issues regarding user authentication, updating, and accessing user data were run into. Accessing data from the Firestore database was also a bit slow so we had to incorporate callbacks promises to make sure we properly called all the data we needed. It was also difficult to format the projects into a table - the workaround was creating HTML table elements exclusively in javascript. As well, as simple as it sounds, deselecting buttons is hard >:(

Accomplishments that I'm proud of

Not only does this project live up to its name, it also celebrates its fellow hackathon projects. The most gratifying part is being able to build a community for others, and hopefully allow these gems to gain the recognition they deserve by non-developers. This goes to show that not everything in hackathons is hard-coded and projects can be presented to people other than the judges.

What I learned

While building this project especially, we definitely learned a lot about combining HTML, CSS, and JavaScript, and programming elements in one language for another. This project also specifically involved a lot of new HTML that we had not worked with before, such as modals. We also learned a lot involving search functions from the category filters and the search. Finally, graphic design, unfortunately, was not any of our passions, so coming up with a decent design took a lot of time, research, and brutally honest feedback - but it was definitely worth it in the end.

What's next for LiveHacks

This is a project that was first an idea at the back of our minds for a long time, so we will definitely continue working on it after this hackathon ends. Although we got it up and running so far, it is far from polished or finished and there is a lot to keep building. This includes improving the search bar, possibly adding more filters, and scaling to allow for a larger number of projects and users in a more efficient manner.

Share this project:

Updates