On Saturday 14th July, we had our first hackathon in Freecodecamp Oslo. In the spirit of solidarity, we decided to make our hackathon non-competitive. We have a lot of people who are very new to coding, and wanted to feel they could participate and learn something along the way.
Here at Freecodecamp Oslo, we strive to bring a deep sense of community and togetherness.
Like many Freecodecamp groups, we have a lot of expatriates – people who have moved away from friends and family to Norway. This community helps many people, myself included, get out there and meet other developers and build relationships.
Moving on to the hackathon, we decided that we were going to make it a one or two day event based on the feedback we got from the group.
After securing a spot at the wonderful Explorer HQ (thanks to Marek, one of our administrators), we decided to ask our campers for ideas for the project.
In total we had seven ideas, and a week before the event we saw how practical they were for us in the 12 hours we had.
We eventually agreed to build a web app where users could see if a student was reading around them. We’ve added an invite to Maps to welcome collaboration, and users can post their location for others to join their study sessions.
From 10 am onwards, we had some introductions and we decided how to divide the tasks.
There were many beginners to web development among us. All were happy to contribute to the front end, or were interested in learning it. This meant that it was up to me to work on the back end.
The main problem we had was that we were unable to use a framework like React to keep our API calls secret. Many team have not used such framework before. Instead, we decided on HTML and CSS for a static front end, using jQuery to make AJAX requests.
We also used Bootstrap 4, which allowed quick prototyping. Its robust documentation helped the front end come together.
The repo Freecodecamp was created by another admin from Oslo, Howie, and after getting permission we started work.
The front end team dived into the Google Developers docs and quickly displayed a map on the front end.
The back end was going to be using NodeJS with MongoDB and Express so first did an npm init with express, mongoose, body parser and some other packages installed. Within an hour and a half, we got our API working.
While waiting for the front end, we were able to test the API using Postman to receive and post data from our database.
It was great working in a team, which none of us had really done before.
We hosted the site on Heroku, and the database was hosted with MLAB. After a long day, we had a useful product we couldn’t be happier with.
There were still things to be done, but our MVP was achieved. The next day, I remedied our open API using Passport to add Facebook authentication.
Also, we have added some improvements to the site.
Overall the experience was great. Working as a team of eight people helped create eco-friendly, and brought everyone together – which was our aim.
I request you to try it yourself and set up a non-competitive hackathon for your group!
So how can you set up your own hackathon?
Keep it up to a day – a weekend day will work best. Spreading the event over several days means you may not have the same number of people attending on both days, and this can be a problem for continuity. We polled our group with multiple dates and found the best to pick the most popular.
Find a Project Beforehand – We crowdsourced our idea process, asking users to submit their ideas a week in advance. This way, group leaders can meet together and examine feasibility.
Secure a space – This one can be tricky, as you need ample space with good WiFi and power. Ideally, you want to be able to bring your own snacks etc. Maybe someone in your group has a workspace that’s free on the weekend? Don’t be afraid to get out there and drop some emails to the tech community folks. Otherwise, move everyone to their place.
Make it collaborative, not competitive – we are all learning and if you make it competitive some may feel out of their depth. Divide the group into different sections.