Multiplayer Chat
Timer
Spawn Area
Digital Clock
Phone Screen
Inside Building
Music Player
Map Art (Completely Hand Drawn)
Home Page
Profile Settings

StudyVerse

Inspiration

The inspiration for StudyVerse came directly from my own study experiences with friends. While we meet up occasionally, I often struggle when studying alone. Without the presence of others, it is easy to feel unmotivated, distracted, or caught up in unrelated thoughts. Simply being around my friends, even when we are not intensely focused, makes me feel more motivated and grounded. Even if I do not complete a large amount of homework, the shared experience of being together still feels productive and meaningful.

StudyVerse aims to bring that experience online for people who may feel like they are missing out. Sometimes friends are busy, schedules do not align, or attending social study spaces like libraries is not feasible. Existing online tools do not fully solve this problem. Text message chats lack social presence, Discord often requires constant active participation to keep conversations alive, and video calls demand sustained attention and energy.

This project creates a virtual third space where users can casually exist together with minimal social pressure. Instead of scheduling calls or actively maintaining conversations, users can simply walk into a shared space, enter a voice room, or participate in public chat naturally. By emphasizing presence over constant interaction, StudyVerse allows people to hang out, study, and feel connected in a low-pressure, organic way.

What We Built

StudyVerse is a real-time, multiplayer virtual campus modeled after the University of Florida. When users log in, they spawn into the world as a character and can freely walk around the campus while seeing other players move in real time.

Key features include:

Real-time multiplayer movement and presence
Text chat and location-based voice chat rooms
Enterable buildings that place users into shared voice spaces
Character selection and profile customization
An in-game phone with apps such as:
- A digital clock and timer
- A lofi music player
- Profile and settings editor

All visual assets were hand-drawn in a cohesive pixel-art-inspired style, ensuring a consistent and intentional visual identity without using AI-generated art.

How We Built It

StudyVerse was built using a Next.js and Supabase stack, allowing us to combine a modern web framework with real-time backend services. We implemented authentication through Supabase to manage user accounts and sessions securely.

To support multiplayer interaction, we used Supabase Realtime for core features such as live text chat, voice chat, and presence tracking. This enabled users to see each other move around the world, communicate instantly, and join shared voice rooms when entering buildings. Real-time updates ensured that all players experienced the same shared environment. For the front end, we used CSS and Tailwind to style all non–pixel-art elements.

Challenges We Faced

One of the biggest challenges in building StudyVerse was our commitment to avoiding AI-generated art. Every visual asset, including the campus map, characters, and icons, was hand-drawn. While this gave the project a cohesive and intentional visual identity, it was extremely time consuming. Designing an entire explorable map and a full set of custom icons required careful planning, iteration, and consistency across many assets.

Another major challenge was using Supabase Realtime for the first time. We relied on it to power real-time chat, presence tracking, and multiplayer interactions. Learning how to manage real-time updates, synchronize player movement, and handle user presence across the shared world introduced a steep learning curve. On top of that, we intentionally chose free or low-cost APIs to keep the project affordable, which meant we had to be careful about how features were designed and implemented.

These challenges pushed us to balance technical complexity, visual design, and performance while staying focused on the core experience of shared presence.

What We Learned

Throughout the development of StudyVerse, we learned a wide range of technical and creative skills. One of our biggest takeaways was learning how to create pixel art by hand, including drawing large maps, character animations, and backgrounds. Drawing the visuals at this scale in a new art style took patience and constant reiteration.

Using Supabase Realtime was another major learning experience. We learned how to implement and manage real-time features such as chat, presence tracking, and voice chat, and how these systems work together to support a shared, multiplayer environment.

Finally, this was our first hackathon, which taught us valuable lessons beyond technical skills. We learned how to work under time constraints, prioritize core features, and adapt quickly when challenges arose. Overall, the experience helped us grow both as developers and as collaborators.