ProKelly · phanlehieu10 · May 17, 2026
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+# MyChart
+
+Thin-slice Django demo for a future multi-user video calling app.
+
+## What this currently does
+
+- Renders a lobby page where a user can enter a display name and room name.
+- Redirects users into a shareable room URL.
+- Shows the selected room and display name on the room page.
+- Provides a visible placeholder for the future video stream area.
+
+## What this does not do yet
+
+- No Algora token integration yet.
+- No WebRTC / real-time media transport.
+- No presence tracking or multi-user synchronization.
+- No production deployment or auth model.
+
+## Local development
+
+1. Create a Python environment.
+2. Install Django 4.x.
+3. Run `python manage.py migrate`.
+4. Run `python manage.py runserver`.
+
+## Recommended next thin slices
+
+1. Add a server-side endpoint that issues Algora-compatible room or session tokens.
+2. Connect `static/js/stream.js` to actual room join/presence logic.
+3. Replace the placeholder video tile with a real WebRTC client implementation.
+4. Add tests for token issuance, room authorization, and presence behavior.
diff --git a/base/templates/base/lobby.html b/base/templates/base/lobby.html
@@ -5,10 +5,22 @@
 <main>
     <section id="form-container">
         <img id="logo" src="{% static 'images/chat_room_64px.png' %}" alt="chatIcon">
-        <div>
+        <div class="hero-copy">
             <h1>Welcome to MyChart</h1>
-            <p>A group calling application for you</p>
+            <p>Create a shareable room link for a lightweight multi-user call demo.</p>
         </div>
+
+        <form id="join-form" method="get" action="{% url 'lobby' %}">
+            <label for="name">Display name</label>
+            <input id="name" name="name" type="text" maxlength="40" placeholder="Jane" required>
+
+            <label for="room">Room name</label>
+            <input id="room" name="room" type="text" maxlength="40" placeholder="team-sync" required>
+
+            <button type="submit">Join room</button>
+        </form>
+
+        <p class="hint">Thin slice only: this routes people into a shared room URL and surfaces room/member identity in the UI, but it does not implement real-time media yet.</p>
     </section>
 </main>
 {% endblock content %}
diff --git a/base/templates/base/main.html b/base/templates/base/main.html
@@ -1,19 +1,15 @@
 <!DOCTYPE html>
-
 {% load static %}
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title></title>
-        <meta name="description" content="">
+        <title>MyChart Demo</title>
+        <meta name="description" content="Thin-slice multi-user room flow for a future video call app.">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet"  href="{% static 'styles/main.css' %}">
+        <link rel="stylesheet" href="{% static 'styles/main.css' %}">
     </head>
     <body>
-        <h3>Main Template</h3>
-        {% block content %}
-
-        {% endblock content %}  
+        {% block content %}{% endblock content %}
     </body>
 </html>
diff --git a/base/templates/base/room.html b/base/templates/base/room.html
@@ -1,18 +1,35 @@
 {% extends 'base/main.html' %}
 
 {% block content %}
+<main class="room-page">
+    <section class="room-header">
+        <div>
+            <p class="eyebrow">Demo room</p>
+            <h1>{{ room_name }}</h1>
+            <p>Signed in as <strong>{{ display_name }}</strong></p>
+        </div>
+        <a class="secondary-link" href="/">Back to lobby</a>
+    </section>
 
-<main>
-    <section>
-        <p>Room Name: <span id="room-name-wrapper"> </span></p>
+    <section class="room-meta">
+        <div class="meta-card">
+            <span class="meta-label">Room slug</span>
+            <span id="room-name-wrapper">{{ room_name }}</span>
+        </div>
+        <div class="meta-card">
+            <span class="meta-label">Invite URL</span>
+            <code>{{ request.build_absolute_uri }}</code>
+        </div>
     </section>
 
     <section id="video-streams">
         <div class="video-container" id="user-container-1">
-            <div class="username-wrapper"><span class="user-name">My Name</span></div>
-            <div class="video-player" id="user-1"></div>
-        </div>     
+            <div class="username-wrapper"><span class="user-name">{{ display_name }}</span></div>
+            <div class="video-player placeholder-state" id="user-1">
+                <p>Camera stream placeholder</p>
+                <small>Next step: wire this room into Algora/WebRTC token issuance and peer presence.</small>
+            </div>
+        </div>
     </section>
 </main>
-
 {% endblock content %}
diff --git a/base/tests.py b/base/tests.py
@@ -1,3 +1,26 @@
 from django.test import TestCase
+from django.urls import reverse
 
-# Create your tests here.
+
+class LobbyFlowTests(TestCase):
+    def test_lobby_page_renders_join_form(self):
+        response = self.client.get(reverse('lobby'))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, 'Join room')
+        self.assertContains(response, 'Display name')
+        self.assertContains(response, 'Room name')
+
+    def test_lobby_redirects_to_room_when_room_is_provided(self):
+        response = self.client.get(reverse('lobby'), {'name': 'Alice', 'room': 'demo-room'})
+
+        self.assertEqual(response.status_code, 302)
+        self.assertEqual(response.url, '/room/?room=demo-room&name=Alice')
+
+    def test_room_page_displays_room_and_name_context(self):
+        response = self.client.get(reverse('room'), {'name': 'Alice', 'room': 'demo-room'})
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, 'demo-room')
+        self.assertContains(response, 'Alice')
+        self.assertContains(response, 'Camera stream placeholder')
diff --git a/base/urls.py b/base/urls.py
@@ -1,7 +1,8 @@
-from django.urls import path 
-from . import views 
+from django.urls import path
+
+from . import views
 
 urlpatterns = [
-    path("", views.lobby),
-    path("room/", views.room),
+    path('', views.lobby, name='lobby'),
+    path('room/', views.room, name='room'),
 ]
diff --git a/base/views.py b/base/views.py
@@ -1,7 +1,24 @@
-from django.shortcuts import render
+from django.shortcuts import redirect, render
+
 
 def lobby(request):
+    room_name = request.GET.get('room', '').strip()
+    display_name = request.GET.get('name', '').strip()
+
+    if room_name:
+        query = f"?room={room_name}"
+        if display_name:
+            query += f"&name={display_name}"
+        return redirect(f"/room/{query}")
+
     return render(request, 'base/lobby.html')
 
+
 def room(request):
-    return render(request, 'base/room.html')
+    room_name = request.GET.get('room', '').strip() or 'demo-room'
+    display_name = request.GET.get('name', '').strip() or 'Guest'
+    context = {
+        'room_name': room_name,
+        'display_name': display_name,
+    }
+    return render(request, 'base/room.html', context)