Verification Checklist
Confirm you understand the key concepts and can implement video calls in a school management app.
Before moving on, make sure you can honestly check each item below. These are the concepts that will come up in Project 2, in code reviews, and in your work on EduTrack.
Concept Understanding
Read each item and answer it in your own words — out loud or in writing. If you can explain it simply, you understand it. If you find yourself reading the question again, go back to the relevant page.
Jitsi Meet vs Daily.co
- I can explain the difference between Jitsi Meet and Daily.co in one sentence each
- I know when to choose Jitsi (prototype, no account needed, quick embed) and when to choose Daily.co (production, programmatic room creation, expiring rooms, access control)
- I understand why the Jitsi "room name = access" model is a security limitation for sensitive consultations
Room Names and URLs
- I know how Jitsi room names work: the room is just a URL — any string becomes a room at
meet.jit.si/[name] - I understand why room names for real appointments should be unpredictable (not just the sequential appointment ID)
- I know the Daily.co room URL format:
https://yourdomain.daily.co/room-name
The API Key
- I know where to find the Daily.co API key in the dashboard (Developers → API Keys)
- I understand the difference between the API key (secret, server only) and the domain (not secret, can be in frontend)
- I can explain in one sentence why the API key must never appear in frontend/browser code
Server-Side Room Creation
- I understand why rooms must be created from a Supabase edge function, not from React code in the browser
- I can describe the flow: browser calls edge function → edge function calls Daily.co API → returns room URL to browser
- I know what the
expproperty does in the room creation request (Unix timestamp expiry)
Production Details
- I know that camera and mic require HTTPS — they may not work at a plain
http://localhostURL in all browsers - I know that iOS Safari requires a user tap (gesture) before camera can activate — no auto-start on page load
- I can describe what to show the user when camera/mic permission is denied (a helpful error message, not a broken page)
Can You Describe This Flow?
Without looking at the code, can you describe in plain words how a "parent-teacher meeting" feature works when it includes video?
Write or say your answer, then check against the reference below.
Reference answer — click to expand after you've tried
- Branch admin or teacher schedules a parent-teacher meeting (select parent, pick a time slot, confirm)
- The React form calls a Supabase edge function to save the appointment
- The same edge function (or a second one triggered after saving) calls the Daily.co API to create a video room with:
- A unique room name (e.g., based on the appointment ID)
- An
expset to the meeting end time + 30 minutes enable_knocking: truefor privacy
- The edge function saves the room URL back to the
appointmentstable - Both the teacher and the parent see the appointment detail screen in their respective apps
- At or near the meeting time, both see a "Join Video Call" button
- Clicking the button opens the room URL in a new tab (or an embedded iframe)
- After the meeting expires, the room is automatically deleted by Daily.co
The API key never left the server. The browser only ever received a URL.
Practical Exercises
Complete these before your next session. They take 45–90 minutes total.
Embed a Jitsi room (15 minutes)
Create a new React component called TestVideoRoom.tsx. Add the @jitsi/react-sdk package. Embed a Jitsi room with the room name sahinov-test-[your-name]. Add your name as the displayName in userInfo. Load the page. Confirm the video interface appears and your camera turns on.
Create a Daily.co account (10 minutes)
Go to daily.co. Create a free account. Find your API key. Save it to VaultMate under your project name. Note your domain (yourname.daily.co).
Create a room via the API manually (20 minutes)
Using a tool like Hoppscotch or Insomnia, make a POST request to https://api.daily.co/v1/rooms with:
- Header:
Authorization: Bearer YOUR_API_KEY - Body:
{ "properties": { "exp": <timestamp 1 hour from now> } }
Note the url in the response. Open it in your browser. Confirm a video room appears.
Write the edge function (30 minutes)
Using the example from the Daily.co Rooms page, write a Supabase edge function called create-video-room. It should:
- Accept
appointmentIdin the request body - Call the Daily.co API to create a room named
test-[appointmentId] - Return the room URL
Test it with supabase functions serve locally. You don't need a real appointment in the database for this exercise — hardcode a test appointment ID.
Questions to Bring to the Next Session
If you are unclear on any of these, write down your question and bring it to the next session:
- How do participant tokens work in detail? When would I issue an owner token vs a regular token?
- How do I handle the case where the Daily.co API is down? Does my room creation fail silently?
- For the EduTrack parent-teacher meeting feature — should we embed the video room inside the app, or open it in a new tab?
- What happens if the teacher joins but the parent hasn't created an account yet? Can they still join with just a link?
Key Terms Reference
| Term | What it means |
|---|---|
| WebRTC | The browser technology that makes peer-to-peer video calls possible. You don't write this — Jitsi and Daily.co handle it for you. |
| Room | A virtual space where participants join a video call. Has a name and a URL. |
exp | Expiry time. A Unix timestamp (seconds since 1970) after which a Daily.co room auto-deletes. |
| Participant token | A short-lived credential that authenticates a specific user into a specific room. More secure than URL-only access. |
enable_knocking | Daily.co feature: participants wait in a lobby until the room owner admits them. |
| Unix timestamp | A number representing a point in time: seconds since 1 January 1970. Math.floor(Date.now() / 1000) gives you the current Unix timestamp in JavaScript. |
| HTTPS | Secure web protocol. Required for camera and microphone access in all production browsers. |
getUserMedia | The browser API that requests camera and microphone access. Jitsi and Daily.co call this internally — you interact with it only when checking permissions. |
Well done for completing this module. Video calls are one of the features that visibly transform a basic form-based app into a real platform — the kind that clients pay for because it removes the friction of switching between tools.