-
-
Various Screens from HackDex
-
Promotional Staging for HackDex
Inspiration
Our team, The Phantoms, is mainly composed of novice hackers, and we noticed that most hackathons aren’t inclusive; first time hackers often feel left out because they want to compete but do not have skills to do so. If they do compete, they don’t fully have time to learn anything either. Additionally, we noticed that the mentors are usually dormant - their time isn’t utilized well with separations between the competitors and the learners.
What it does
HackDex is a platform that, in cooperation with ongoing hackathons, spotlights a topic for hackers of all experience to start and complete a project by the end of the program. It involves combining the learning and competitive parts of a hackathon together into one; first time hackers are given the opportunity to be introduced to a topic while still being able to compete in a fair content which accommodates their skill level.
How we built it
Some of our team had some previous experience with React, so we used React to build the front end of our web app. We wanted to challenge ourselves, so we learned and used Discord OAuth, ExpressJS and the Google Cloud Platform to build our first prototype.
Challenges we ran into
Finding an idea we all agreed upon that was also unique and productive
Integrating discord login
Routing pages on React
HTTPS vs HTTP (why is SSL so hard to set up :[ )
Hosting on Firebase. Why is it so difficult and complicated?
Firebase’s ridiculously slow deploy times
Sleep deprivation
Distractions due to utter disappointment after losing all the mini contests (dang tomato fruits :L)
React website styling
Environment variables with NodeJS are painful
Accomplishments that we're proud of
Successfully integrating the discord login
Opening firewall ports on GCP VMs
Setting up Google Firebase to automatically update our website
Connecting a domain with Firebase
Building out an actual project with something interesting
What we learned
We learned about GCP VMs
How to create and live update a domain
How to properly use React and SCSS
The large and vast difference between HTTPS and HTTP in regards to having proper running discord login connection.
Basic OBS Recording
What's next for HackDex
In the future, we can refine the UI, add a full IDE to view previous versions of your projects, a showcase to see what other participants have created, and external resources to pursue after the workshops are over.
How HackDex Approaches its Challenges
Women in Tech Sponsored by WICS at SFU
Our team is composed of 33% women, previously 50% but sadly our fourth teammate couldn’t attend, and so we meet the qualifications for this reward.
Best Pitch
We worked really hard on creating a high quality video pitch, using OBS to record our video and using Shotcut software to edit together our video. We also used Photoshop to create branding images for our project.
Best UX/UI
Our website has a very intuitive and easy to understand UI, fit with a satisfying colour scheme, and simple yet effective layout. We also used tools and plugins in Figma, a design program, to ensure our color scheme was colorblind accessible and our layouts were properly sized to be easy to use regardless of accessibility needs.
Best Domain Name from Domain.com
Our domain name is HackDex.tech. It's fun to say, rolls of the tongue, simple, and effortlessly effective in stating the use of our domain. Domains that rhyme are always more memorable.
EdTech
Our website is meant to help teach basics about different sections of hacking, whether it be AI, web development, back-end and more. We wish to make hackathons more accessible for hackers of all experience levels, and create the opportunity for those who wish to improve their coding skills to connect with mentors realtime to build their skills.
Most Creative Use of GitHub
We set up Continuous Integration using Github Actions so we don’t have to worry about constantly building the project and deploying it on firebase. The script would easily connect a Github account and a firebase account and as soon as changes are pushed to Github, the website would be updated and we could see the final result in production. That also allowed us to preview the changes when they were made in other branches so we could find errors before committing to the master branch. Github really helped us work as a team and put our collaborative effort to make a worthwhile project.
Best Use of Google Cloud
Our project uses several google services at its core. We utilize: Google Cloud Compute Engine - We used this to host our OAuth callback servers. Firebase Hosting - To host and automatically deploy our website to the hackdex.tech domain. Google Cloud CLI - We used this as a central place to access and manage our GCP resources. Google Cloud App Engine - We looked into this as a better (managed) alternative to GCP VCM instances to host our web servers. Google VPC Networking - We used the google VPC networking services to open ports and create health checks and firewall rules for our VM, which allows us to monitor it’s health and open access to it to anyone on the internet. Google IAM and Service Accounts - We used the least privilege principle with google service accounts to only give our Firebase deployments the permissions required to host our website.
Dream Big and Create More Cheers with AB InBev
Our website would allow for a new era of hackathons to begin, one where education within coding is accessible for all, with code aid being emphasized to help build technical skills. It would teach compelling subjects such that no matter your experience level there would be something to gain from participating, and even those with no knowledge can leave the hackathons satisfied they've created something to be proud of, with the possibility of future expansion.
Log in or sign up for Devpost to join the conversation.