Queering The Banks

Explore queer joy on the banks of the Raritan and Rutgers University, New Brunswick.

Comment

Inspiration

I was inspired by the project from Queering the Map. Seeing all the pins of different people put their experiences for everyone to see made me want to do a hyper-localized version for Rutgers, for and by fellow students. Since one of the themes of this hackathon was Queer Joy, I wanted to incorporate that by having this map for mainly positive, funny and/or uplifting moments among the queer community at Rutgers.

What it does

It can search for specific university buildings and places, pin (using a custom emoji legend) users' experiences and have it updated in real time to show on the webpage for everyone.

How we built it

The Tech Stack I used was the following:

  1. Frontend Foundation: HTML, CSS, & JavaScript To keep the application lightweight, fast, and easy to deploy within the hackathon time limit without the overhead of massive frameworks like React.

  2. Mapping Engine: Leaflet.js & OpenStreetMap Leaflet.js handles the interactive map logic (zooming, panning, dropping markers). We used OSM for the visual tile layer because it natively includes detailed university building names.

  3. The Database: Google Firebase (Realtime Database) Serves as the Backend-as-a-Service (BaaS). When a user drops a pin, the coordinates, story, emoji choice, and timestamp are pushed to Firebase as a JSON object.

  4. Syncing: Firebase Uses WebSocket connections, instantly syncing new pins to every user currently on the site without the need to refresh the page.

  5. The Smart Search Engine: Fuse.js Used the lightweight "fuzzy search" library to build a custom JSON dataset of major Rutgers buildings and their slang/acronyms (e.g., "CASC", "Yard"). Since it is typo-tolerant, user inputs will be mathematically calculated and routed to the closest match instantly without needing a server call.

  6. The Live Search API Fallback: OpenStreetMap Nominatim API If a user searches for an obscure dorm that isn't in the Fuse.js dataset, we use asynchronous JavaScript (async/await and fetch()) to ping the live Nominatim REST API, creating a highly resilient "fallback architecture" that avoids CORS errors and keeping API usage free.

  7. Deployment & Hosting: GitHub Pages Version control via Git, seamlessly connected to GitHub Pages for instant, continuous deployment (CI/CD) and free HTTPS hosting.

Challenges we ran into

Handling map interactions and building labelling.

Accomplishments that we're proud of

Being able to deploy this app within the time restraints.

What we learned

Using map-based apps is harder than it looks.

What's next for Queering The Banks

Student verification, spam IP handling, admin privileges.

Share this project:

Updates