Study Bunny

Rooms
Leaderboard
Chat
Whiteboard
Create Room Form
Home Page 1
Video / Mic
Home Page 2

Inspiration

Our inspiration comes from personal experiences of the issues we had with all the mobile apps that competed for our attention, we realized that we needed an app that could help us study without using the traditional method that fell flat. Therefore we realized we needed a website that could help us easily connect with groups, study but also have fun at the same time.

What it does

StudyBunny is a real-time collaborative study platform that brings students together in virtual study rooms. Users can create a room with a unique 6-digit code and instantly share it with study partners—no accounts required. The platform features instant messaging for discussions, a collaborative whiteboard powered by Excalidraw for visual problem-solving, and integrated video/audio conferencing through Daily.co for face-to-face interaction. StudyBunny automatically tracks how long each participant spends in the room and displays rankings on a leaderboard with medals for motivation. Live presence indicators show who's currently active, a points system lets users reward helpful contributions, and all room data persists in MongoDB so study sessions are preserved across visits. The responsive interface makes it easy to switch between chat, whiteboard, and video modes, creating an all-in-one digital study hall experience.

How we built it

We built StudyBunny as a full-stack real-time collaborative platform using React with TypeScript and Vite for the frontend, and Node.js with Express for the backend. We leveraged Socket.io for real-time bidirectional communication powering our chat, quiz system, whiteboard synchronization, and presence updates. MongoDB Atlas stores persistent data including room information, whiteboard states, and time tracking sessions, while Daily.co's API handles video conferencing. The frontend uses TailwindCSS for a polished UI, and we implemented an in-memory message cache for reliable chat delivery. We deployed the backend on Render with automatic GitHub deployments, ensuring our hackathon demo stays live and responsive. The architecture separates concerns with service layers, controllers, and models, making the codebase maintainable despite being built under time constraints.

Challenges we ran into

We had zero prior experience with Socket.io, which powers all our real-time features (chat, whiteboard sync, presence). Learning event-driven architecture and debugging bidirectional communication patterns was initially overwhelming. We encountered issues with duplicate events, missed broadcasts, and socket disconnection handling. Through extensive debugging with console logs and iterative testing, we eventually mastered the socket lifecycle and built a robust real-time system

Our initial vision was to implement peer-to-peer video chat using raw WebRTC. We spent significant time wrestling with ICE candidates, STUN/TURN servers, signaling protocols, and cross-browser compatibility issues. After hitting multiple roadblocks with connection stability and audio/video sync, we made the pragmatic decision to pivot to Daily.co's API. This allowed us to deliver reliable video conferencing with minimal code while freeing us to focus on our unique collaborative features.

Accomplishments that we're proud of

Built a Full-Stack Real-Time Platform from Scratch: In a short timeframe, we created a complete collaborative study application with a React/TypeScript frontend, Node.js/Express backend, MongoDB persistence, and Socket.io powering real-time features. The fact that everything works together seamlessly—chat, video, whiteboard, presence tracking, and time analytics—is something we're incredibly proud of.

What we learned

We learned how to build production-ready real-time applications with Socket.io from scratch, mastering event-driven architecture, room broadcasts, and state synchronization across multiple clients. The experience taught us important lessons about pragmatic engineering decisions—knowing when to build custom solutions versus leveraging external services like Daily.co for complex features like video chat. We gained hands-on understanding of database trade-offs, learning to use in-memory storage for speed-critical features like chat, while leveraging MongoDB for persistent data like rooms and analytics. Working across the full stack—from React component design and TypeScript to Express APIs and WebSocket communication—deepened our understanding of how modern web applications integrate. Most importantly, we learned that comprehensive logging is essential for debugging distributed systems, and that making smart prioritization decisions under time pressure is crucial for shipping working products at hackathons

What's next for Study Bunny

We are planning to integrate a freemium business plan to create revenue, through a model that has a additional features added to incentive purchase of a subscription, we also plan to implement a headboard board system to further our intent of gameifying education and creating a quiz system in order to make it more educational.