#UKvsCovidHack: HeartBeat
Hello, we’re David and Kayla who make up the team HeartBeat. Both backend software engineers who dearly struggled with Frontend life during this hackathon.
The Problem we are trying to solve
2019 was deemed “A Year of Protest,” as we saw mass demonstrations around the globe. Due to mandatory self-isolation and lockdown, covid-19 has changed the way people can protest and forced movements online. This app will act as a heartbeat to keep movements alive and visible. An individual (or org) registers the date/time of a demonstration. At that time, for the next n minutes, signed in users can register their heartbeat once (or with rate-limiting). Demonstrations that meet a certain threshold get put on a world map (visible to anyone) with some information about the cause, enabling others to see what’s happening in their communities, cities, countries, or the world.
The Solution we built
We started off the hackathon deciding what kind of backend we were going to develop. After collaborating on the REST API design for our interactive map we split, to research what type of database schema and frontend frameworks we could use. Ended up looking at using MongoDB a NoSQL document-oriented database. I never used NoSQL before but since relational databases did not suit our use case, I was excited to hack together something. Kayla in the meantime was having fun researching frontend frameworks.
After another catch up, we decided to go with a GoLang Server backend, React front end (React seemed like the easier option since neither of us had experience) and MongoDb for our database. Kayla realised we needed someway to have real time updates for the map when participants voted on each movement they wanted to join. She Developed websockets with the mux library in Go. We didn’t want the client to poll the server for data, as it might wait/hammer the server. Using websockets, let us send messages to the clients when the data was ready. I had a look at creating some of our REST APIs using the mux library in GoLang and setting up a MongoDb database. First time using GoLang but was surprisingly easy to understand.
From there we had a look at using the react-leaflet library to create our interactive map. This was a bit difficult since neither of us had experience with React but was great fun getting something actually up in the browser. Achem, thank you youtube for some handy dandy tutorials.
Right now, we have a server backend that handles our relevant REST API requests. For Example requesting all the existing Movements, updating the participants when a user votes on a Movement. We also have a client that shows an interactive Map with a Marker and dialog box which will eventually hold the information from our MongoDb (just haven’t got to that stage yet).
Demonstration
Our initial Interactive Map with a Movement called “Orange Leaf”
With the websocket, there was no fancy UI stuff just a beautiful updated time stamp and numberOfParticipant linked to the Movement Id. Doing a curl command and testing multiple clients open we successfully created our WebSockets.
Creating our Movement using a curl command:
Vote for that movement:
See it updated on multiple clients because of our beautiful WebSocket:
All the votes coming in for different Movements:
We still need to send requests to the the GoLang Server from our React client but planning to do that with a React library called axios. That and we need to create a box in our client side where a user can join a movement they wish from our interactive map.
Our Code
