TerraPin

Inspiration

College campuses are massive, breathing ecosystems, but it's hard to know what the vibe is at any given moment. Is the library packed? Is there free food at the mall? Is that club event actually fun, or completely dead? We realized that platforms like Yik-Yak are too disconnected from physical space, and BeReal doesn't help you discover new things. We wanted to build a living, breathing map of our campus, where students could share real-time moments, tag the emotional state of a location, and permanently record campus lore.

What it does

TerraPin is a real-time, map-based social network that captures the authentic heartbeat of the campus. Think of it as Yik-Yak meets BeReal on an interactive map. Students can drop pins at their exact locations with photos, text, and specific categorical tags like "Campus Vibe," "Mood," or "Lore."

As users interact with the map, they can upvote or downvote pins. Our algorithm ties these votes directly to the UI—highly upvoted pins dynamically increase in size and brightness, creating a glowing visual heat-map of campus energy that shows you exactly where the most hyped spots are right now.

How we built it

We focused on building a lightning-fast, mobile-responsive web app tailored for students on the go.

Frontend: We used Next.js and React for the user interface, styled cleanly with Tailwind CSS.
Mapping: We integrated Leaflet, plotting out specific UMD campus buildings and restricting the map bounds so users stay focused strictly on the campus ecosystem.
Real-time Backend: To make the map feel truly alive, we used Convex. It handles our database schema, real-time queries (so pins appear instantly for everyone without refreshing), and secure file storage for the photo uploads.
Native APIs: We leveraged the HTML5 Geolocation API for the "drop pin at my location" feature, and the MediaDevices API to build a custom, native-feeling camera interface directly in the browser.

Challenges we ran into

Integrating a complex mapping library like Leaflet into the React lifecycle, especially with Next.js Server-Side Rendering, was a hurdle early on. We had to dynamically import components to prevent the app from crashing before the browser's window object was defined.

Additionally, mid-hackathon, we pivoted our data structure to support upvotes and downvotes. Figuring out how to sync the frontend rendering, making the Leaflet SVG markers dynamically scale their radius and opacity based on live Convex database mutations, required some TypeScript wrangling.

Accomplishments that we're proud of

We are proud of the speed and responsiveness of TerraPin. By leveraging Convex, we achieved a truly real-time backend where pins, upvotes, and glowing map updates sync across all active users instantly, with zero lag and absolutely no page refreshing required.

We also spent a lot of time perfecting the UI to ensure the core action, dropping a pin, feels incredibly smooth and frictionless for a student rushing across campus. A major part of that seamless experience is our custom, in-browser camera integration. Instead of forcing users to fumble with clunky native file-picker menus, we utilized a snappy photo capture experience directly within the web app. It makes sharing campus moments feel just as instant as the events themselves.

What we learned

We learned how powerful a real-time backend like Convex is for social apps. We didn't have to write complex WebSocket logic, the map just updates for every user instantly. We also learned a lot about managing spatial data, handling browser geolocation APIs, and the importance of a seamless UX, specifically, making the process of dropping a pin feel as frictionless as possible for a student walking to class.

What's next for TerraPin

We want to take the "glow" effect even further by clustering highly upvoted pins into actual heatmaps. We also want to introduce an "Ephemeral Mode" where utility pins (like "the line at Looney's is 40 minutes long") automatically disappear after a few hours to keep the map fresh. Ultimately, we'd love to see TerraPin become the go-to app for UMD students to find out exactly what's happening on campus right now!