2025-07-26

boxofficefantasy.code-workspace

@@ -17,12 +17,27 @@
         "console": "integratedTerminal",
         "envFile": "${workspaceFolder}/.env"
       },
+      {
+        "name": "Run Uvicorn Django Server",
+        "type": "debugpy",
+        "request": "launch",
+        "module": "uvicorn",
+        "args": ["boxofficefantasy_project.asgi:application", "--reload",],
+        "django": true,
+        "console": "integratedTerminal",
+        "envFile": "${workspaceFolder}/.env"
+      },
       {
         "name": "Start Webpack Dev Server",
         "type": "node",
         "request": "launch",
         "program": "npm",
-        "args": ["run", "dev", "--config", "${workspaceFolder}/frontend/webpack.config.js"],
+        "args": [
+          "run",
+          "dev",
+          "--config",
+          "${workspaceFolder}/frontend/webpack.config.js"
+        ],
         "cwd": "${workspaceFolder}/frontend",
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen"
@@ -31,7 +46,7 @@
         "name": "Launch Chrome",
         "type": "chrome",
         "request": "launch",
-        "url": "http://127.0.0.1:8000", // adjust based on your local server
+        "url": "http://localhost:3000", // adjust based on your local server
         "webRoot": "${workspaceFolder}",
         "sourceMaps": true,
         "trace": true
@@ -57,6 +72,26 @@
   "tasks": {
     "version": "2.0.0",
     "tasks": [
+      {
+        "label": "Start Redis",
+        "type": "process",
+        "command": "docker",
+        "args": [
+          "run",
+          "--rm",
+          "--name",
+          "redis-boxofficefantasy-dev",
+          "-p",
+          "6379:6379",
+          "redis"
+        ],
+        "isBackground": true,
+        "problemMatcher": [],
+        "group": {
+          "kind": "build",
+          "isDefault": false
+        }
+      },
       {
         "label": "🗑️ Delete all Movies",
         "type": "shell",
@@ -124,7 +159,11 @@
         "other": true,
         "comments": true,
         "strings": true
-      },
+      }
+    },
+    "files.exclude": {
+      "**/__pycache__":true,
+      ".venv":true
     },
     "files.associations": {
       "*.dj.html": "django-html"

boxofficefantasy/admin.py

@@ -1,11 +1,16 @@
 from django.contrib import admin
-from .models import League, Season, UserSeasonEntry, Movie, MovieMetric, ScoringRule, Pick
+from .models import League, Season, UserSeasonEntry, Movie, MovieMetric, Pick
 
 # Register your models here.
 admin.site.register(League)
-admin.site.register(Season)
+
+
+class SeasonAdmin(admin.ModelAdmin):
+    readonly_fields = ('slug',)
+
+
+admin.site.register(Season, SeasonAdmin)
 admin.site.register(UserSeasonEntry)
 admin.site.register(Movie)
 admin.site.register(MovieMetric)
-admin.site.register(ScoringRule)
-admin.site.register(Pick)
+admin.site.register(Pick)

boxofficefantasy/migrations/0009_alter_moviemetric_value_alter_pick_bid_amount_and_more.py

@@ -0,0 +1,26 @@
+# Generated by Django 5.2.4 on 2025-07-26 13:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('boxofficefantasy', '0008_alter_movie_imdb_id'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='moviemetric',
+            name='value',
+            field=models.IntegerField(),
+        ),
+        migrations.AlterField(
+            model_name='pick',
+            name='bid_amount',
+            field=models.IntegerField(),
+        ),
+        migrations.DeleteModel(
+            name='ScoringRule',
+        ),
+    ]

boxofficefantasy/models.py

@@ -1,50 +1,64 @@
-from django.db import models
+from django.db.models import (
+    ForeignKey,
+    CharField,
+    SlugField,
+    Model,
+    IntegerField,
+    DateField,
+    CASCADE,
+    UniqueConstraint,
+    DateTimeField,
+)
 from django.contrib.auth.models import User
 from django.utils.text import slugify
 from django.core.exceptions import ValidationError
+from django.conf import settings
+
 
 # Create your models here.
-class League(models.Model):
-    name = models.CharField(max_length=100)
-    commissioner = models.ForeignKey(User, on_delete=models.CASCADE)
-    slug = models.SlugField(unique=True, blank=True)
+class League(Model):
+    name = CharField(max_length=100)
+    commissioner = ForeignKey(User, on_delete=CASCADE)
+    slug = SlugField(unique=True, blank=True)
 
     def __str__(self):
         return self.name
-    
+
     def save(self, *args, **kwargs):
         if not self.slug:
             self.slug = slugify(self.name)
         super().save(*args, **kwargs)
 
 
-class Season(models.Model):
-    league = models.ForeignKey(League, on_delete=models.CASCADE)
-    year = models.IntegerField()
-    start_date = models.DateField(null=True)
-    end_date = models.DateField(null=True)
-    label = models.CharField(max_length=50)
+class Season(Model):
+    league = ForeignKey(League, on_delete=CASCADE)
+    year = IntegerField()
+    start_date = DateField(null=True)
+    end_date = DateField(null=True)
+    label = CharField(max_length=50)
 
     class Meta:
-        unique_together = ('league', 'year')
+        unique_together = ("league", "year")
 
     def __str__(self):
         return f"{self.league.name} - {self.year}"
-    
+
     @property
     def slug(self):
         return f"{slugify(self.label)}-{self.year}"
 
 
-class UserSeasonEntry(models.Model):
-    user = models.ForeignKey(User, on_delete=models.CASCADE)
-    season = models.ForeignKey(Season, on_delete=models.CASCADE)
-    team_name = models.CharField(max_length=100)
+class UserSeasonEntry(Model):
+    user = ForeignKey(User, on_delete=CASCADE)
+    season = ForeignKey(Season, on_delete=CASCADE)
+    team_name = CharField(max_length=100)
 
     class Meta:
-        unique_together = ('user', 'season')
+        unique_together = ("user", "season")
         constraints = [
-            models.UniqueConstraint(fields=['season', 'team_name'], name='unique_team_name_per_season')
+            UniqueConstraint(
+                fields=["season", "team_name"], name="unique_team_name_per_season"
+            )
         ]
         verbose_name = "User Season Entry"
         verbose_name_plural = "User Season Entries"
@@ -53,54 +67,47 @@ class UserSeasonEntry(models.Model):
         return f"{self.team_name} ({self.user.username})"
 
 
-class Movie(models.Model):
-    title = models.CharField(max_length=255)
-    imdb_id = models.CharField(max_length=20, blank=True, null=True)
-    bom_id = models.CharField(max_length=50, blank=True, null=True)
-    bom_legacy_id = models.CharField(max_length=50, blank=True, null=True)
+class Movie(Model):
+    title = CharField(max_length=255)
+    imdb_id = CharField(max_length=20, blank=True, null=True)
+    bom_id = CharField(max_length=50, blank=True, null=True)
+    bom_legacy_id = CharField(max_length=50, blank=True, null=True)
 
     def __str__(self):
         return self.title
-    
+
     def clean(self):
         for field in ["imdb_id", "bom_id", "bom_legacy_id"]:
             if getattr(self, field):
-                if Movie.objects.exclude(pk=self.pk).filter(**{field:getattr(self,field)}).exists():
-                    raise ValidationError({field: f'{field} must be unique.'})
+                if (
+                    Movie.objects.exclude(pk=self.pk)
+                    .filter(**{field: getattr(self, field)})
+                    .exists()
+                ):
+                    raise ValidationError({field: f"{field} must be unique."})
 
 
-class Pick(models.Model):
-    season_entry = models.ForeignKey(UserSeasonEntry, on_delete=models.CASCADE)
-    season = models.ForeignKey(Season, on_delete=models.CASCADE)
-    movie = models.ForeignKey(Movie, on_delete=models.CASCADE)
-    bid_amount = models.DecimalField(max_digits=10, decimal_places=2)
-
+class Pick(Model):
+    season_entry = ForeignKey(UserSeasonEntry, on_delete=CASCADE)
+    season = ForeignKey(Season, on_delete=CASCADE)
+    movie = ForeignKey(Movie, on_delete=CASCADE)
+    bid_amount = IntegerField()
 
     class Meta:
-        unique_together = ('season_entry', 'movie')
+        unique_together = ("season_entry", "movie")
 
     def __str__(self):
         return f"{self.season_entry} - {self.movie}"
 
 
-class MovieMetric(models.Model):
-    movie = models.ForeignKey(Movie, on_delete=models.CASCADE)
-    key = models.CharField(max_length=100)
-    value = models.FloatField()
-    updated_at = models.DateTimeField(auto_now=True)
+class MovieMetric(Model):
+    movie = ForeignKey(Movie, on_delete=CASCADE)
+    key = CharField(max_length=100)
+    value = IntegerField()
+    updated_at = DateTimeField(auto_now=True)
 
     class Meta:
-        unique_together = ('movie', 'key')
+        unique_together = ("movie", "key")
 
     def __str__(self):
         return f"{self.movie.title} - {self.key}: {self.value}"
-
-
-class ScoringRule(models.Model):
-    season = models.OneToOneField(Season, on_delete=models.CASCADE)
-    formula = models.TextField(
-        help_text="Python expression using keys like 'domestic_gross', 'oscars', 'multiplier'."
-    )
-
-    def __str__(self):
-        return f"Scoring for {self.season}"

boxofficefantasy/templates/login.dj.html

@@ -0,0 +1,22 @@
+{% extends "base.dj.html" %}
+
+{% block content %}
+<h2>Login</h2>
+<form method="post">
+  {% csrf_token %}
+  <div class="mb-3">
+    {{ form.username.label_tag }}
+    {{ form.username }}
+    {{ form.username.errors }}
+  </div>
+  <div class="mb-3">
+    {{ form.password.label_tag }}
+    {{ form.password }}
+    {{ form.password.errors }}
+  </div>
+  <button type="submit" class="btn btn-primary">Login</button>
+</form>
+{% if form.errors %}
+  <p class="text-danger">Invalid credentials, please try again.</p>
+{% endif %}
+{% endblock %}

boxofficefantasy/urls.py

@@ -1,15 +1,16 @@
 from django.urls import path, include
 from . import views
+from django.contrib.auth import views as auth_views
 
 league_patterns = [
-    path("/", views.league_view, name="league" ),
+    path("", views.league_view, name="league" ),
     path("season/", views.season_view, name="seasons"),
     path("movie/", views.movie_view, name="movies"),
     path("team/", views.team_view, name="teams"),
 ]
 
 season_patterns = [
-    path("/", views.season_view, name="season"),
+    path("", views.season_view, name="season"),
     path("scoreboard/", views.scoreboard_view, name="scoreboard"),
     path("team/<str:username>/", views.team_view, name="team"),
     path("team/", views.team_view, name="teams"),
@@ -18,6 +19,8 @@ season_patterns = [
 ]
 
 urlpatterns = [
+    path('login/', auth_views.LoginView.as_view(template_name='login.dj.html'), name='login'),
+    path('logout/', auth_views.LogoutView.as_view(next_page='login'), name='logout'),
     path(
         "league/<slug:league_slug>/season/<slug:season_slug>/",
         include((season_patterns, "boxofficefantasy"), namespace="season")
@@ -27,6 +30,6 @@ urlpatterns = [
         include((league_patterns, "boxofficefantasy"), namespace="league")
     ),
     path(
-      "/", views.league_view, name="leagues"
+      "", views.league_view, name="leagues"
     )
 ]

boxofficefantasy_project/asgi.py

@@ -10,7 +10,14 @@ https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
 import os
 
 from django.core.asgi import get_asgi_application
+from draft.routing import websocket_urlpatterns
+from channels.routing import ProtocolTypeRouter, URLRouter
+from channels.auth import AuthMiddlewareStack
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'boxofficefantasy_project.settings')
 
-application = get_asgi_application()
+application = ProtocolTypeRouter({
+    "http": get_asgi_application(),
+    "websocket":AuthMiddlewareStack(URLRouter(websocket_urlpatterns)),
+})
+print("✅ ASGI server is running")

boxofficefantasy_project/settings.py

@@ -34,6 +34,7 @@ TMDB_API_KEY = os.environ.get("TMDB_API_KEY")
 # Application definition
 
 INSTALLED_APPS = [
+    "daphne",
     'boxofficefantasy',
     'django.contrib.admin',
     'django.contrib.auth',
@@ -41,7 +42,9 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'django.contrib.humanize'
+    'django.contrib.humanize',
+    "draft",
+    "channels"
 ]
 
 MIDDLEWARE = [
@@ -59,7 +62,7 @@ ROOT_URLCONF = 'boxofficefantasy_project.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [BASE_DIR / 'templates'],
+        'DIRS': [],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -135,3 +138,14 @@ CSRF_TRUSTED_ORIGINS = [
     "http://localhost:3000",
     "http://127.0.0.1:3000",
 ]
+
+ASGI_APPLICATION = "boxofficefantasy_project.asgi.application"
+
+# Channel layers
+CHANNEL_LAYERS = {
+    "default": {
+        "BACKEND": "channels.layers.InMemoryChannelLayer",
+    },
+}
+
+HASHIDS_SALT = "your-very-secret-salt-string"

boxofficefantasy_project/urls.py

@@ -22,7 +22,8 @@ from django.conf.urls.static import static
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path("", include("boxofficefantasy.urls"))
+    path("", include("boxofficefantasy.urls")),
+    path("draft/", include("draft.urls")),
 ]
 
 if settings.DEBUG:

boxofficefantasy_project/utils.py

@@ -0,0 +1,11 @@
+from hashids import Hashids
+from django.conf import settings
+
+hashids = Hashids(min_length=8, salt=settings.HASHIDS_SALT)
+
+def encode_id(id):
+    return hashids.encode(id)
+
+def decode_id(hashid):
+    decoded = hashids.decode(hashid)
+    return int(decoded[0]) if decoded else None

draft/admin.py

@@ -0,0 +1,10 @@
+from django.contrib import admin
+from draft.models import DraftSession, DraftParticipant, DraftMoviePool, DraftPick
+
+# Register your models here.
+class DraftSessionAdmin(admin.ModelAdmin):
+  readonly_fields = ('hashed_id',)
+admin.site.register(DraftSession, DraftSessionAdmin)
+admin.site.register(DraftParticipant)
+admin.site.register(DraftMoviePool)
+admin.site.register(DraftPick)

draft/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class DraftConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'draft'

draft/consumers.py

@@ -0,0 +1,151 @@
+from channels.generic.websocket import AsyncJsonWebsocketConsumer
+from channels.db import database_sync_to_async
+from django.core.exceptions import PermissionDenied
+from boxofficefantasy.models import League, Season
+from boxofficefantasy.views import parse_season_slug
+from draft.models import DraftSession, DraftPick, DraftMoviePool, DraftParticipant
+
+import random
+
+class DraftConsumer(AsyncJsonWebsocketConsumer):
+    async def connect(self):
+        draft_session_id_hashed = self.scope["url_route"]["kwargs"].get("draft_session_id_hashed")
+        league_slug = self.scope["url_route"]["kwargs"].get("league_slug")
+        season_slug = self.scope["url_route"]["kwargs"].get("season_slug")
+
+        self.draft_session = await self.get_draft_session(draft_session_id_hashed=draft_session_id_hashed, league_slug=league_slug, season_slug=season_slug)
+
+        self.room_group_name = f"draft_{self.draft_session.season.league.slug}_{self.draft_session.season.slug}"
+
+        # Auth check (optional)
+        user = self.scope["user"]
+        if not user.is_authenticated:
+            await self.close()
+            return
+
+        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
+        await self.accept()
+        await self.send_json({"type": "connection.accepted", "user": user.username})
+
+        # Notify others (optional)
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                "type": "user.joined",
+                "user": user.username,
+            }
+        )
+
+    async def disconnect(self, close_code):
+        await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
+
+    async def receive_json(self, content):
+        event_type = content.get("type")
+        user = self.scope["user"]
+        
+        if event_type == "start_draft":
+            if user.is_staff:
+                await self.start_draft()
+            else:
+                await self.send_json({
+                    "type": "error",
+                    "message": "insufficient privelleges"
+                })
+        elif event_type == "nominate":
+            await self.nominate(content.get("movie"))
+        elif event_type == "bid":
+            await self.place_bid(content.get("amount"), self.scope["user"].username)
+        elif event_type == "message":
+            await self.channel_layer.group_send(
+                self.room_group_name,
+                {
+                    "type": "chat.message",
+                    "user": self.scope["user"].username,
+                    "message": content.get("message"),
+                },
+            )
+
+    # === Broadcast handlers ===
+
+    async def user_joined(self, event):
+        await self.send_json({
+            "type": "user.joined",
+            "user": event["user"]
+        })
+
+    async def chat_message(self, event):
+        await self.send_json({
+            "type": "chat.message",
+            "user": event["user"],
+            "message": event["message"],
+        })
+
+    async def draft_update(self, event):
+        await self.send_json({
+            "type": "draft.update",
+            "state": event["state"],
+        })
+
+    # === Draft logic (stubbed for now) ===
+
+    async def start_draft(self):
+        # Example: shuffle draft order
+        players = await self.get_draft_users()
+        draft_order = random.sample(players, len(players))
+
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                "type": "draft.update",
+                "state": {
+                    "status": "started",
+                    "order": [p.user.username for p in draft_order],
+                }
+            }
+        )
+
+    async def nominate(self, movie_title):
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                "type": "draft.update",
+                "state": {
+                    "status": "nominating",
+                    "movie": movie_title,
+                }
+            }
+        )
+
+    async def place_bid(self, amount, user):
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                "type": "draft.update",
+                "state": {
+                    "status": "bidding",
+                    "bid": {"amount": amount, "user": user}
+                }
+            }
+        )
+
+    # === Example DB Access ===
+
+    @database_sync_to_async
+    def get_draft_users(self):
+        # Replace this with real queryset to fetch users in draft
+        return list(DraftParticipant.objects.select_related('user').filter(draft=self.draft_session).all())
+        return ["alice", "bob", "carol"]
+    
+    @database_sync_to_async
+    def get_draft_session(self, draft_session_id_hashed, league_slug, season_slug):
+        draft_session_id = DraftSession.decode_id(draft_session_id_hashed)
+        if draft_session_id:
+            draft_session = DraftSession.objects.select_related('season', 'season__league').get(pk=draft_session_id)
+        elif league_slug and season_slug:
+            label, year = parse_season_slug(season_slug)
+            season = Season.objects.filter(label=label, year=year).first()
+            draft_session = DraftSession.objects.select_related('season', 'season__league').filter(season=season).first()
+        else:
+            raise Exception()
+        
+        return draft_session

draft/migrations/0001_initial.py

@@ -0,0 +1,56 @@
+# Generated by Django 5.2.4 on 2025-07-26 13:41
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('boxofficefantasy', '0009_alter_moviemetric_value_alter_pick_bid_amount_and_more'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='DraftSession',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('is_active', models.BooleanField()),
+                ('current_nomination_index', models.IntegerField()),
+                ('season', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='boxofficefantasy.season')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='DraftPick',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('bid_amount', models.IntegerField()),
+                ('nomination_order', models.IntegerField()),
+                ('movie', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='boxofficefantasy.movie')),
+                ('winner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('draft', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='draft.draftsession')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='DraftParticipant',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('budget', models.IntegerField()),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('draft', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='draft.draftsession')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='DraftMoviePool',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('nominated', models.BooleanField()),
+                ('movie', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='boxofficefantasy.movie')),
+                ('draft', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='draft.draftsession')),
+            ],
+        ),
+    ]

draft/models.py

@@ -0,0 +1,34 @@
+from django.db.models import ForeignKey, Model, IntegerField, BooleanField, CASCADE, PROTECT
+from boxofficefantasy.models import Season, User, Movie
+from boxofficefantasy_project.utils import encode_id, decode_id
+
+# Create your models here.
+class DraftSession(Model):
+    season = ForeignKey(Season, on_delete=CASCADE)
+    is_active = BooleanField()
+    current_nomination_index = IntegerField()
+
+    @property
+    def hashed_id(self):
+        return f"{encode_id(self.pk)}"
+    
+    @classmethod
+    def decode_id(cls, hashed_id:str) -> id:
+        return decode_id(hashed_id)
+
+class DraftParticipant(Model):
+    draft = ForeignKey(DraftSession, on_delete=CASCADE)
+    user = ForeignKey(User, on_delete=CASCADE)
+    budget = IntegerField()
+
+class DraftMoviePool(Model):
+    draft = ForeignKey(DraftSession, on_delete=CASCADE)
+    movie = ForeignKey(Movie, on_delete=CASCADE)
+    nominated = BooleanField()
+
+class DraftPick(Model):
+    draft = ForeignKey(DraftSession, on_delete=CASCADE)
+    movie = ForeignKey(Movie, on_delete=CASCADE)
+    winner = ForeignKey(User, on_delete=CASCADE)
+    bid_amount = IntegerField()
+    nomination_order = IntegerField()

draft/routing.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from . import consumers
+
+websocket_urlpatterns = [
+    path(r"ws/draft/session/<str:draft_session_id_hashed>/", consumers.DraftConsumer.as_asgi()),
+    # path(r"ws/draft/<slug:league_slug>/<slug:season_slug>/", consumers.DraftConsumer.as_asgi()),
+]

draft/templates/draft/room.dj.html

@@ -0,0 +1,8 @@
+<h1>Draft Room: {{ league.name }} – {{ season.label }} {{ season.year }}</h1>
+{%load static%}
+<div id="draft-app" data-draft-id="{{draft_id_hashed}}" data-room-name="{{ room_name }}"></div>
+{% if DEBUG %}
+<script src="http://localhost:3000/dist/bundle.js"></script>
+{% else %}
+<script src="{% static 'bundle.js' %}"></script>
+{% endif %}

draft/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

draft/urls.py

@@ -0,0 +1,10 @@
+from django.urls import path
+from . import views
+
+app_name = "draft"
+
+urlpatterns = [
+    # path("", views.draft_room, name="room"),
+    path("session/<str:draft_session_id_hashed>/", views.draft_room, name="session"),
+    # path("<slug:league_slug>/<slug:season_slug>/", views.draft_room_list, name="room"),
+]

draft/views.py

@@ -0,0 +1,28 @@
+from django.shortcuts import render, get_object_or_404
+from boxofficefantasy.models import League, Season
+from draft.models import DraftSession
+from boxofficefantasy.views import parse_season_slug
+from django.contrib.auth.decorators import login_required
+from boxofficefantasy_project.utils import decode_id
+
+# @login_required(login_url='/login/')
+def draft_room(request, league_slug=None, season_slug=None, draft_session_id_hashed=None):
+
+    if draft_session_id_hashed:
+        draft_session_id = decode_id(draft_session_id_hashed)
+        draft_session = get_object_or_404(DraftSession, id=draft_session_id)
+        league = draft_session.season.league
+        season = draft_session.season
+    elif league_slug and season_slug:
+        raise NotImplementedError
+        league = get_object_or_404(League, slug=league_slug)
+        label, year = parse_season_slug(season_slug)
+        season = get_object_or_404(Season, league=league, label__iexact=label, year=year)
+        draft_session = get_object_or_404(DraftSession, season=season)
+
+    return render(request, "draft/room.dj.html", {
+        "draft_id_hashed": draft_session.hashed_id,
+        "league": league,
+        "season": season,
+        "room_name": f"{league.slug}-{season.slug}"
+    })

frontend/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

frontend/package.json

@@ -3,14 +3,21 @@
     "dev": "SASS_LOG_LEVEL=error webpack serve --config webpack.config.js"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
+    "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
-    "bootstrap": "^5.3.7"
+    "bootstrap": "^5.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

frontend/src/apps/draft/index.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState, useRef } from "react";
+
+export const DraftAdmin = ({ draftSessionId }) => {
+  const [latestMessage, setLatestMessage] = useState(null);
+  const socketRef = useRef(null);
+  const wsUrl = `ws://${window.location.host}/ws/draft/session/${draftSessionId}/`;
+
+  useEffect(() => {
+    socketRef.current = new WebSocket(wsUrl);
+
+    socketRef.current.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      setLatestMessage(data);
+    };
+
+    socketRef.current.onclose = () => {
+      console.warn("WebSocket connection closed.");
+    };
+
+    return () => {
+      socketRef.current.close();
+    };
+  }, [wsUrl]);
+
+  const handleStartDraft = () => {
+    socketRef.current.send(JSON.stringify({ type: "start_draft" }));
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1>Draft Admin Panel</h1>
+      <label>Latest Message</label>
+      <input
+        type="text"
+        className="form-control"
+        readOnly disabled
+        value={latestMessage ? JSON.stringify(latestMessage) : ""}
+      />
+      <button onClick={handleStartDraft} className="btn btn-primary">
+        Start Draft
+      </button>
+    </div>
+  );
+};

frontend/src/index.js

@@ -1,2 +1,15 @@
 import './scss/styles.scss'
-console.log("Webpack HMR loaded!");
+console.log("Webpack HMR loaded!");
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import {DraftAdmin} from './apps/draft/index.jsx'
+
+document.addEventListener("DOMContentLoaded", () => {
+  const draftApp = document.getElementById("draft-app");
+  if (draftApp) {
+    const root = createRoot(draftApp);
+    const draftId = draftApp.dataset.draftId
+    root.render(<DraftAdmin draftSessionId={draftId} />);
+  }
+});

frontend/webpack.config.js

@@ -10,6 +10,13 @@ module.exports = {
   mode: "development",
   module: {
     rules: [
+      {
+        test: /\.(js|jsx)$/, // include .jsx files
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
       {
         test: /\.scss$/,
         use: [