api/jobs/admin.py

@@ -0,0 +1,17 @@
+from django.contrib import admin
+
+from .models import JobApplication, JobUpdate
+
+
+@admin.register(JobApplication)
+class JobApplicationAdmin(admin.ModelAdmin):
+    list_display = ["company_name", "position_title", "status", "created_at", "updated_at"]
+    list_filter = ["status"]
+    search_fields = ["company_name", "position_title"]
+
+
+@admin.register(JobUpdate)
+class JobUpdateAdmin(admin.ModelAdmin):
+    list_display = ["job_application", "from_status", "to_status", "created_at"]
+    list_filter = ["to_status"]
+    search_fields = ["job_application__company_name"]

api/jobs/apps.py

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

api/jobs/migrations/0001_initial.py

@@ -0,0 +1,47 @@
+# Generated by Django 5.2.14 on 2026-05-26 00:55
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='JobApplication',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('company_name', models.CharField(max_length=255)),
+                ('position_title', models.CharField(max_length=255)),
+                ('status', models.CharField(choices=[('APPLIED', 'Applied'), ('SCREENING', 'Screening'), ('INTERVIEW', 'Interview'), ('OFFER', 'Offer'), ('REJECTED', 'Rejected'), ('WITHDRAWN', 'Withdrawn')], default='APPLIED', max_length=20)),
+                ('notes', models.TextField(blank=True, default='')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+            ],
+            options={
+                'ordering': ['-updated_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='JobUpdate',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('from_status', models.CharField(blank=True, choices=[('APPLIED', 'Applied'), ('SCREENING', 'Screening'), ('INTERVIEW', 'Interview'), ('OFFER', 'Offer'), ('REJECTED', 'Rejected'), ('WITHDRAWN', 'Withdrawn')], max_length=20, null=True)),
+                ('to_status', models.CharField(choices=[('APPLIED', 'Applied'), ('SCREENING', 'Screening'), ('INTERVIEW', 'Interview'), ('OFFER', 'Offer'), ('REJECTED', 'Rejected'), ('WITHDRAWN', 'Withdrawn')], max_length=20)),
+                ('notes', models.TextField(blank=True, default='')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('metrics', models.JSONField(blank=True, default=dict)),
+                ('job_application', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='updates', to='jobs.jobapplication')),
+            ],
+            options={
+                'verbose_name': 'Job Update',
+                'verbose_name_plural': 'Job Updates',
+                'ordering': ['-created_at'],
+            },
+        ),
+    ]

api/jobs/models.py

@@ -0,0 +1,60 @@
+from django.db import models
+
+
+class StatusChoices(models.TextChoices):
+    APPLIED = "APPLIED", "Applied"
+    SCREENING = "SCREENING", "Screening"
+    INTERVIEW = "INTERVIEW", "Interview"
+    OFFER = "OFFER", "Offer"
+    REJECTED = "REJECTED", "Rejected"
+    WITHDRAWN = "WITHDRAWN", "Withdrawn"
+
+
+class JobApplication(models.Model):
+    company_name = models.CharField(max_length=255)
+    position_title = models.CharField(max_length=255)
+    status = models.CharField(
+        max_length=20,
+        choices=StatusChoices.choices,
+        default=StatusChoices.APPLIED,
+    )
+    notes = models.TextField(blank=True, default="")
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        ordering = ["-updated_at"]
+
+    def __str__(self) -> str:
+        return f"{self.company_name} - {self.position_title}"
+
+
+class JobUpdate(models.Model):
+    job_application = models.ForeignKey(
+        JobApplication,
+        on_delete=models.CASCADE,
+        related_name="updates",
+    )
+    from_status = models.CharField(
+        max_length=20,
+        choices=StatusChoices.choices,
+        null=True,
+        blank=True,
+    )
+    to_status = models.CharField(
+        max_length=20,
+        choices=StatusChoices.choices,
+    )
+    notes = models.TextField(blank=True, default="")
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    # Store metrics as JSON at update time for historical accuracy
+    metrics = models.JSONField(default=dict, blank=True)
+
+    class Meta:
+        ordering = ["-created_at"]
+        verbose_name = "Job Update"
+        verbose_name_plural = "Job Updates"
+
+    def __str__(self) -> str:
+        return f"Update #{self.id}: {self.job_application.company_name} → {self.to_status}"

api/jobs/serializers.py

@@ -0,0 +1,45 @@
+from rest_framework import serializers
+
+from .models import JobApplication, JobUpdate
+
+
+class JobUpdateSerializer(serializers.ModelSerializer):
+    company_name = serializers.CharField(source="job_application.company_name", read_only=True)
+    position_title = serializers.CharField(source="job_application.position_title", read_only=True)
+    job_id = serializers.IntegerField(source="job_application.id", read_only=True)
+
+    class Meta:
+        model = JobUpdate
+        fields = [
+            "id",
+            "job_id",
+            "company_name",
+            "position_title",
+            "from_status",
+            "to_status",
+            "notes",
+            "created_at",
+            "metrics",
+        ]
+
+
+class JobApplicationSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = JobApplication
+        fields = [
+            "id",
+            "company_name",
+            "position_title",
+            "status",
+            "notes",
+            "created_at",
+            "updated_at",
+        ]
+
+
+class DashboardMetricsSerializer(serializers.Serializer):
+    total_applications = serializers.IntegerField()
+    status_breakdown = serializers.DictField(child=serializers.IntegerField())
+    interviews_count = serializers.IntegerField()
+    offers_count = serializers.IntegerField()
+    rejection_rate = serializers.FloatField()

api/jobs/tests.py

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

api/jobs/urls.py

@@ -0,0 +1,12 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from . import views
+
+router = DefaultRouter()
+router.register(r"applications", views.JobApplicationViewSet, basename="job-application")
+router.register(r"updates", views.JobUpdateViewSet, basename="job-update")
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

api/jobs/views.py

@@ -0,0 +1,68 @@
+from django.db.models import Count, Q
+from rest_framework import viewsets
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.decorators import action
+from rest_framework.request import Request
+from rest_framework.response import Response
+
+from .models import JobApplication, JobUpdate
+from .serializers import (
+    DashboardMetricsSerializer,
+    JobApplicationSerializer,
+    JobUpdateSerializer,
+)
+
+
+class JobApplicationViewSet(viewsets.ModelViewSet):
+    queryset = JobApplication.objects.all().prefetch_related("updates")
+    serializer_class = JobApplicationSerializer
+    permission_classes = [IsAuthenticated]
+
+
+class JobUpdateViewSet(viewsets.ModelViewSet):
+    queryset = JobUpdate.objects.select_related("job_application").all()
+    serializer_class = JobUpdateSerializer
+    permission_classes = [IsAuthenticated]
+
+    @action(detail=False, methods=["get"])
+    def latest(self, request: Request) -> Response:
+        """Return the 3 most recent job updates with job info and metrics."""
+        updates = (
+            self.get_queryset()
+            .select_related("job_application")
+            .order_by("-created_at")[:3]
+        )
+        serializer = self.get_serializer(updates, many=True)
+        return Response(serializer.data)
+
+    @action(detail=False, methods=["get"])
+    def metrics(self, request: Request) -> Response:
+        """Return dashboard metrics: total apps, status breakdown, interview/offer counts."""
+        total = JobApplication.objects.count()
+        status_counts = dict(
+            JobApplication.objects.values("status")
+            .annotate(count=Count("id"))
+            .values_list("status", "count")
+        )
+        interview_count = JobApplication.objects.filter(
+            Q(status="INTERVIEW") | Q(status="OFFER")
+        ).count()
+        offer_count = JobApplication.objects.filter(status="OFFER").count()
+        rejection_rate = (
+            round(
+                status_counts.get("REJECTED", 0) / total * 100, 1
+            )
+            if total > 0
+            else 0.0
+        )
+
+        serializer = DashboardMetricsSerializer(
+            instance={
+                "total_applications": total,
+                "status_breakdown": status_counts,
+                "interviews_count": interview_count,
+                "offers_count": offer_count,
+                "rejection_rate": rejection_rate,
+            }
+        )
+        return Response(serializer.data)

api/project/settings.py

@@ -14,17 +14,22 @@ DEBUG = os.environ.get("DJANGO_DEBUG", "True").lower() in ("true", "1", "yes")
 ALLOWED_HOSTS: list[str] = ["*"]
 
 INSTALLED_APPS = [
-    "django.contrib.admin",
-    "django.contrib.auth",
     "django.contrib.contenttypes",
+    "django.contrib.auth",
+    "django.contrib.admin",
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    # Third-party
     "rest_framework",
+    "corsheaders",
+    # Local
     "accounts",
+    "jobs",
 ]
 
 MIDDLEWARE = [
+    "corsheaders.middleware.CorsMiddleware",
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
@@ -106,11 +111,18 @@ SIMPLE_JWT = {
     "AUTH_HEADER_TYPES": ("Bearer",),
 }
 
+# CORS
+CORS_ALLOW_ALL_ORIGINS = os.environ.get("CORS_ALLOW_ALL_ORIGINS", "False").lower() in ("true", "1", "yes")
+CORS_ALLOWED_ORIGINS = os.environ.get(
+    "CORS_ALLOWED_ORIGINS",
+    "http://localhost:3000,http://localhost:5173,http://127.0.0.1:3000",
+).split(",")
+
 LANGUAGE_CODE = "en-us"
 TIME_ZONE = "UTC"
 USE_I18N = True
 USE_TZ = True
 
-STATIC_URL = "static/"
+STATIC_URL = "/static/"
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

api/project/urls.py

@@ -1,6 +1,8 @@
 from django.contrib import admin
 from django.urls import include, path
 
-urlpatterns: list = [
-    path("api/auth/", include("accounts.urls", namespace="accounts")),
-]
+urlpatterns = [
+    path("admin/", admin.site.urls),
+    path("api/auth/", include("accounts.urls")),
+    path("api/", include("jobs.urls")),
+]

api/pyproject.toml

@@ -5,7 +5,8 @@ description = "Job Tracker API"
 requires-python = ">=3.12"
 dependencies = [
     "django>=5.1,<6.0",
-    "djangorestframework>=3.15,<4.0",
+    "django-cors-headers>=4.9.0",
+    "djangorestframework>=3.17.1",
     "djangorestframework-simplejwt>=5.3,<6.0",
     "psycopg2-binary>=2.9",
     "pydantic>=2.0",
@@ -17,4 +18,4 @@ requires = ["setuptools"]
 build-backend = "setuptools.build_meta"
 
 [tool.setuptools.packages.find]
-include = ["project*", "accounts*"]
+include = ["project*", "accounts*", "jobs*"]

api/uv.lock

@@ -17,6 +17,7 @@ version = "1.0.0"
 source = { editable = "." }
 dependencies = [
     { name = "django" },
+    { name = "django-cors-headers" },
     { name = "djangorestframework" },
     { name = "djangorestframework-simplejwt" },
     { name = "psycopg2-binary" },
@@ -27,7 +28,8 @@ dependencies = [
 [package.metadata]
 requires-dist = [
     { name = "django", specifier = ">=5.1,<6.0" },
-    { name = "djangorestframework", specifier = ">=3.15,<4.0" },
+    { name = "django-cors-headers", specifier = ">=4.9.0" },
+    { name = "djangorestframework", specifier = ">=3.17.1" },
     { name = "djangorestframework-simplejwt", specifier = ">=5.3,<6.0" },
     { name = "psycopg2-binary", specifier = ">=2.9" },
     { name = "pydantic", specifier = ">=2.0" },
@@ -57,6 +59,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/14/44/f172870cf87aa25afef48fb72adba89ee8b77fcab6f3b23d240b923f1528/django-5.2.14-py3-none-any.whl", hash = "sha256:6f712143bd3064310d1f50fac859c3e9a274bdcfc9595339853be7779297fc76", size = 8311320, upload-time = "2026-05-05T13:57:25.795Z" },
 ]
 
+[[package]]
+name = "django-cors-headers"
+version = "4.9.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "asgiref" },
+    { name = "django" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/21/39/55822b15b7ec87410f34cd16ce04065ff390e50f9e29f31d6d116fc80456/django_cors_headers-4.9.0.tar.gz", hash = "sha256:fe5d7cb59fdc2c8c646ce84b727ac2bca8912a247e6e68e1fb507372178e59e8", size = 21458, upload-time = "2025-09-18T10:40:52.326Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/30/d8/19ed1e47badf477d17fb177c1c19b5a21da0fd2d9f093f23be3fb86c5fab/django_cors_headers-4.9.0-py3-none-any.whl", hash = "sha256:15c7f20727f90044dcee2216a9fd7303741a864865f0c3657e28b7056f61b449", size = 12809, upload-time = "2025-09-18T10:40:50.843Z" },
+]
+
 [[package]]
 name = "djangorestframework"
 version = "3.17.1"

docs/frontend/home-page-mui.md

@@ -0,0 +1,115 @@
+# Spec: Home Page with MUI Components
+
+## Ticket
+Gitea: crisleo-hermes/job-tracker#2
+Kanban: t_e6936299
+
+## Overview
+Build a home page at route `/` using Material-UI (MUI) components that displays the last three job updates and dashboard metrics, with a button to create a new job application.
+
+## Pages
+
+### HomePage (`/`)
+- AppBar with title "Job Tracker"
+- Dashboard metrics cards row (total applications, interviews, offers, rejection rate)
+- Last 3 job updates displayed as cards
+- "Create New Job Application" button (navigates to creation flow)
+- Loading skeleton while data fetches
+- Error snackbar on API failure
+- Responsive Grid layout
+
+## API Endpoints Consumed
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/updates/latest/` | 3 most recent JobUpdates with nested job info |
+| GET | `/api/updates/metrics/` | Dashboard metrics (total, status breakdown, interviews, offers, rejection rate) |
+
+### Response Shapes
+
+**GET /api/updates/latest/**
+```json
+[
+  {
+    "id": 1,
+    "job_id": 1,
+    "company_name": "Acme Corp",
+    "position_title": "Software Engineer",
+    "from_status": "APPLIED",
+    "to_status": "INTERVIEW",
+    "notes": "Moving to next round",
+    "created_at": "2025-01-15T10:00:00Z",
+    "metrics": {"response_time_days": 5}
+  }
+]
+```
+
+**GET /api/updates/metrics/**
+```json
+{
+  "total_applications": 12,
+  "status_breakdown": {"APPLIED": 5, "INTERVIEW": 4, "OFFER": 2, "REJECTED": 1},
+  "interviews_count": 6,
+  "offers_count": 2,
+  "rejection_rate": 8.3
+}
+```
+
+## Components
+
+### `AppLayout`
+- MUI `AppBar` with `Toolbar`, `Typography` ("Job Tracker")
+- Wraps child content via `Outlet` from React Router
+
+### `UpdateCard`
+- MUI `Card` → `CardContent`
+- Displays: company name, position title, status change (`from_status` → `to_status`), created date, metrics summary
+- Props: `JobUpdate`
+
+### `MetricsPanel`
+- MUI `Grid` container with metric `Card` items
+- Each metric: total applications, interviews count, offers count, rejection rate
+- Props: `DashboardMetrics`
+
+### `LoadingSkeleton`
+- MUI `Skeleton` components mimicking the home page layout
+
+## Data Fetching
+
+Custom hook `useDashboardData` using React's `useEffect` + `useState`:
+- Fetches from `/api/updates/latest/` and `/api/updates/metrics/` concurrently (`Promise.all`)
+- Vite proxy: `/api` → `http://localhost:8000/api`
+- States: loading, error (with error message), data
+
+## TypeScript Types
+
+```typescript
+interface JobUpdate {
+  id: number;
+  job_id: number;
+  company_name: string;
+  position_title: string;
+  from_status: string | null;
+  to_status: string;
+  notes: string;
+  created_at: string;
+  metrics: Record<string, unknown>;
+}
+
+interface DashboardMetrics {
+  total_applications: number;
+  status_breakdown: Record<string, number>;
+  interviews_count: number;
+  offers_count: number;
+  rejection_rate: number;
+}
+```
+
+## Acceptance Criteria
+- [x] Home page at route `/`
+- [x] MUI components exclusively (AppBar, Typography, Card, Grid, Button, Skeleton, Snackbar)
+- [x] Last 3 job updates: job ID, status, creation date, metrics
+- [x] "Create New Job Application" button navigates to `/applications/new`
+- [x] Loading indicators while fetching data (Skeleton components)
+- [x] Graceful error handling (Snackbar with error message)
+- [x] Responsive layout (Grid breakpoints)

web/index.html

@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
     <title>Job Tracker</title>
   </head>
   <body>

web/package.json

@@ -5,10 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "axios": "^1.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -18,7 +22,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
-    "typescript": "^5.6.0",
+    "typescript": "^5.7.0",
     "vite": "^6.0.0"
   }
 }

web/src/App.tsx

@@ -1,19 +1,23 @@
+import { type ReactNode } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "./contexts/AuthContext";
+import AppLayout from "./components/AppLayout";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
 
-export default function App() {
+export default function App(): ReactNode {
   return (
     <BrowserRouter>
       <AuthProvider>
         <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
+          <Route element={<AppLayout />}>
+            <Route index element={<HomePage />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/register" element={<RegisterPage />} />
+          </Route>
         </Routes>
       </AuthProvider>
     </BrowserRouter>
   );
-}
+}

web/src/components/AppLayout.tsx

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { Outlet } from "react-router-dom";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#1976d2",
+    },
+    background: {
+      default: "#f5f5f5",
+    },
+  },
+});
+
+export default function AppLayout(): ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+        <AppBar position="sticky">
+          <Toolbar>
+            <Typography variant="h6" component="h1" sx={{ fontWeight: 700 }}>
+              Job Tracker
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Container component="main" maxWidth="lg" sx={{ mt: 4, mb: 4, flexGrow: 1 }}>
+          <Outlet />
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
+}

web/src/components/LoadingSkeleton.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import Skeleton from "@mui/material/Skeleton";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+
+export default function LoadingSkeleton(): ReactNode {
+  return (
+    <Box>
+      {/* Metrics skeleton row */}
+      <Grid container spacing={3} sx={{ mb: 4 }}>
+        {[...Array(4)].map((_, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 6, md: 3 }}>
+            <Skeleton variant="rounded" height={100} />
+          </Grid>
+        ))}
+      </Grid>
+
+      {/* Button skeleton */}
+      <Skeleton variant="rounded" width={240} height={40} sx={{ mb: 3 }} />
+
+      {/* Update cards skeleton */}
+      <Grid container spacing={3}>
+        {[...Array(3)].map((_, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 6, md: 4 }}>
+            <Skeleton variant="rounded" height={180} />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

web/src/components/MetricsPanel.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import type { DashboardMetrics } from "../types/index.ts";
+
+interface MetricsPanelProps {
+  metrics: DashboardMetrics;
+}
+
+interface MetricCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+}
+
+function MetricCard({ title, value, subtitle }: MetricCardProps): ReactNode {
+  return (
+    <Card variant="outlined" sx={{ height: "100%" }}>
+      <CardContent>
+        <Typography variant="h4" component="p" sx={{ fontWeight: 700 }}>
+          {value}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography variant="caption" color="text.secondary">
+            {subtitle}
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function MetricsPanel({ metrics }: MetricsPanelProps): ReactNode {
+  return (
+    <Grid container spacing={3}>
+      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <MetricCard title="Total Applications" value={metrics.total_applications} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <MetricCard title="Interviews" value={metrics.interviews_count} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <MetricCard title="Offers" value={metrics.offers_count} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+        <MetricCard
+          title="Rejection Rate"
+          value={`${metrics.rejection_rate}%`}
+        />
+      </Grid>
+    </Grid>
+  );
+}

web/src/components/UpdateCard.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Chip from "@mui/material/Chip";
+import Box from "@mui/material/Box";
+import type { JobUpdate } from "../types/index.ts";
+
+interface UpdateCardProps {
+  update: JobUpdate;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function formatStatus(status: string): string {
+  return status.charAt(0) + status.slice(1).toLowerCase();
+}
+
+const statusColors: Record<string, "default" | "success" | "info" | "warning" | "error"> = {
+  APPLIED: "default",
+  SCREENING: "info",
+  INTERVIEW: "info",
+  OFFER: "success",
+  REJECTED: "error",
+  WITHDRAWN: "default",
+};
+
+export default function UpdateCard({ update }: UpdateCardProps): ReactNode {
+  const changeLabel = update.from_status
+    ? `${formatStatus(update.from_status)} → ${formatStatus(update.to_status)}`
+    : formatStatus(update.to_status);
+
+  return (
+    <Card variant="outlined" sx={{ height: "100%" }}>
+      <CardContent>
+        <Typography variant="h6" component="h2" gutterBottom sx={{ fontWeight: 600 }}>
+          {update.company_name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" gutterBottom>
+          {update.position_title}
+        </Typography>
+        <Box sx={{ mt: 1, mb: 1 }}>
+          <Chip
+            label={changeLabel}
+            size="small"
+            color={statusColors[update.to_status] ?? "default"}
+            variant="outlined"
+          />
+        </Box>
+        <Typography variant="caption" color="text.secondary" display="block">
+          Updated: {formatDate(update.created_at)}
+        </Typography>
+        {update.notes && (
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+            {update.notes}
+          </Typography>
+        )}
+        {Object.keys(update.metrics).length > 0 && (
+          <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 1 }}>
+            Metrics: {JSON.stringify(update.metrics)}
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

web/src/hooks/useDashboardData.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect, useCallback } from "react";
+import type { DashboardData, JobUpdate, DashboardMetrics } from "../types/index.ts";
+
+interface UseDashboardDataResult {
+  data: DashboardData | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+const API_BASE = "/api";
+
+async function fetchJson<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  }
+  return response.json() as Promise<T>;
+}
+
+export function useDashboardData(): UseDashboardDataResult {
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [updates, metrics] = await Promise.all([
+        fetchJson<JobUpdate[]>(`${API_BASE}/updates/latest/`),
+        fetchJson<DashboardMetrics>(`${API_BASE}/updates/metrics/`),
+      ]);
+      setData({ updates, metrics });
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error ? err.message : "An unknown error occurred";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}

web/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App";
+import App from "./App.tsx";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {
@@ -11,4 +11,4 @@ createRoot(rootElement).render(
   <StrictMode>
     <App />
   </StrictMode>,
-);
+);

web/src/pages/HomePage.tsx

@@ -1,41 +1,139 @@
-import { Link } from "react-router-dom";
+import { type ReactNode } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
-import styles from "./HomePage.module.css";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Alert from "@mui/material/Alert";
+import AddIcon from "@mui/icons-material/Add";
+import UpdateCard from "../components/UpdateCard";
+import MetricsPanel from "../components/MetricsPanel";
+import LoadingSkeleton from "../components/LoadingSkeleton";
+import { useDashboardData } from "../hooks/useDashboardData";
 
-export default function HomePage() {
-  const { state, logout } = useAuth();
+function LandingView(): ReactNode {
+  return (
+    <Box
+      sx={{
+        minHeight: "60vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+      }}
+    >
+      <Typography variant="h3" component="h1" gutterBottom sx={{ fontWeight: 700 }}>
+        Job Tracker
+      </Typography>
+      <Typography variant="h6" color="text.secondary" sx={{ mb: 4, maxWidth: 500 }}>
+        Track your job applications, interviews, and offers all in one place.
+      </Typography>
+      <Box sx={{ display: "flex", gap: 2 }}>
+        <Button
+          variant="contained"
+          size="large"
+          component={Link}
+          to="/login"
+        >
+          Sign In
+        </Button>
+        <Button
+          variant="outlined"
+          size="large"
+          component={Link}
+          to="/register"
+        >
+          Register
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+function DashboardView(): ReactNode {
+  const navigate = useNavigate();
+  const { data, loading, error } = useDashboardData();
+
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
 
   return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <h1 className={styles.heading}>Job Tracker</h1>
-        <p className={styles.welcomeText}>
-          Welcome to the Job Tracker application.
-        </p>
+    <Box>
+      <Typography
+        variant="h4"
+        component="h2"
+        gutterBottom
+        sx={{ fontWeight: 600 }}
+      >
+        Dashboard
+      </Typography>
 
-        {state.isAuthenticated && state.user ? (
-          <div>
-            <p className={styles.signedInText}>
-              Signed in as{" "}
-              <strong className={styles.emailStrong}>
-                {state.user.email}
-              </strong>
-            </p>
-            <button onClick={logout} className={styles.logoutButton}>
-              Sign Out
-            </button>
-          </div>
-        ) : (
-          <div className={styles.authLinks}>
-            <Link to="/login" className={styles.signInLink}>
-              Sign In
-            </Link>
-            <Link to="/register" className={styles.registerLink}>
-              Register
-            </Link>
-          </div>
-        )}
-      </div>
-    </div>
+      {error && (
+        <Alert severity="error" sx={{ mb: 3 }}>
+          Failed to load dashboard data: {error}
+        </Alert>
+      )}
+
+      {data && (
+        <>
+          <Box sx={{ mb: 4 }}>
+            <MetricsPanel metrics={data.metrics} />
+          </Box>
+
+          <Box
+            sx={{ mb: 3, display: "flex", justifyContent: "flex-end" }}
+          >
+            <Button
+              variant="contained"
+              size="large"
+              startIcon={<AddIcon />}
+              onClick={() => navigate("/applications/new")}
+            >
+              Create New Job Application
+            </Button>
+          </Box>
+
+          <Typography
+            variant="h5"
+            component="h3"
+            gutterBottom
+            sx={{ fontWeight: 600 }}
+          >
+            Recent Updates
+          </Typography>
+
+          <Grid container spacing={3}>
+            {data.updates.map((update) => (
+              <Grid key={update.id} size={{ xs: 12, sm: 6, md: 4 }}>
+                <UpdateCard update={update} />
+              </Grid>
+            ))}
+          </Grid>
+
+          {data.updates.length === 0 && (
+            <Typography
+              variant="body1"
+              color="text.secondary"
+              sx={{ mt: 2 }}
+            >
+              No updates yet. Create your first job application to get started.
+            </Typography>
+          )}
+        </>
+      )}
+    </Box>
   );
-}
+}
+
+export default function HomePage(): ReactNode {
+  const { state } = useAuth();
+
+  if (!state.isAuthenticated) {
+    return <LandingView />;
+  }
+
+  return <DashboardView />;
+}

web/src/types/index.ts

@@ -0,0 +1,24 @@
+export interface JobUpdate {
+  id: number;
+  job_id: number;
+  company_name: string;
+  position_title: string;
+  from_status: string | null;
+  to_status: string;
+  notes: string;
+  created_at: string;
+  metrics: Record<string, unknown>;
+}
+
+export interface DashboardMetrics {
+  total_applications: number;
+  status_breakdown: Record<string, number>;
+  interviews_count: number;
+  offers_count: number;
+  rejection_rate: number;
+}
+
+export interface DashboardData {
+  updates: JobUpdate[];
+  metrics: DashboardMetrics;
+}

web/src/vite-env.d.ts

@@ -1 +1,9 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

web/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -13,10 +12,9 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
     "forceConsistentCasingInFileNames": true
   },
   "include": ["src"]

web/vite.config.js

@@ -9,5 +9,11 @@ export default defineConfig({
     watch: {
       usePolling: true,
     },
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+    },
   },
 });