Inspiration

We've all been there—trying to squeeze in a workout between back-to-back classes, but every fitness app out there feels like a boring corporate spreadsheet or a clinical tracker that's totally out of touch with actual college life. We wanted something fun, hyper-local, and built around keeping each other accountable without feeling like a chore. That’s why we built LockD—a UMD-themed social fitness web app where your workouts actually show up on your friends' phone lockscreen widgets.

What it does

LockD brings campus fitness to life through an interactive phone lockscreen widget simulator. When you finish a workout at campus spots like Eppley Recreation Center or Ritchie Coliseum, you can: Upload a photo and instantly preview how it looks on your live lockscreen widget. Generate custom, UMD-spirited workout captions referencing Testudo and campus pride using generative AI. Log your biometrics (calories, active minutes, miles) and keep a live streak going. Share your activity to a social campus feed where friends can drop real-time emoji reactions.

How we built it

We built LockD as a fully functional React application styled with Tailwind CSS: Frontend & State: We used React hooks and browser localStorage so your streaks, logs, and reactions persist across refreshes. Media Handling: We integrated the HTML5 FileReader API so users can upload local workout photos and see them render immediately inside the live widget preview. AI Integration: We wired in the Google Gemini API (gemini-3-flash-preview) to power our caption generator, creating tailored UMD captions based on your workout location and live stats. UI Polish: We brought the campus vibe together with Lucide icons, glassmorphism cards, and a custom Muscular Testudo SVG logo.

Challenges we ran into

Trying to make a browser-based lockscreen widget feel and look like a genuine mobile widget without a native app wrapper was a big hurdle. Wrangling async AI requests, live image uploads via FileReader, and making sure all widget state updates synced cleanly across tabs took plenty of debugging under hackathon time limits.

Accomplishments that we're proud of

Shipping a fully interactive, responsive React prototype with instant data persistence and zero lag. Crafting a cohesive UMD brand identity with custom glassmorphism and our custom Muscular Testudo SVG asset. Getting the Google Gemini API cleanly integrated to generate witty, context-aware captions on the spot. Designing a convincing, live lockscreen widget simulator that feels like a real phone screen.

What we learned

We leveled up our full-stack React architecture skills under tight constraints. We figured out how to seamlessly incorporate generative AI into a user flow without making it feel gimmicky, mastered browser storage persistence, and learned how to build a product our campus community would actually want to use.

What's next for LockD App

Real Backend & WebSockets: Replacing localStorage with a Node.js/Express backend and WebSockets so lockscreen widgets update across real devices in real time. Native Mobile iOS/Android Widgets: Packaging the app with React Native or Swift/Kotlin so widgets render natively on actual phone lockscreens. Campus Leaderboards: Adding dorm vs. dorm fitness challenges, intramural league integration, and campus-wide Testudo leaderboards.