Group Study

A student picks "Create New Room" → chooses a subject + topic → gets a shareable 6-character room code → invites friends. Anyone with the code (any peer in the school, any teacher) can join from their own app's Group Study screen and land in the same video meeting. Teachers run rooms the same way for facilitated sessions.

At a glance

Who can do this	Students create + join · Teachers create + join + moderate. Discoverability is by room code (or share link), so participation is opt-in by code
Where it lives	Student app /dashboard/groupstudy, /dashboard/groupstudy/meeting-room, /dashboard/groupstudy/meeting/:roomId · Teacher app /dashboard/groupstudy, /dashboard/groupstudy/room-created, /dashboard/groupstudy/meeting/:roomId
Triggers notifications?	Not directly from the room itself — invitations go out via the share-link / copy-code action; meeting itself is real-time only
Related features	Live Classes (teacher-led broadcasts) · Notifications · Messages & Chat

How it flows

Lifecycle

A Waiting room exists only as a code — until someone presses Start Meeting / Join, no audio or video connection is open.

Step-by-step

1. Open Group Study

• App / route (student): /dashboard/groupstudy.
• App / route (teacher): /dashboard/groupstudy — same UX, different navigation chrome (BottomNav vs BottomBar).
• The home screen shows two big action cards side-by-side:
  • Create New Room (green plus icon) — opens the create modal.
  • Join Room (yellow hash icon) — opens the join code modal (student); on the teacher app this is currently a placeholder (TODO: Implement join room functionality).
• Below the cards: a Recent Rooms list of recently-used rooms with a Join button. (Currently rendered from mock data — see edge cases.)

2. Create a room

• Modal — student app (ChangeTopicModal): two dropdowns — Subject (Mathematics / Science / English / History / Geography) and Topic (Fractions / Algebra / Geometry / Calculus). Both required.
  • Submit → routes to /dashboard/groupstudy/meeting-room carrying { subject, topic } in router state.
• Modal — teacher app (CreateRoomModal): same Subject + Topic dropdowns, plus a Date & Time text field (DD/MM/YYYY || AM:PM placeholder — schedule support).
  • On submit, a 6-character uppercase room code is generated client-side (e.g. D1P22K) and the teacher is routed to /dashboard/groupstudy/room-created.

3. Room created (success screen)

• Shown to teachers after creation. Page elements:
  • Big green check-circle and "Room Created Successfully!" headline.
  • Big room code displayed (e.g. D1P22K) with a copy button — tapping copies to clipboard with a toast "Room code copied to clipboard!".
  • Invite People button (currently shows "Invite people feature coming soon!").
  • Share Link button (currently shows "Share link feature coming soon!").
  • Topic preview card showing the chosen topic + "Interactive Learning Session" subtitle.
  • Start Meeting button at the bottom — routes to /dashboard/groupstudy/meeting/:roomCode with the room data in router state.

4. Meeting Room (warm-up screen)

• App / route: /dashboard/groupstudy/meeting-room (student-only stop-over after creating via the simple Change Topic modal).
• Shows two scrollable lists:
  • Favourites — rooms the student has marked as favourites (Add / Added toggle button per row).
  • Recents — recently-attended rooms.
• Start Meeting button at the bottom routes into /dashboard/groupstudy/meeting/ROOM123 (currently hard-coded route; see edge cases).

5. Join via code

• App / route: Student tap "Join Room" on /dashboard/groupstudy → JoinRoomModal.
• Fields:
  • Room Code — large centred input, auto-uppercases keystrokes, max length 6, prefilled with D1P22K for demo.
• Join Room button is disabled until the code is non-empty. On submit:
  • Routes to /dashboard/groupstudy/meeting/:roomCode with router state { roomCode, subject: 'Mathematics', topic: 'Fractions' }.

6. Active meeting

• App / route: /dashboard/groupstudy/meeting/:roomId (same path on student and teacher apps).
• Top bar: back arrow, "Group Study" title, more-menu (overflow).
• Session info bar: a chip showing Topic (Subject) and a close-X.
• Whiteboard area in the centre — currently a static maths-equation example with a coloured circle illustration, intended as a shared canvas surface.
• Participants strip — emoji avatars with online dot + an "active speaker" highlight.
• Bottom controls:
  • Mic toggle (defaults off).
  • Video toggle (defaults on).
  • Help / chat / edit icons (chat opens the in-meeting messaging panel).
  • Red End Call button — routes back to /dashboard/groupstudy.

7. Teacher moderation

Teachers join rooms the same way students do (/dashboard/groupstudy on the teacher app). Today the moderation surface is implicit — a teacher in a room is just another participant with the standard mic / video / chat / end controls. There is no separate "kick" / "mute all" button wired up in the active-meeting page yet (see edge cases). Teachers can also create their own rooms with a scheduled date/time field, which students cannot do.

Who can be invited

• Anyone with the 6-character room code can join — codes are randomly generated and shared out-of-band (copy / share link / WhatsApp / etc.).
• There is no per-section gate or per-class gate inside the meeting page — anyone in the school who taps the code in their own Group Study screen lands in the same room.
• Teachers and students share the same join entry point, so a teacher who knows a student-created room's code can drop in and moderate.

Edge cases & things to test

• Recent Rooms list: currently rendered from mock data (Maths Study Room × 2). Confirm whether the expected behaviour is to surface real recent rooms; if so, this list will need wiring up.
• Meeting Room "Start Meeting" route: hard-coded to /dashboard/groupstudy/meeting/ROOM123 regardless of which favourite/recent the student tapped — confirm the intent and replace with the actual selected room's code.
• Join Room (teacher app): tapping the Join Room card is a no-op (TODO). A teacher today can only join a room by typing the URL or being routed to it directly.
• Invite People / Share Link buttons: both show "feature coming soon" toasts on the Room Created screen — confirm the rollout plan.
• 6-char code uniqueness: codes are generated client-side via Math.random().toString(36) — there is a non-zero collision probability. Test what happens if two rooms generate the same code.
• Code case sensitivity: Join Room input force-uppercases input; backing into the route directly with a lowercase code — does the room still resolve?
• Empty code submit: Join button must be disabled when code is empty.
• Permissions on entering active meeting: if mic/camera permission is denied, the toggles must reflect the off state and not silently look "on"; pressing End Call should release tracks cleanly.
• Network drop mid-meeting: confirm the user is bumped back to /dashboard/groupstudy (or shown a reconnect spinner) rather than a frozen UI.
• Joiner before host starts: a peer joins via code before the host taps Start Meeting — what do they see? (Intended: a waiting state.)
• Host leaves the room early: if the host taps End Call but other participants are still in, do peers get bounced or do they continue?
• Meeting time-bounding (teacher schedule): teacher sets a future date/time on creation — does the room actually gate joining until then? (Today the Date & Time is a free-text placeholder — confirm validation.)
• Whiteboard collaboration: today the whiteboard is static example content. Confirm whether collaborative drawing is wired on the meeting screen.
• Participants strip vs reality: today the participants list is mock (Alex / Sarah / Mike / Emma). Confirm real attendees are surfaced.
• Two devices, same user: same student logs in on phone + laptop and both join the same room — should both connect, or should one be ejected?
• Routing back from active meeting: tapping the top-left arrow in active meeting goes to /dashboard/groupstudy, not to /dashboard/groupstudy/meeting-room — confirm this is intentional.
• Theme: dark vs light — whiteboard backdrop swap (from-gray-50 to-gray-100 vs from-gray-800 to-gray-900); ensure both render legibly.

Related

• Live Classes — formal teacher-led broadcasts (different from peer study rooms)
• Notifications — coin / homework / live-class pings (group study itself currently does not push)
• Messages & Chat — out-of-band 1:1 / group chat used to share room codes