Code With Me

article image

I am the study group leader at freeCodecamp, which is the biggest non-profit coding curriculum in the world. We organise weekly meetups along with special events. At freeCodeCamp Oslo, we try to bring a deep sense of community, togetherness. Like many FCC groups, we have a lot of expats, people who have moved to Norway, away from friends and family, and this community helps many people, including myself, get out there and meet other developers and form relationships.

On Saturday the 14th July, freeCodeCamp Oslo had our first hackathon, but in the spirit of togetherness, we decided to make our hackathon non-competitive. It was more of a hack-on-a-thing. We have lots of people who are very new to coding and wanted them to feel they could participate and learn something along the way.

Leading up to the hackathon, we decided whether we were going to make it a one- or two-day event over the space of a weekend, based on feedback from the group. After securing a venue thanks to Marek, one of our admins, at the amazing Explorer HQ in the centre of the city, we decided to ask our campers for ideas for the project. In total, we had 7 ideas, and the week before the event we looked at how feasible they were for us in the 12 hours we had. We finally settled on making a web app where users could see if any students were studying around them and had added an invite to the map to welcome collaboration, alternatively they could post their location for others to join their study session.

Starting at 10am at Explorer HQ, we had a few introductions and decided on how to split the tasks. We had many beginners to web development amongst us, all of whom were either, happier contributing to a frontend or interested in learning it, leaving myself to pick up the slack on the backend.

 

Explaining how to create a modal with a semi-transparent background.

The main problem we had was that we were unable to use frameworks like React to keep secret our API calls as many of the team haven’t used anything like that before, so we decided on HTML & CSS for a static frontend using jQuery to make the AJAX requests. We would also use Bootstrap 4, which would allow quick prototyping, and having a good set of docs would help the frontend come together. Another one of our admins Ekaterina was in charge of more of the client-side Javascript and with Marek would oversee the general frontend development.

The repo was created by Howie, another admin for freeCodeCamp Oslo, and after permissions were granted we started work. The frontend team dived into the Google Developers docs and quickly displayed a map on the frontend. The backend was going to use NodeJS with MongoDB and Express, so first an NPM init was done along with installing Express, Mongoose, Body Parser and a few other packages, within an hour and a half we had our API working. While waiting for the frontend, we were able to test the API using Postman to GET and POST data from and to our database.

After lunch, also kindly sponsored by Explorer HQ, we made a few incremental changes for database entries, but most of the work was for Javascript on the frontend, making sure we could send our GET and POST requests from there, and soon our minimal viable product was finished.

 

It was great working in a team, which none of us had really done before, with Ekaterina telling us all off for pushing to master multiple times. We hosted the site on Heroku, and the database was hosted with MLab, so after a long day, we had a usable product which we couldn’t be more happy with. There were still things to work on, but our MVP was achieved. The next day I remedied our open API somewhat by using Passport to add Facebook authentication. Also as a team, we added a few fixes to the site.

 

Altogether the experience was great, working as one big team of 8 people helped make the environment friendly and brought everyone together which was our aim. I implore you to try it yourself and setup a non-competitive hackathon for your group.