Our project is inspired by the increasingly clear reality that families often have little knowledge of the wellbeing of their loved ones in a country plagued by human conflict or war.

What it does

KeepThemClose is a website that informs users of military activity and offensives, as well as internet, cellular data and electricity outages in a certain nation or area. This is accomplished through the acquirement and use of open source, collected and user-inputed data, mostly in the form of interactive maps. The goal of KeepThemClose is to ensure the safety of a loved one in a conflict ridden country to their family members. Additionally, news articles and resources such as donations are used to garner the support of the general population.

How we built it

Before building the website, we first layed out the basic design and layout of the website using Figma, and designed the logo. The website's foundation is three key features. Of these, the paramount feature is interactive maps. These maps are constructed in MapHub, using various types of data. This data is turned into a data map, which has info such as current military battles/operations. User inputed data plays a large importance in these data maps. Through a connected form on the website, users can input their current location in the form of their closest city and information such as the availability and/or stability of an internet connection and cellular data. This response is sent to a google sheet. In this google sheet, a JavaScript function takes the inputed city value and returns a latitude and longitude coordinate for that user. Once the sheet is downloaded and manually added to the map, there is data from that user about potential outages in that location, represented by a marker. This is how the maps are built. The other two key features are articles and donation resources. News articles correspond with a map and therefore a nation, and such correspond with a page on the website about that nation. Donation resources are given their own page where all related charities are located.

Challenges we ran into

The main challenge we ran into was implementing our maps as HTML embeds in our website. Originally we had thought that the maps we had first made in MapHub could be directly implemented, but we were met with errors when we tried this. We overcame this challenge by using Google's MyMaps API to directly implement our maps through Google Maps. We downloaded the data of the original map from MapHub, uploaded it into MyMaps, and embedded the generated map into our website using an iframe. This ended up working perfectly.

Accomplishments that we're proud of

We are extremely proud of the success of our "divide and conquer" strategy that we used to complete KeepThemClose. Our project consisted of various drastically different components: generating latitude and longitude coordinates based off of a single city name, designing the layout of our website and the logo in Figma, creating the maps using several sources of data, and adding data from an external form. Dividing the work amongst everyone proved to be much more effective than working the whole team working on one task at a time.

What we learned

We learned the importance of time management and problem solving throughout this hackathon. Time management proved extremely useful as something to learn once we started dealing with time constraints as a result of certain problems that emerged.

What's next for KeepThemClose

There are a few things in store for KeepThemClose. Firstly, we'd like to implement live updates of the maps when new data is added to the spreadsheet. This subsequently means that the spreadsheet will have to upload automatically to the maps. This ensures more accurate data for all users as it would not be outdated by being constantly updated. Another thing we have in store is to implement more custom features built ourselves using HTML, JS and CSS. Not only would this give us more creativity and freedom than the default editor gives us, it would provide a new learning experience.

Built With

Share this project: