Scaffold full-stack volunteer scheduling application

Go backend with domain-based packages (volunteer, schedule, timeoff,
checkin, notification), SQLite storage, JWT auth, and chi router.
React TypeScript frontend with routing, auth context, and pages for
all core features. Multi-stage Dockerfile and docker-compose included.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/App.css

@@ -0,0 +1,135 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background: #f5f5f5;
+  color: #1a1a1a;
+  font-size: 15px;
+}
+
+/* Layout */
+.layout { display: flex; flex-direction: column; min-height: 100vh; }
+
+nav {
+  background: #2d6a4f;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+}
+
+.nav-brand { font-weight: 700; font-size: 1.2rem; margin-right: auto; }
+
+nav a {
+  color: rgba(255,255,255,0.85);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+nav a.active, nav a:hover { color: white; text-decoration: underline; }
+
+main { flex: 1; padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
+
+/* Auth page */
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.auth-page h1 { font-size: 2rem; color: #2d6a4f; }
+.auth-page form {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 320px;
+}
+
+/* Page */
+.page { display: flex; flex-direction: column; gap: 1.25rem; }
+.page-header { display: flex; align-items: center; justify-content: space-between; }
+.page h2 { font-size: 1.4rem; }
+
+/* Card */
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+.card h3 { margin-bottom: 0.75rem; font-size: 1rem; }
+
+/* Forms */
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+input, textarea, select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  width: 100%;
+}
+input:focus, textarea:focus { outline: 2px solid #2d6a4f; border-color: transparent; }
+textarea { resize: vertical; min-height: 80px; }
+
+/* Buttons */
+button {
+  padding: 0.5rem 1rem;
+  background: #2d6a4f;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+button:hover { background: #1e4d38; }
+.btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
+.btn-danger { background: #dc2626; }
+.btn-danger:hover { background: #b91c1c; }
+.btn-link { background: none; color: rgba(255,255,255,0.85); padding: 0; font-size: 0.9rem; }
+.btn-link:hover { background: none; color: white; }
+
+/* Tables */
+table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+th { text-align: left; padding: 0.5rem 0.75rem; background: #f9fafb; border-bottom: 2px solid #e5e7eb; }
+td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f0f0f0; }
+tr:last-child td { border-bottom: none; }
+
+/* Status badges */
+.status-pending { color: #b45309; background: #fef3c7; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
+.status-approved { color: #166534; background: #dcfce7; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
+.status-rejected { color: #991b1b; background: #fee2e2; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
+
+/* Notifications */
+ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
+li { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; }
+li.unread { font-weight: 600; }
+li.read { color: #6b7280; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #dc2626;
+  color: white;
+  border-radius: 9999px;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.75rem;
+  margin-left: 0.4rem;
+}
+
+/* Error */
+.error { color: #dc2626; font-size: 0.875rem; }

web/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

web/src/App.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './auth';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import Schedules from './pages/Schedules';
+import TimeOff from './pages/TimeOff';
+import Volunteers from './pages/Volunteers';
+import './App.css';
+
+function Nav() {
+  const { role, logout } = useAuth();
+  return (
+    <nav>
+      <span className="nav-brand">Walkies</span>
+      <NavLink to="/">Dashboard</NavLink>
+      <NavLink to="/schedules">Schedules</NavLink>
+      <NavLink to="/timeoff">Time Off</NavLink>
+      {role === 'admin' && <NavLink to="/volunteers">Volunteers</NavLink>}
+      <button className="btn-link" onClick={logout}>Sign Out</button>
+    </nav>
+  );
+}
+
+function ProtectedLayout() {
+  const { token } = useAuth();
+  if (!token) return <Navigate to="/login" replace />;
+  return (
+    <div className="layout">
+      <Nav />
+      <main>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/schedules" element={<Schedules />} />
+          <Route path="/timeoff" element={<TimeOff />} />
+          <Route path="/volunteers" element={<Volunteers />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+function LoginRoute() {
+  const { token } = useAuth();
+  if (token) return <Navigate to="/" replace />;
+  return <Login />;
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginRoute />} />
+          <Route path="/*" element={<ProtectedLayout />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}

web/src/api.ts

@@ -0,0 +1,124 @@
+const BASE = '/api/v1';
+
+function getToken(): string | null {
+  return localStorage.getItem('token');
+}
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+  const token = getToken();
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(`${BASE}${path}`, {
+    method,
+    headers,
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+
+  if (res.status === 204) return undefined as T;
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || 'Request failed');
+  return data as T;
+}
+
+export const api = {
+  // Auth
+  login: (email: string, password: string) =>
+    request<{ token: string }>('POST', '/auth/login', { email, password }),
+  register: (name: string, email: string, password: string, role = 'volunteer') =>
+    request<Volunteer>('POST', '/auth/register', { name, email, password, role }),
+
+  // Volunteers
+  listVolunteers: () => request<Volunteer[]>('GET', '/volunteers'),
+  getVolunteer: (id: number) => request<Volunteer>('GET', `/volunteers/${id}`),
+  updateVolunteer: (id: number, data: Partial<Volunteer>) =>
+    request<Volunteer>('PUT', `/volunteers/${id}`, data),
+
+  // Schedules
+  listSchedules: () => request<Schedule[]>('GET', '/schedules'),
+  createSchedule: (data: CreateScheduleInput) => request<Schedule>('POST', '/schedules', data),
+  updateSchedule: (id: number, data: Partial<CreateScheduleInput>) =>
+    request<Schedule>('PUT', `/schedules/${id}`, data),
+  deleteSchedule: (id: number) => request<void>('DELETE', `/schedules/${id}`),
+
+  // Time off
+  listTimeOff: () => request<TimeOffRequest[]>('GET', '/timeoff'),
+  createTimeOff: (data: CreateTimeOffInput) => request<TimeOffRequest>('POST', '/timeoff', data),
+  reviewTimeOff: (id: number, status: 'approved' | 'rejected') =>
+    request<TimeOffRequest>('PUT', `/timeoff/${id}/review`, { status }),
+
+  // Check-in / out
+  checkIn: (schedule_id?: number, notes?: string) =>
+    request<CheckIn>('POST', '/checkin', { schedule_id, notes }),
+  checkOut: (notes?: string) => request<CheckIn>('POST', '/checkout', { notes }),
+  getHistory: () => request<CheckIn[]>('GET', '/checkin/history'),
+
+  // Notifications
+  listNotifications: () => request<Notification[]>('GET', '/notifications'),
+  markRead: (id: number) => request<Notification>('PUT', `/notifications/${id}/read`, {}),
+};
+
+export interface Volunteer {
+  id: number;
+  name: string;
+  email: string;
+  role: 'admin' | 'volunteer';
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Schedule {
+  id: number;
+  volunteer_id: number;
+  title: string;
+  starts_at: string;
+  ends_at: string;
+  notes?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateScheduleInput {
+  volunteer_id?: number;
+  title: string;
+  starts_at: string;
+  ends_at: string;
+  notes?: string;
+}
+
+export interface TimeOffRequest {
+  id: number;
+  volunteer_id: number;
+  starts_at: string;
+  ends_at: string;
+  reason?: string;
+  status: 'pending' | 'approved' | 'rejected';
+  reviewed_by?: number;
+  reviewed_at?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateTimeOffInput {
+  starts_at: string;
+  ends_at: string;
+  reason?: string;
+}
+
+export interface CheckIn {
+  id: number;
+  volunteer_id: number;
+  schedule_id?: number;
+  checked_in_at: string;
+  checked_out_at?: string;
+  notes?: string;
+}
+
+export interface Notification {
+  id: number;
+  volunteer_id: number;
+  message: string;
+  read: boolean;
+  created_at: string;
+}

web/src/auth.tsx

@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+interface AuthContextValue {
+  token: string | null;
+  role: string | null;
+  volunteerID: number | null;
+  login: (token: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function parseJWT(token: string): { volunteer_id: number; role: string } | null {
+  try {
+    const payload = JSON.parse(atob(token.split('.')[1]));
+    return payload;
+  } catch {
+    return null;
+  }
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<string | null>(() => localStorage.getItem('token'));
+  const [role, setRole] = useState<string | null>(null);
+  const [volunteerID, setVolunteerID] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (token) {
+      const payload = parseJWT(token);
+      setRole(payload?.role ?? null);
+      setVolunteerID(payload?.volunteer_id ?? null);
+    } else {
+      setRole(null);
+      setVolunteerID(null);
+    }
+  }, [token]);
+
+  function login(t: string) {
+    localStorage.setItem('token', t);
+    setToken(t);
+  }
+
+  function logout() {
+    localStorage.removeItem('token');
+    setToken(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ token, role, volunteerID, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}

web/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

web/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

web/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

web/src/pages/Dashboard.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import { api, CheckIn, Notification, Schedule } from '../api';
+import { useAuth } from '../auth';
+
+export default function Dashboard() {
+  const { volunteerID } = useAuth();
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [activeCheckIn, setActiveCheckIn] = useState<CheckIn | null>(null);
+  const [history, setHistory] = useState<CheckIn[]>([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api.listSchedules().then(setSchedules).catch(() => {});
+    api.listNotifications().then(setNotifications).catch(() => {});
+    api.getHistory().then(data => {
+      setHistory(data);
+      const active = data.find(c => !c.checked_out_at && c.volunteer_id === volunteerID);
+      setActiveCheckIn(active ?? null);
+    }).catch(() => {});
+  }, [volunteerID]);
+
+  async function handleCheckIn() {
+    try {
+      const ci = await api.checkIn();
+      setActiveCheckIn(ci);
+      setHistory(prev => [ci, ...prev]);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleCheckOut() {
+    try {
+      const ci = await api.checkOut();
+      setActiveCheckIn(null);
+      setHistory(prev => prev.map(c => c.id === ci.id ? ci : c));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleMarkRead(id: number) {
+    try {
+      await api.markRead(id);
+      setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
+    } catch {}
+  }
+
+  const upcomingSchedules = schedules
+    .filter(s => new Date(s.starts_at) >= new Date())
+    .slice(0, 5);
+
+  const unreadNotifications = notifications.filter(n => !n.read);
+
+  return (
+    <div className="page">
+      <h2>Dashboard</h2>
+      {error && <p className="error">{error}</p>}
+
+      <section className="card">
+        <h3>Check-In Status</h3>
+        {activeCheckIn ? (
+          <div>
+            <p>Checked in at {new Date(activeCheckIn.checked_in_at).toLocaleTimeString()}</p>
+            <button onClick={handleCheckOut}>Check Out</button>
+          </div>
+        ) : (
+          <button onClick={handleCheckIn}>Check In</button>
+        )}
+      </section>
+
+      <section className="card">
+        <h3>Upcoming Shifts</h3>
+        {upcomingSchedules.length === 0 ? (
+          <p>No upcoming shifts.</p>
+        ) : (
+          <ul>
+            {upcomingSchedules.map(s => (
+              <li key={s.id}>
+                <strong>{s.title}</strong> — {new Date(s.starts_at).toLocaleString()} to {new Date(s.ends_at).toLocaleString()}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="card">
+        <h3>Notifications {unreadNotifications.length > 0 && <span className="badge">{unreadNotifications.length}</span>}</h3>
+        {notifications.length === 0 ? (
+          <p>No notifications.</p>
+        ) : (
+          <ul>
+            {notifications.map(n => (
+              <li key={n.id} className={n.read ? 'read' : 'unread'}>
+                {n.message}
+                {!n.read && (
+                  <button className="btn-small" onClick={() => handleMarkRead(n.id)}>Mark read</button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="card">
+        <h3>Recent Check-In History</h3>
+        {history.length === 0 ? (
+          <p>No history yet.</p>
+        ) : (
+          <table>
+            <thead>
+              <tr><th>In</th><th>Out</th><th>Duration</th></tr>
+            </thead>
+            <tbody>
+              {history.slice(0, 10).map(c => {
+                const inTime = new Date(c.checked_in_at);
+                const outTime = c.checked_out_at ? new Date(c.checked_out_at) : null;
+                const duration = outTime
+                  ? `${Math.round((outTime.getTime() - inTime.getTime()) / 60000)} min`
+                  : 'Active';
+                return (
+                  <tr key={c.id}>
+                    <td>{inTime.toLocaleString()}</td>
+                    <td>{outTime ? outTime.toLocaleString() : '—'}</td>
+                    <td>{duration}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </div>
+  );
+}

web/src/pages/Login.tsx

@@ -0,0 +1,43 @@
+import React, { useState, FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+import { useAuth } from '../auth';
+
+export default function Login() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    try {
+      const { token } = await api.login(email, password);
+      login(token);
+      navigate('/');
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <div className="auth-page">
+      <h1>Walkies</h1>
+      <h2>Sign In</h2>
+      <form onSubmit={handleSubmit}>
+        {error && <p className="error">{error}</p>}
+        <label>
+          Email
+          <input type="email" value={email} onChange={e => setEmail(e.target.value)} required />
+        </label>
+        <label>
+          Password
+          <input type="password" value={password} onChange={e => setPassword(e.target.value)} required />
+        </label>
+        <button type="submit">Sign In</button>
+      </form>
+    </div>
+  );
+}

web/src/pages/Schedules.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState, FormEvent } from 'react';
+import { api, Schedule } from '../api';
+import { useAuth } from '../auth';
+
+export default function Schedules() {
+  const { role } = useAuth();
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [error, setError] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState({ title: '', starts_at: '', ends_at: '', notes: '' });
+
+  useEffect(() => {
+    api.listSchedules().then(setSchedules).catch(() => setError('Could not load schedules.'));
+  }, []);
+
+  async function handleCreate(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    try {
+      const sc = await api.createSchedule(form);
+      setSchedules(prev => [...prev, sc]);
+      setForm({ title: '', starts_at: '', ends_at: '', notes: '' });
+      setShowForm(false);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleDelete(id: number) {
+    if (!window.confirm('Delete this schedule?')) return;
+    try {
+      await api.deleteSchedule(id);
+      setSchedules(prev => prev.filter(s => s.id !== id));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h2>Schedules</h2>
+        {role === 'admin' && (
+          <button onClick={() => setShowForm(v => !v)}>
+            {showForm ? 'Cancel' : 'Add Shift'}
+          </button>
+        )}
+      </div>
+      {error && <p className="error">{error}</p>}
+
+      {showForm && (
+        <form className="card" onSubmit={handleCreate}>
+          <h3>New Shift</h3>
+          <label>
+            Title
+            <input value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))} required />
+          </label>
+          <label>
+            Starts At
+            <input type="datetime-local" value={form.starts_at} onChange={e => setForm(f => ({ ...f, starts_at: e.target.value }))} required />
+          </label>
+          <label>
+            Ends At
+            <input type="datetime-local" value={form.ends_at} onChange={e => setForm(f => ({ ...f, ends_at: e.target.value }))} required />
+          </label>
+          <label>
+            Notes
+            <textarea value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} />
+          </label>
+          <button type="submit">Create</button>
+        </form>
+      )}
+
+      {schedules.length === 0 ? (
+        <p>No schedules found.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Starts</th>
+              <th>Ends</th>
+              <th>Notes</th>
+              {role === 'admin' && <th>Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {schedules.map(s => (
+              <tr key={s.id}>
+                <td>{s.title}</td>
+                <td>{new Date(s.starts_at).toLocaleString()}</td>
+                <td>{new Date(s.ends_at).toLocaleString()}</td>
+                <td>{s.notes ?? '—'}</td>
+                {role === 'admin' && (
+                  <td>
+                    <button className="btn-danger btn-small" onClick={() => handleDelete(s.id)}>Delete</button>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

web/src/pages/TimeOff.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState, FormEvent } from 'react';
+import { api, TimeOffRequest } from '../api';
+import { useAuth } from '../auth';
+
+export default function TimeOff() {
+  const { role } = useAuth();
+  const [requests, setRequests] = useState<TimeOffRequest[]>([]);
+  const [error, setError] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState({ starts_at: '', ends_at: '', reason: '' });
+
+  useEffect(() => {
+    api.listTimeOff().then(setRequests).catch(() => setError('Could not load requests.'));
+  }, []);
+
+  async function handleCreate(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    try {
+      const req = await api.createTimeOff(form);
+      setRequests(prev => [req, ...prev]);
+      setForm({ starts_at: '', ends_at: '', reason: '' });
+      setShowForm(false);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleReview(id: number, status: 'approved' | 'rejected') {
+    try {
+      const req = await api.reviewTimeOff(id, status);
+      setRequests(prev => prev.map(r => r.id === id ? req : r));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  const statusClass = (status: string) => {
+    if (status === 'approved') return 'status-approved';
+    if (status === 'rejected') return 'status-rejected';
+    return 'status-pending';
+  };
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h2>Time Off Requests</h2>
+        <button onClick={() => setShowForm(v => !v)}>
+          {showForm ? 'Cancel' : 'Request Time Off'}
+        </button>
+      </div>
+      {error && <p className="error">{error}</p>}
+
+      {showForm && (
+        <form className="card" onSubmit={handleCreate}>
+          <h3>New Request</h3>
+          <label>
+            From
+            <input type="date" value={form.starts_at} onChange={e => setForm(f => ({ ...f, starts_at: e.target.value }))} required />
+          </label>
+          <label>
+            To
+            <input type="date" value={form.ends_at} onChange={e => setForm(f => ({ ...f, ends_at: e.target.value }))} required />
+          </label>
+          <label>
+            Reason
+            <textarea value={form.reason} onChange={e => setForm(f => ({ ...f, reason: e.target.value }))} />
+          </label>
+          <button type="submit">Submit</button>
+        </form>
+      )}
+
+      {requests.length === 0 ? (
+        <p>No time off requests.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>From</th>
+              <th>To</th>
+              <th>Reason</th>
+              <th>Status</th>
+              {role === 'admin' && <th>Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {requests.map(r => (
+              <tr key={r.id}>
+                <td>{new Date(r.starts_at).toLocaleDateString()}</td>
+                <td>{new Date(r.ends_at).toLocaleDateString()}</td>
+                <td>{r.reason ?? '—'}</td>
+                <td><span className={statusClass(r.status)}>{r.status}</span></td>
+                {role === 'admin' && (
+                  <td>
+                    {r.status === 'pending' && (
+                      <>
+                        <button className="btn-small" onClick={() => handleReview(r.id, 'approved')}>Approve</button>
+                        <button className="btn-small btn-danger" onClick={() => handleReview(r.id, 'rejected')}>Reject</button>
+                      </>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

web/src/pages/Volunteers.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { api, Volunteer } from '../api';
+
+export default function Volunteers() {
+  const [volunteers, setVolunteers] = useState<Volunteer[]>([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api.listVolunteers().then(setVolunteers).catch(() => setError('Could not load volunteers.'));
+  }, []);
+
+  async function handleToggleActive(v: Volunteer) {
+    try {
+      const updated = await api.updateVolunteer(v.id, { active: !v.active });
+      setVolunteers(prev => prev.map(vol => vol.id === v.id ? updated : vol));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <div className="page">
+      <h2>Volunteers</h2>
+      {error && <p className="error">{error}</p>}
+      {volunteers.length === 0 ? (
+        <p>No volunteers found.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Status</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {volunteers.map(v => (
+              <tr key={v.id}>
+                <td>{v.name}</td>
+                <td>{v.email}</td>
+                <td>{v.role}</td>
+                <td>{v.active ? 'Active' : 'Inactive'}</td>
+                <td>
+                  <button className="btn-small" onClick={() => handleToggleActive(v)}>
+                    {v.active ? 'Deactivate' : 'Activate'}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

web/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

web/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

web/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';