A headshot of Gavin Henderson

Gavin Henderson


Reading Time: 4 minutes

September 3, 2018

I started out this month with the plan to create a GraphQL API that communicates with the API that data.police.uk provide to access crime statistics and information about police forces in specific areas. After that my plan was to build a React app that allowed the user to drop a pin on the map and then be presented with the crime statistics for that area. Lastly, I wanted to gain experience in deploying a web app into a production environment using a CI pipeline.

If you want to see the source code head over to the Github Repo and if you like it you can even give it a star.

During this project I hoped to extend my GraphQL knowledge by learning more about standard as well as being able to practically implement an API. I was already pretty capable in writing React but had little experience setting up a project and developing from the ground up.

My process started by creating a new GraphQL API using express-graphql which allows you to expose an instance of GraphiQL which you can use to hit your API and view the routes. I then went through the list of routes on the Police UK API and ported them to GraphQL. This process was mostly a one for one conversion but I used the advantages of GraphQL to improve the API. Once completed I then used graphdocs to create elegant documentation for my API.

Once the API was fully completed I then turned to designing the React front-end using Sketch. This was my first time using sketch and my first time designing a website before implementing it. I was initially having trouble getting to grips with Sketch due to not really understanding how to approach design work. Luckily, one of the designers at work gave me a great tutorial of Sketch and ran me through some basic design principles. Learning how to throw together some basic designs is one of the most useful things I learnt this month. I don't have a great eye for design but Sketch allows me to rapidly prototype and improve my designs through trail and error. I created designs for mobile and desktop but only implemented the desktop version.

After creating the designs I took to implementing the front-end using React and Apollo to interact with the GraphQl back-end. I used the create-react-app script to initialise my project then setup my project using Semantic UIs React component library which saved me building and styling the basic components. I also setup my styles to use the less-loader. My first problem was creating the map element and deciding which map provider to use. I started off using MapBox and I like the idea of being able to use nice skins and it came recommended to me from friends. I tried using the MapBox library that Uber makes as it provides React integration but I found it annoying and I only needed to be able to drop a pin. For this reason I turned to the Google Maps API which I have previous experience with and found the react-google-maps package which wrapped the Maps API in a super thin layer and they provide great docs for it.

After I got the map part working I found setting up Apollo really easy as all you have to do is plug in where the API is and then use your GraphQL query strings. I also used a Apollo a lot during my internship so was already really familiar with it and the best practices to keep in mind when using it.

Once the front and back-end were complete I then tried to deploy the service to my personal domain. I hosted it under the subdomain opencrime on my personal domain. I initially wasn't sure how to go about doing this but after some research I realised all that was needed was make one DNS entry. After making this DNS entry I setup a Digital Ocean droplet hosting the the API and the React App. I ended up setting this up pretty last minute and just hosted them using the development settings. I also had issues with the WiFi I was on blocking port 8000 which the API is hosted on but I didn't notice the issue on any other networks.

One of the biggest things I learnt during this project is the importance of doing work in vertical slices rather than horizontal slices. I should have implemented an API route then created the front end to go with it. I ended up doing the entire API and then ended up with a front-end that barely uses any of the API routes. I would have had much more to show if I put more work into the front-end and less in the back-end.

Another issue I had was time management. This month I spent a week and half on holiday and I knew this before starting. I failed to plan ahead and ended up rounding off the project late which is why I had to rush out a bad deployment. I think my next project similar to this I will aim to setup the deployment first so I don't have to factor it into my schedule later.

This month I am going to take a step in a different direction and learn more about ethical hacking and information security. My plan is to read the book 'The Basics of Hacking and Penetration Testing' and then become proficient in the tools that it runs through. I also plan to improve my skills by completing some Capture the Flags. I will aim to commit and hour every day which may end up being less with class starting again.

Quick thanks to Colin for teaching me Sketch and to Darren for figuring out subdomains with me.

If you have any tips for how to improve this blog drop me a message on LinkedIn or an email at gavin.henderson@hotmail.co.uk