Awesome_E A website for all the virtual, global hackathons I’ve hosted with my team at Treasure Hacks.
I started working on this website after the initial codebase was started. This required familiarizing myself with the existing codebase and layouts before making changes. I would then transform this website into what it is today: a place to showcase any current or past virtual hackathons as well as their projects and helpers.
Over the years, this website has showcased a variety of different content. In the beginning, we wanted to highlight the diverse places that people were joining from. This required us to collect a city in our registration form, then automatically forward that data to an API that gets the coordinates, stores it in a database, and provides a full list of locations (separate from name) when the hackathon site is loaded.
A map that highlights the global participation in our hackathons. It was later removed to simplify registration and because the purpose of the map was not immediately clear to participants.
Another component of the website is the cave aesthetic. Since we were playing on the name “Treasure Hacks”, we wanted to have the visual of Treasure at the bottom of the cave. This required a tileable background for the walls that blended seamlessly with the header and footer.
Additionally, we have a live schedule on our website. This pulls data from Google Sheets since it is a source that is easy for the entire Treasure Hacks team to learn and update, and it displays in a simple table format on the website, including the date, time, and name of the session.
As we began to host more events, we needed a place to show highlights of previous ones. To address this, we added previous event pages for each of our past hackathons. Each page includes highlights of the event such as the winners, the YouTube playlist, and a list of those who helped to make the event possible.
The website was built using HTML, CSS, and JavaScript in the front end. It uses the fetch API to interact with the Treasure Hacks API (which is written in Node.js). I used libraries like Mapbox to create the interactive map and splide.js to create the carousel for our different hackathon categories.