Badger Board

Inspiration

When Reddit launched r/place, millions collaborated on a single pixel canvas, creating something beautiful through collective creativity. We wondered: what if we could bring that magic to UW Madison's campus, but with a focus on the local community? What if location itself became part of the creative experience?

TDS challenged asked us to leverage networks in innovative ways. We saw an opportunity to combine GPS networks, WebSocket protocols, and PostGIS spatial databases to create something unique—a collaborative canvas that only exists when you're physically present in a building. BadgerBoard transforms campus buildings into creative communities, giving each space its own digital identity.

What it does

BadgerBoard is a location-gated collaborative pixel art platform for UW Madison. Here's how it works:

1. GPS Verification: When you open BadgerBoard, it uses GPS networks to detect which campus building you're in
2. Building-Specific Canvas: Each building has its own 100×100 pixel canvas—Morgridge Hall students draw on Morgridge's board, Memorial Library visitors create on the Library's canvas, etc...
3. Real-Time Collaboration: Changes sync instantly via WebSocket networks—see other students drawing in real-time
4. Persistent Art: Every pixel is stored in our database, so the artwork evolves over days and weeks

How we built it

Frontend (React & Bootstrap) With a consistent frosted glass aesthetic, we created a landing page and color selector component to bring functionality to the 100x100 pixel canvas. Additionally, we implemented an admin panel to handle adding new buildings to the database to expand the reach of Badger Board.

Backend (Node.js, Express, & WebSocket) Authentication Service: REST endpoint that validates GPS coordinates against building boundaries using PostGIS ST_Intersects WebSocket Server: Real-time pixel updates broadcasted to all connected clients in the same building Database Layer: PostgreSQL with PostGIS extension storing building polygons and pixel data as rasters

Challenges we ran into

Initially, our frontend and backend spoke different languages. That is, our frontend sent hex colors while our backend expected rgb values. Additionally, proper communication to our API to maintain seamless canvas display on multiple devices proved to be a difficult challenge for us to overcome.

Accomplishments that we're proud of

1. Polished UI
2. Creative use of gps networks to connect users
3. WebSocket architecture being able to handle multiple concurrent artists
4. Scalable architecture with possibilities to add any new campus buildings

What we learned

We learned a lot about the frontend & backend workflow found in modern projects, and we learned a lot about implementing databases, with levels of complexity between the data and user such that it is difficult to breach.

What's next for Badger Board

We would love to add the rest of the UW-Madison campus buildings other than the small set we have currently. Additionally, we would like to revisit possibly adding cooldown timers to users to limit spam. Lastly, making a full mobile integration would not only make our app more accessible to more users, but also vastly improve gps accuracy, as laptops tend to not be very precise.

Built With

• bootstrap
• express.js
• node.js
• python
• react
• redis
• vercel
• websocket