Daily Drop

Build campus community and spark new friendships with The Daily Drop, an engaging web app game where students team up or compete in thrilling real-time photo hunts for surprise locations dropped daily

Comment

Problem:

University life often lacks spontaneous opportunities for students to engage with their physical campus and connect with peers outside structured events. Digital fatigue is prevalent, and fostering genuine, real-world interactions remains a challenge. We aimed to create a fun, low-barrier way to encourage campus exploration and shared experiences.

Solution:

We developed The Daily Drop, a map-based web application designed for university communities. Leveraging gamification, time-limited "drops" (virtual markers) appear at specific campus locations. Students use the app to view active drops, navigate to the location using the integrated map showing their real-time position, and "capture" the drop by uploading a photo once physically close. This core mechanic encourages exploration, but more importantly, it creates shared, real-world moments. By converging on drop locations, students interact with peers outside their usual circles, turning the shared activity into a natural icebreaker. This fosters spontaneous encounters and lays the groundwork for potentially meaningful connections and future friendships.

Build Process:

We built The Daily Drop as a React single-page application, utilizing functional components and hooks. Firebase served as our backend, handling Email/Password Authentication, storing drop details and user submissions in Firestore, and managing photo uploads via Firebase Storage. The @react-google-maps/api library rendered the interactive map, displaying user location and custom drop markers. Client-side routing was managed with React Router, and the application was deployed via Netlify.

Challenges:

The primary challenge was the tight hackathon timeframe, forcing us to prioritize core MVP features like the map interaction and capture loop, deferring elements like real-time player visibility. Configuring API keys and environment variables across Firebase, Google Maps, and Netlify required careful attention. Ensuring reliable geolocation checks within the browser's limitations and debugging deployment configurations for our subdirectory structure on Netlify were also key hurdles we overcame.

Share this project:

Updates