Initially, we wanted to create a platform that showed users nearby businesses and locations that self-labeled as "LGBTQ+-Friendly" or "Transgender Friendly". We originally wanted to get this data from Google APIs, as Google Maps allows businesses to identify as LGBTQ+ friendly, which it then displays in its results. Unfortunately, as that tag is not accessible through publicly available Google APIs, we had to refine our idea. Hence Geo-Queer: a database-powered map entity that allows anyone to rank the level of safety any location has for the LGBTQ+ community.

What it does

Geo-Queer allows users to search for and select places as they are identified in Google Maps. Geo-Queer then allows the user to submit whether they feel that place is "Safe" or "Unsafe" for the LGBTQ+ community. For instance, a user wishing to report on the "LGBT+ center in Durham" would enter that location and click on the "Safe" button that is offered under the map. Geo-Queer stores the tally of these inputs in its database, and will display this vote to future users who select the same location. Due to how the code is structured, any address available in Google Maps can be added to the database.

If you wish to test it, we have preloaded a few entries around Chapel Hill, including:

  • Cat’s Cradle, East Main Street, Carrboro, NC, USA
  • LGBTQ Center of Durham, Hunt Street, Durham, NC, USA
  • LGBT Center of Raleigh, West Hargett Street, Raleigh, NC, USA
  • Spotted Dog Restaurant & Bar, East Main Street, Carrboro, NC, USA

(All values associated with the above were randomized)

How we built it

The frontend of Geo-Queer is a HTML/CSS/JS webpage that uses the Google Maps and Google Places APIs to present a searchable map. The page also implements the scoring interface. To load and update the scores, the web page communicates JSON documents via HTTP GET and POST requests with the backend server. The backend server runs on a Node.js/Express.js framework. In addition to serving the static content of the webpage, the server also interprets the additional requests made by the page into queries on a MongoDB Atlas database. In order to identify locations/businesses, both the frontend and backend communicate Google Maps place IDs, which are long textual identifiers used by Google APIs to identify locations. We also used Adobe Illustrator to create assets for the webpage.

Challenges we ran into

As previously mentioned, we had to revise our original concept of extracting the "queer-friendliness" tags from Google Maps when it became clear that the API did not easily support it. We were not able to really begin on the project until we realized that we could manage our own database. Unlike the Google Maps tags, Geo-Queer allows actual LGBTQ+ customers to rate how safe they feel in certain spaces, instead of relying on the owners of those spaces to self-identify.

Another challenge was our general unfamiliarity with many of the technologies we used to build the website. Each one of us had to quickly learn how to use multiple technologies to put Geo-Queer together. In general, we were hampered by confusing documentation (especially MongoDB's documentation and the Google APIs' documentation), and slightly buggy technology (the Google Maps API used to display the map on the website seems to some bugs, though it may be our error).

Accomplishments that we're proud of

What are we not proud of! We feel that all the members are proud of every part that builds Geo-Queer. We are particularly proud of the cleanliness of our code, which allowed us to focus on the functionality of our application and not get bogged down in too many bugs. We are also proud of our correct usage of Javascript async/await features on both the frontend and backend, which allows Geo-Queer to be more responsive to user input than a synchronous design.

What we learned

It is safe to say that we all pushed ourselves to the max. The person responsible for the server set up had never tackled cloud-based databases like MongoDB before. The frontend usage of the various Google Places/Maps APIs were brand new to all of us. None of our members were very proficient in Node.js/Express.js before this project, and we did not have familiarity with all the Javascript features needed to use these frameworks to their maximum potential before we built Geo-Queer.

What's next for Geo-Queer

Beyond making Geo-Queer look prettier, we would like to:

  • implement more conformant/defensive handling of changing place IDs (per the Google API documentation)
  • implement protection against multiple voting
  • have some form of immediate response on the map: e.g. coloring the markers according to safety ratings without requiring the user to click on them first
  • support textual reviews/reports, e.g. by allowing users that visit Geo-Queer to submit their own ones
Share this project: