Skip to content
live in dev · checking…

Flow

Study better, together.

A virtual study room web app for focused, shared work sessions — task tracking, live presence, and cross-network video calling built on Express.js, vanilla JS, Supabase, and WebRTC (with Cloudflare Realtime TURN for reliable connections across networks).

flow-study.mesource on GitHub
the problem
Studying remotely with friends means juggling a video call, a timer, a to-do list and music across separate apps.
what I built
One room, joined with a 6-character code, with peer-to-peer video, a synced pomodoro timer, shared tasks, synced music and an AI in the chat.
A Flow study room: who is in it, room audio from YouTube or Spotify, the video tile, the session timer, and shared tasks and chat
Flow's login: “A space to think. A rhythm to work.”, with a timer preview and an atmosphere picker
Flow's lobby: join a room with its 6-character code and optional PIN, or create one

What it does

  • Rooms you join with a 6-character code; state syncs through Supabase Realtime instead of a WebSocket server
  • Peer-to-peer WebRTC video, relayed through Cloudflare Realtime TURN when networks block direct connections
  • A synchronised pomodoro timer: if one person pauses, everyone pauses
  • Shared tasks with a live progress bar, stored in Postgres
  • Type /ai in the room chat and a Groq-hosted Llama 3 model answers for the whole room
  • Lo-fi music through YouTube: paste a link and it plays in sync for the whole room

How it's built

each layer feeds the one below

Browser
  • vanilla JS app (ES modules)
  • WebRTC video, peer to peer
Realtime
  • Supabase Realtime: room state, chat, signalling
  • Cloudflare Realtime TURN relay
Server and data
  • Express: static files and the /ai endpoint
  • Groq: Llama 3
  • Supabase Postgres: rooms, tasks, sessions (row-level security)
Express.jsSupabaseWebRTCCloudflare
next projectAtmos