StudyZen

Inspiration

Studying alone is hard, finding study buddies is harder, and keeping everyone in sync (notes, chat, music, focus) is the hardest. StudyZen brings a cozy “study hall” vibe with modern realtime: rooms you can join, chat in, share notes, and listen to the same music while you work.

What it does

Create or join study rooms (public or private)
Live chat with members (realtime)
Shared notes that update for everyone
Presence: see who’s in the room right now
Synchronized music:
- Simple: local MP3 + realtime broadcast
- Advanced: Spotify embed (previews) or full playback via Spotify Web Playback SDK (Premium + login)
Profiles, membership, and permissions via Supabase RLS

How we built it

Frontend: React (Vite), Tailwind; retro-modern UI
Auth & DB: Supabase (Auth, Postgres, Row-Level Security)
Realtime: Supabase Realtime
- Postgres Changes for chat/notes streams
- Broadcast + Presence channels for music sync and “who’s here”

Challenges we ran into

RLS recursion: Avoided policy loops between rooms and room_members by making room_members select “self-only” and letting rooms reference membership one-way.
Auth → profile sync: New users existed in auth.users but not profiles; solved with a Postgres trigger.
Browser autoplay: Remote play could be blocked until a user gesture; added first-click prompts and graceful fallbacks.
Env & CORS: Ensured Supabase Auth Site URL and Vite env vars matched dev/prod domains.

Accomplishments that we're proud of

A smooth, realtime room experience (chat + presence + synchronized audio)
Solid RLS policies that feel permissive for users but safe for data
Aesthetic, accessible UI
One-click room creation with auto-membership and live updates

What we learned

Designing RLS is about data flows and who acts on which rows (INSERT uses WITH CHECK, SELECT/UPDATE/DELETE use USING).
Supabase Realtime shines when combining Postgres Changes (durable history) with Broadcast/Presence (low-latency sync).
UX matters for collaboration: tiny details (presence avatars, empty states, optimistic chat sends) make it feel alive.