Inspiration
Campus life is full of energy, events happening, people needing help, local businesses running deals, volunteer opportunities passing by unnoticed. But there was never one place where all of it lived together. We were inspired by the movie "Pay It Forward" the idea that small acts of kindness ripple outward and build something bigger than themselves. We asked: what if a university campus had a living map that showed everything happening around you in real time? What if helping someone earned you real value? That question became BuzzOnCampus.
What it does
BuzzOnCampus is a campus lifestyle platform built around a live interactive 3D map. Students sign up with their university .edu email, verified through OTP email confirmation, and are placed into a real-time map of their campus.
On the map students can discover and post content in four categories:
- Events : study groups, club meetups, social gatherings posted as live pins on the map
- Volunteer : opportunities to help out on campus, tracked toward class credit hours
- Help Requests : ask the campus community for academic, physical or technical assistance
- Place Posts : community content attached to real campus buildings and local businesses, discovered by clicking any location on the map
Every student has a Buzz Points balance that grows as they participate and help others. The platform tracks Buzz Points earned through volunteering and completing help requests, laying the foundation for a campus kindness economy.
The map is the signature experience , built with Mapbox GL JS in full 3D with building extrusion. Each user appears as a custom 3D avatar rendered in Three.js in their chosen personal color. Clicking any business or building on the map opens a community notice board showing what students have posted there, powered by Mapbox's built-in POI layer so zero manual location data entry is needed.
How we built it
We built BuzzOnCampus as a full-stack web application over 18–20 hours at the Kent State University Hackathon.
Frontend was built with React + Vite + TypeScript, using Mapbox GL via react-map-gl for the interactive campus map. We used Tailwind CSS for styling, Zustand for global state management, and React Router v6 for navigation. Each university gets its own color theme, YSU red, Kent State blue, Ohio State scarlet, applied consistently across the navbar, map pins, detail panels, and buttons.
Backend and Auth are powered entirely by Firebase, Firestore for the database, Firebase Authentication for user sign-in, and Firebase Hosting for deployment. We implemented university-specific email validation on signup, so only verified university emails (or personal emails for testing) can register.
AI and Generative Tools helped us move faster on UI components and overcome blockers when time was tight.
Challenges we ran into
GitHub conflicts hit us early. With four people pushing to the same repo across branches, we ran into merge conflicts and diverged histories that cost us valuable time to untangle.
Infrastructure decisions slowed us down mid-hackathon. We originally planned to deploy on AWS, App Runner, RDS, SES, but slow network speeds at the venue meant even small file uploads took minutes. After fighting it for hours, we made the call to move everything to Firebase, which turned out to be the right decision for a hackathon timeline.
3D avatars were on our roadmap, we had planned to render custom Blender .glb models on the map using React Three Fiber. We ran out of time to implement them fully, so we moved to a clean 2D marker system instead.
Authentication almost didn't make it in. We debated skipping it entirely to save time, but decided to push through because we wanted to learn how to implement it properly end-to-end. We're glad we did, it works, it's university-locked, and it made the whole product feel real.
Accomplishments that we're proud of
We're most proud of two things: the authentication flow and the visual UI. The auth system validates university email domains, stores user data in Firestore, persists sessions across refreshes, and applies a university-specific color theme the moment you log in. The UI, the dark map, the floating pins, the sliding detail panel, the Buzz Points system, came together in a way that genuinely looks and feels like a product.
What we learned
- Firebase is remarkably powerful for hackathon-speed development
- Git workflow with four people requires discipline from hour one
- Cutting scope early and doing fewer things well beats building everything halfway
- The best hackathon decisions are made when the whole team communicates openly about what's working and what isn't
What's next for BuzzOnCampus
The main goal of BuzzOnCampus is to fully implement the Buzz Points system, which was the core inspiration behind the project. Buzz Points are designed to reward students for actively participating in campus life, whether that’s attending events, helping others, volunteering, or contributing to the community. These points can then be redeemed for real, meaningful benefits such as free food, gifts, and services like rental scooters. Moving forward, we aim to partner with universities and local businesses to turn Buzz Points into a campus-wide incentive system that not only encourages engagement but also makes student life more interactive, connected, and rewarding.
Built With
- authentication
- css
- firebase
- mapbox
- react
- router
- tailwind
- typescript
- vite
- zustand
Log in or sign up for Devpost to join the conversation.