How we created the Munro Bagger site in 6.5 days

Sian Robinson Davies explains how a CodeClan group project took on a new life as a public website and app.

We live in Scotland and we like going out into the mountains. We don’t care which mountains, we just want them to be sunny. The problem is that all the existing weather sites only let us check the forecasts for individual locations, not search the best weather for a given area.

This was the starting point for Munro Bagger; we wanted to enable a user to instantly see all the Munros (a Munro is a mountain in Scotland with a height of 3000ft or more above sea level) and more importantly, which were going to be sunny over the next three days.

It was our first group project at CodeClan, week 13. We were a team of four, working in vanilla JavaScript; no frameworks, no libraries, just Webpack and Node and with a whole three-weeks JS experience making API calls (an API, or Application Programming Interface, is used by companies to release information for developers to make use of), manipulating JSON and displaying information to a screen, we were confident.

We had 6.5 days days to do it in.

Climbing the heights

Sian and John

A project always seems simple in the planning stage.

“Yeah, should be fine, we’ll get back the forecasts for the mountains, then we’ll just display them on a Google map, no probs.”

“Then we’ll make it so the user can click on the mountain and see more information about it’s height and stuff…and maybe add a login so people can keep a track of which ones they’ve bagged and then they should be able to add photos and comments and share them with friends.

“Sounds manageable. I mean, there are four of us and I think someone round here has used that API before…”

First hurdle: One team member broke his thumb falling off this bike on a training ride around Arthur’s Seat and spent an afternoon committing to git on the hospital’s wifi, while another spent the entire week with her face wrapped in a scarf so as not to pass on the terrible flu that was issuing regular reports through her nose.

Munro bagger planning

Second hurdle: The OpenWeather API that we were using allows you to make 60 request per minute for free, but there are 282 Munros in Scotland. We had to find a way of making staggered requests and storing the data in a database so we didn’t max out our limit or have to make a new call every time someone refreshed the page.

Team Munro Bagger

Third hurdle: The OpenWeather API only has weather stations in cities, so forecasts were not as accurate as we would have liked. We didn’t want to send hikers up the blizzard ridden mountain thinking the weather up there was going to be just as balmy as it was in the nearest city centre. (We found a solution to this in version two)

We did it though, just about. By the end of the week we had all the basic functionality working (Munros displaying by sunniness and the ability to view additional information about each mountain), our own Munro api live, and we even had a few dummy users in a database that we could use to login and record bagged Munros.

Munro website code

We were feeling pleased with ourselves until someone was like, “Yeah, you should have done that in React, would have been way easier.”

Back to the drawing board

So back to class for more learning and after two more weeks, we regrouped for our final project, rebuilding the project’s front end in React and back end in Ruby on Rails, this time with the aim of getting the site live.

Starting Munro bagger

We were able to use all our existing logic, but we encountered issues to do with preparing for real users. We battled with user authentication, security and the accuracy of forecasts (we ended up using the Met Office api), all of which took us well beyond the end of the course.

One of our members went on to create an app for Android and has written more about the experience.

Munro bagger screenshot

We use Munro Bagger ourselves, and when we go to the mountains they are sunny.

Along with a whole of lot of help from all the instructors, we used the knowledge we learnt at CodeClan to make something we find useful.

Get the latest news from CodeClan

Receive our latest blog posts, event announcements and course news.

More

800 hours of coding: A life changing decision

5 ways to get the most out of GitHub