init

2025-07-22 00:00:34 +02:00 · 2025-07-22 00:00:34 +02:00 · ba1f43fd8e
commit ba1f43fd8e
35 changed files with 5926 additions and 0 deletions
--- a/.air.toml
+++ b/.air.toml
@ -0,0 +1,52 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+  args_bin = []
+  bin = "./tmp/main"
+  cmd = "go build -o ./tmp/main ."
+  delay = 1000
+  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  post_cmd = []
+  pre_cmd = []
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  silent = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[proxy]
+  app_port = 8080
+  enabled = false
+  proxy_port = 8090
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,34 @@
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile
+Containerfile
+.dockerignore
+
+# Build artifacts
+gocheck
+gocheck-*
+*.exe
+
+# Database files (will be created at runtime)
+checklists.db
+checklists.db-*
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+
+# Temporary files
+/tmp/
+/temp/ 
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+data/
+gocheck
+tmp/
--- a/61
+++ b/61
@ -0,0 +1,61 @@
+FROM node:22-alpine AS frontend-builder
+
+WORKDIR /app
+
+COPY frontend /app
+
+RUN npm install
+
+RUN npm run build
+
+# Multi-stage build for GoCheck application
+# Stage 1: Build the Go binary
+FROM golang:1.24-alpine AS builder
+
+# Install git, ca-certificates, and build tools for CGO
+RUN apk add --no-cache git ca-certificates gcc musl-dev
+
+# Set working directory
+WORKDIR /app
+
+# Copy go mod files
+COPY go.mod go.sum ./
+
+# Download dependencies
+RUN go mod download
+
+# Copy source code
+COPY . .
+
+COPY --from=frontend-builder /app/dist /app/frontend/dist
+
+# Build the binary with embedded static files
+RUN CGO_ENABLED=1 GOOS=linux go build -a -installsuffix cgo -o gocheck .
+
+# Stage 2: Create minimal runtime container
+FROM alpine:latest
+
+# Install runtime dependencies for SQLite
+RUN apk add --no-cache ca-certificates sqlite
+
+# Create non-root user
+RUN addgroup -g 1001 -S gocheck && \
+    adduser -S -D -H -h /app -s /sbin/nologin -G gocheck -g gocheck -u 1001 gocheck
+
+# Copy the binary from builder stage
+COPY --from=builder /app/gocheck /app/gocheck
+
+# Set working directory
+WORKDIR /app
+
+# Change ownership to non-root user
+RUN chown -R gocheck:gocheck /app
+
+# Switch to non-root user
+USER gocheck
+
+# Expose default port (can be overridden via PORT env var)
+EXPOSE 8080
+
+# Run the binary
+ENTRYPOINT ["/app/gocheck"] 
--- a/README.md
+++ b/README.md
@ -0,0 +1,364 @@
+# GoCheck - Collaborative Checklist Application
+
+A real-time collaborative checklist application built with Go and React,
+featuring Server-Sent Events (SSE) for live updates and SQLite for data
+persistence.
+
+## Features
+
+- Create and manage checklists
+- Add, update, and delete checklist items
+- Real-time collaboration with Server-Sent Events
+- Item locking mechanism to prevent conflicts
+- Hierarchical items (parent-child relationships)
+- SQLite database for data persistence
+- **Modern web frontend with React and TypeScript**
+- **Real-time updates across multiple browser tabs/windows**
+- **SSE-first architecture: All data flows through Server-Sent Events**
+
+## Architecture
+
+### SSE-First Design
+
+This application follows an **SSE-first architecture** where all checklist data
+flows through Server-Sent Events:
+
+- **No API calls for data retrieval**: The frontend never calls the
+  `/api/checklists/{uuid}/items` endpoint
+- **SSE as primary data source**: All checklist items are received via SSE
+  streaming
+- **Real-time state management**: The frontend maintains state purely through
+  SSE events
+- **Immediate updates**: Changes appear instantly across all connected clients
+
+#### Data Flow
+
+1. **Initial Connection**: When a client connects to a checklist, the SSE
+   endpoint sends the complete current state
+2. **Real-time Updates**: All subsequent changes (add, update, delete, lock) are
+   broadcast via SSE
+3. **State Synchronization**: The frontend updates its local state based on SSE
+   events without API calls
+
+This design ensures:
+
+- **Consistency**: All clients see the same data at the same time
+- **Performance**: No unnecessary API calls to reload data
+- **Real-time Experience**: Changes appear instantly across all connected
+  browsers
+- **Scalability**: Reduces server load by eliminating polling
+
+## Prerequisites
+
+- Go 1.16 or later
+- SQLite3 (usually included with Go)
+
+## Setup
+
+1. **Initialize the Go module** (already done):
+   ```bash
+   go mod init gocheck
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   go mod tidy
+   ```
+
+3. **Build the application**:
+   ```bash
+   go build
+   ```
+
+4. **Run the server**:
+   ```bash
+   ./gocheck
+   ```
+
+   Or use the demo script for a guided experience:
+   ```bash
+   ./demo.sh
+   ```
+
+The server will start on `http://localhost:8080`
+
+## Deployment
+
+The application is built as a single binary with embedded static files, making
+deployment simple:
+
+- **Single Executable**: The `gocheck` binary contains all necessary files
+- **No External Dependencies**: Just copy the binary to your server
+- **Cross-Platform**: Build for different platforms as needed
+
+### Binary Deployment
+
+To build for different platforms:
+
+```bash
+# Linux
+GOOS=linux GOARCH=amd64 go build -o gocheck-linux
+
+# Windows
+GOOS=windows GOARCH=amd64 go build -o gocheck.exe
+
+# macOS
+GOOS=darwin GOARCH=amd64 go build -o gocheck-macos
+```
+
+### Container Deployment
+
+The application includes a multi-stage Containerfile for containerized
+deployment:
+
+#### Using Podman (Recommended)
+
+```bash
+# Build and run with the provided script
+./build-container.sh
+
+# Or manually:
+podman build -t gocheck -f Containerfile .
+podman run -d --name gocheck-container -p 8080:8080 -v gocheck-data:/app gocheck
+
+# With custom port:
+PORT=3000 ./build-container.sh
+# Or manually:
+podman run -d --name gocheck-container -p 3000:8080 -e PORT=8080 -v gocheck-data:/app gocheck
+```
+
+#### Using Docker
+
+```bash
+# Build the image
+docker build -t gocheck -f Containerfile .
+
+# Run the container
+docker run -d --name gocheck-container -p 8080:8080 -v gocheck-data:/app gocheck
+
+# With custom port:
+docker run -d --name gocheck-container -p 3000:8080 -e PORT=8080 -v gocheck-data:/app gocheck
+```
+
+#### Container Features
+
+- **Multi-stage build**: Uses Go Alpine for building, distroless for runtime
+- **Minimal footprint**: Runtime container is only ~2MB
+- **Persistent data**: SQLite database is stored in a named volume
+- **Security**: Runs as non-root user in distroless container
+- **Configurable**: Supports environment variables for customization
+
+#### Environment Variables
+
+- `PORT`: Set the port the application listens on (default: 8080)
+  ```bash
+  # Example: Run on port 3000
+  PORT=3000 ./build-container.sh
+  ```
+
+## Frontend
+
+The application includes a modern web frontend built with **React**:
+
+- **Single Page Application**: No page reloads needed
+- **Home Page**: Welcome page for creating new checklists
+- **Checklist Page**: Dedicated page for viewing and editing checklists
+- **Local Storage**: Automatically saves and lists your checklists
+- **Real-time Updates**: Changes appear instantly across all connected browsers
+- **Responsive Design**: Works on desktop and mobile devices
+- **Item Locking**: Visual indicators when items are being edited
+- **Hierarchical Items**: Support for parent-child relationships
+- **Modern UI**: Clean, intuitive interface
+- **TypeScript**: Full type safety and better developer experience
+- **Component-based**: Modular, maintainable code structure
+- **URL-based Routing**: Share checklist URLs directly
+- **ESLint**: Code quality enforcement with no-semicolon style
+
+### Frontend Development
+
+The frontend is located in the `frontend/` directory and uses:
+
+- **React**: Modern JavaScript library for building user interfaces
+- **TypeScript**: Type-safe JavaScript
+- **Vite**: Fast build tool and dev server
+- **CSS Modules**: Scoped styling
+
+#### Development Commands
+
+```bash
+# Install dependencies
+cd frontend && npm install
+
+# Start development server (with API proxy)
+cd frontend && npm run dev
+
+# Build for production
+cd frontend && npm run build
+
+# Lint code (check for issues)
+cd frontend && npm run lint
+
+# Lint and auto-fix issues
+cd frontend && npm run lint:fix
+
+# Build frontend and copy to static directory
+./build-frontend.sh
+```
+
+#### Development Workflow
+
+1. Start the backend server: `./gocheck`
+2. Start the frontend dev server: `cd frontend && npm run dev`
+3. Access the app at: `http://localhost:5173` (frontend dev server)
+4. The frontend will proxy API requests to the backend at
+   `http://localhost:8080`
+
+Simply open `http://localhost:8080` in your browser to use the production
+application.
+
+#### Page Structure
+
+- **Home Page** (`/`): Welcome page with option to create new checklists and
+  view saved checklists
+- **Checklist Page** (/{uuid}`): View and edit specific checklists
+  - when opening this route and that checklistid is not yet saved into
+    localstorage it should be committed there
+- **URL Sharing**: Share checklist URLs directly with others for collaboration
+- **Local Storage**: Checklists are automatically saved and can be renamed or
+  removed from the home page
+
+## API Endpoints
+
+### Checklists
+
+- `POST /api/checklists` - Create a new checklist
+- `POST /api/checklists/{uuid}/items` - Add an item to a checklist
+- `PATCH /api/checklists/{uuid}/items/{id}` - Update an item
+- `DELETE /api/checklists/{uuid}/items/{id}` - Delete an item
+- `POST /api/checklists/{uuid}/items/{id}/lock` - Lock an item for editing
+- `GET /api/checklists/{uuid}/sse` - Server-Sent Events stream for real-time
+  updates (primary data source)
+
+**Note**: The `GET /api/checklists/{uuid}/items` endpoint exists but is not used
+by the frontend. All data flows through the SSE endpoint for real-time updates.
+
+### API Response Format
+
+All API endpoints return JSON responses with a consistent format:
+
+```json
+{
+   "success": true,
+   "message": "Operation completed successfully"
+   // ... additional data specific to the endpoint
+}
+```
+
+#### Example Responses
+
+**Create Checklist:**
+
+```json
+{
+   "success": true,
+   "message": "Checklist created successfully",
+   "uuid": "123e4567-e89b-12d3-a456-426614174000"
+}
+```
+
+**Add Item:**
+
+```json
+{
+   "success": true,
+   "message": "Item added successfully",
+   "item": {
+      "id": 1,
+      "content": "New item",
+      "checked": false,
+      "parent_id": null,
+      "checklist_uuid": "123e4567-e89b-12d3-a456-426614174000"
+   }
+}
+```
+
+**Update Item:**
+
+```json
+{
+   "success": true,
+   "message": "Item updated successfully",
+   "item": {
+      "id": 1,
+      "content": "Updated content",
+      "checked": true,
+      "parent_id": null,
+      "checklist_uuid": "123e4567-e89b-12d3-a456-426614174000"
+   }
+}
+```
+
+**Delete Item:**
+
+```json
+{
+   "success": true,
+   "message": "Item deleted successfully",
+   "id": 1
+}
+```
+
+**Lock Item:**
+
+```json
+{
+   "success": true,
+   "message": "Item locked successfully",
+   "id": 1,
+   "locked_by": "user123",
+   "expires": "2024-01-01T12:00:00Z"
+}
+```
+
+**Get Items:**
+
+```json
+{
+   "success": true,
+   "message": "Items loaded successfully",
+   "items": [
+      {
+         "id": 1,
+         "content": "Item 1",
+         "checked": false,
+         "parent_id": null,
+         "checklist_uuid": "123e4567-e89b-12d3-a456-426614174000"
+      }
+   ]
+}
+```
+
+## Dependencies
+
+- `github.com/google/uuid` - UUID generation
+- `github.com/mattn/go-sqlite3` - SQLite driver for Go
+
+## Database
+
+The application uses SQLite with the following schema:
+
+- `checklists` table: Stores checklist metadata
+- `items` table: Stores checklist items with hierarchical relationships
+
+## Real-time Features
+
+- **SSE-first architecture**: All data flows through Server-Sent Events
+- **Real-time state synchronization**: No API polling required
+- **Item locking with automatic expiration** (30 seconds)
+- **Broadcast updates to all connected clients**
+- **Immediate UI updates**: Changes appear instantly across all browsers
+
+## Development
+
+To run in development mode with automatic reloading, you can use tools like
+`air` or `realize`.
--- a/build-container.sh
+++ b/build-container.sh
@ -0,0 +1,40 @@
+#!/bin/bash
+
+# Build script for GoCheck container
+set -e
+
+IMAGE_NAME="gocheck"
+CONTAINER_NAME="gocheck-container"
+PORT="${PORT:-8080}"
+
+echo "<22><>️  Building GoCheck frontend..."
+
+
+echo "🏗️  Building GoCheck container..."
+
+# Build the container image
+podman build -t $IMAGE_NAME -f Containerfile .
+
+echo "✅ Container built successfully!"
+
+echo "🚀 Starting GoCheck container on port $PORT..."
+podman run -d \
+    --rm \
+    --name $CONTAINER_NAME \
+    -p $PORT:8080 \
+    -e PORT=8080 \
+    -v gocheck-data:/app \
+    $IMAGE_NAME
+
+echo "✅ GoCheck is running!"
+echo "🌐 Access the application at: http://localhost:$PORT"
+echo ""
+echo "📋 Container management commands:"
+echo "  View logs:     podman logs $CONTAINER_NAME"
+echo "  Stop:          podman stop $CONTAINER_NAME"
+echo "  Start:         podman start $CONTAINER_NAME"
+echo "  Remove:        podman rm $CONTAINER_NAME"
+echo "  Shell access:  podman exec -it $CONTAINER_NAME /bin/sh"
+echo ""
+echo "🔧 Environment variables:"
+echo "  PORT:          Set to override the default port (default: 8080)" 
--- a/data/.gitkeep
+++ b/data/.gitkeep
--- a/demo.sh
+++ b/demo.sh
@ -0,0 +1,42 @@
+#!/bin/bash
+
+echo "🚀 Starting GoCheck Demo"
+echo "========================"
+
+# Start the server in the background
+echo "Starting server..."
+./gocheck &
+SERVER_PID=$!
+
+# Wait for server to start
+sleep 2
+
+echo ""
+echo "✅ Server is running at http://localhost:8080"
+echo ""
+echo "🌐 Open your browser and go to: http://localhost:8080"
+echo ""
+echo "📋 Demo Features:"
+echo "   • Create a new checklist"
+echo "   • Add items to your checklist"
+echo "   • Check/uncheck items"
+echo "   • Edit item content"
+echo "   • Lock items to prevent conflicts"
+echo "   • Create hierarchical items (sub-items)"
+echo "   • Real-time collaboration (open multiple browser tabs)"
+echo ""
+echo "🔧 API Testing:"
+echo "   • Create checklist: POST /api/checklists"
+echo "   • Add item: POST /api/checklists/{uuid}/items"
+echo "   • Get items: GET /api/checklists/{uuid}/items"
+echo "   • Update item: PATCH /api/checklists/{uuid}/items/{id}"
+echo "   • Delete item: DELETE /api/checklists/{uuid}/items/{id}"
+echo "   • Lock item: POST /api/checklists/{uuid}/items/{id}/lock"
+echo "   • Real-time updates: GET /api/checklists/{uuid}/sse"
+echo ""
+echo "Press Ctrl+C to stop the server"
+echo ""
+
+# Wait for user to stop
+trap "echo ''; echo '🛑 Stopping server...'; kill $SERVER_PID; exit" INT
+wait 
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,25 @@
+version: '3.8'
+
+services:
+  gocheck:
+    build:
+      context: .
+      dockerfile: Containerfile
+    container_name: gocheck-container
+    ports:
+      - "${PORT:-8080}:8080"
+    environment:
+      - PORT=8080
+    volumes:
+      - gocheck-data:/app
+    restart: unless-stopped
+    healthcheck:
+      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8080/" ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+
+volumes:
+  gocheck-data:
+    driver: local
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cheekylist</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text x="50" y="70" font-family="Arial, sans-serif" font-size="60" text-anchor="middle" fill="#000000">📝</text>
+</svg> 
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -0,0 +1,18 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import Home from './pages/Home'
+import Checklist from './pages/Checklist'
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/:uuid" element={<Checklist />} />
+        </Routes>
+      </div>
+    </Router>
+  )
+}
+
+export default App
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/components/ChecklistItem.tsx
+++ b/frontend/src/components/ChecklistItem.tsx
@ -0,0 +1,195 @@
+import { useState, useRef, useEffect } from 'react'
+import type { ChecklistItem as ChecklistItemType } from '../types'
+
+interface ChecklistItemProps {
+  item: ChecklistItemType
+  onUpdate: (id: number, updates: Partial<ChecklistItemType>) => Promise<void>
+  onDelete: (id: number) => Promise<void>
+  onLock: (id: number, user: string) => Promise<void>
+  depth?: number
+  children?: ChecklistItemType[]
+}
+
+export default function ChecklistItem({ 
+  item, 
+  onUpdate, 
+  onDelete, 
+  onLock, 
+  depth = 0,
+  children = []
+}: ChecklistItemProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [userName, setUserName] = useState('')
+  const contentRef = useRef<HTMLSpanElement>(null)
+
+  const isLocked = item.locked_by && item.lock_until && new Date(item.lock_until) > new Date()
+  const isLockedByMe = isLocked && item.locked_by === userName
+
+  useEffect(() => {
+    // Generate a random user name if not set
+    if (!userName) {
+      const randomName = `user_${Math.random().toString(36).substr(2, 9)}`
+      setUserName(randomName)
+    }
+  }, [userName])
+
+  useEffect(() => {
+    if (isEditing && contentRef.current) {
+      contentRef.current.focus()
+      // Select all text when entering edit mode
+      const range = document.createRange()
+      range.selectNodeContents(contentRef.current)
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+    }
+  }, [isEditing])
+
+  const handleEdit = async () => {
+    if (isLocked && !isLockedByMe) {
+      alert('This item is being edited by someone else')
+      return
+    }
+
+    if (!isLockedByMe) {
+      try {
+        await onLock(item.id, userName)
+      } catch (error) {
+        console.error('Failed to lock item:', error)
+        return
+      }
+    }
+
+    setIsEditing(true)
+  }
+
+  const handleSave = async () => {
+    const newContent = contentRef.current?.textContent?.trim() || ''
+    if (newContent === '') return
+
+    try {
+      await onUpdate(item.id, { content: newContent })
+      setIsEditing(false)
+    } catch (error) {
+      console.error('Failed to update item:', error)
+    }
+  }
+
+  const handleCancel = () => {
+    if (contentRef.current) {
+      contentRef.current.textContent = item.content
+    }
+    setIsEditing(false)
+  }
+
+  const handleDelete = async () => {
+    if (confirm('Are you sure you want to delete this item?')) {
+      try {
+        setIsDeleting(true)
+        await onDelete(item.id)
+      } catch (error) {
+        console.error('Failed to delete item:', error)
+      } finally {
+        setIsDeleting(false)
+      }
+    }
+  }
+
+  const handleToggleCheck = async () => {
+    try {
+      await onUpdate(item.id, { checked: !item.checked })
+    } catch (error) {
+      console.error('Failed to toggle item:', error)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSave()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      handleCancel()
+    }
+  }
+
+  const handleBlur = () => {
+    // Small delay to allow for button clicks
+    setTimeout(() => {
+      if (isEditing) {
+        handleSave()
+      }
+    }, 100)
+  }
+
+  return (
+    <div className={`${depth > 0 ? 'ml-4 border-l-2 border-gray-200 dark:border-gray-700 pl-3' : ''}`}>
+      <div className="flex items-center justify-between py-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg px-2 transition-colors duration-200">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <input
+            type="checkbox"
+            checked={item.checked}
+            onChange={handleToggleCheck}
+            disabled={Boolean(isLocked && !isLockedByMe)}
+            className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+          
+          <span 
+            ref={contentRef}
+            contentEditable={isEditing}
+            suppressContentEditableWarning={true}
+            className={`flex-1 text-sm text-gray-700 dark:text-gray-300 break-words outline-none ${
+              isEditing 
+                ? 'px-2 py-1 border-2 border-blue-500 rounded focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 bg-white dark:bg-gray-800' 
+                : 'cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200'
+            } ${
+              item.checked ? 'line-through text-gray-500 dark:text-gray-500' : ''
+            }`}
+            onClick={!isEditing ? handleEdit : undefined}
+            onKeyDown={isEditing ? handleKeyDown : undefined}
+            onBlur={isEditing ? handleBlur : undefined}
+          >
+            {item.content}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 ml-2">
+          {isLocked && !isLockedByMe && (
+            <span className="text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded-full whitespace-nowrap">
+              🔒 {item.locked_by}
+            </span>
+          )}
+          
+          {!isEditing && (
+            <>
+              <button 
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className="p-1 text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed"
+                title="Delete item"
+              >
+                🗑️
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {children.length > 0 && (
+        <div className="mt-1">
+          {children.map(child => (
+            <ChecklistItem
+              key={child.id}
+              item={child}
+              onUpdate={onUpdate}
+              onDelete={onDelete}
+              onLock={onLock}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+} 
--- a/frontend/src/hooks/useLocalStorage.ts
+++ b/frontend/src/hooks/useLocalStorage.ts
@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react'
+import type { SavedChecklist } from '../types'
+
+const STORAGE_KEY = 'gocheck-saved-checklists'
+
+export function useLocalStorage() {
+  const [savedChecklists, setSavedChecklists] = useState<SavedChecklist[]>([])
+
+  useEffect(() => {
+    loadSavedChecklists()
+  }, [])
+
+  const loadSavedChecklists = () => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        setSavedChecklists(JSON.parse(saved))
+      }
+    } catch (error) {
+      console.error('Error loading saved checklists:', error)
+    }
+  }
+
+  const saveChecklist = (checklist: SavedChecklist) => {
+    try {
+      const updated = [checklist, ...savedChecklists.filter(c => c.uuid !== checklist.uuid)]
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
+      setSavedChecklists(updated)
+    } catch (error) {
+      console.error('Error saving checklist:', error)
+    }
+  }
+
+  const deleteChecklist = (uuid: string) => {
+    try {
+      const updated = savedChecklists.filter(c => c.uuid !== uuid)
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
+      setSavedChecklists(updated)
+    } catch (error) {
+      console.error('Error deleting checklist:', error)
+    }
+  }
+
+  const updateChecklistName = (uuid: string, newName: string) => {
+    try {
+      const updated = savedChecklists.map(c => 
+        c.uuid === uuid ? { ...c, name: newName } : c
+      )
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
+      setSavedChecklists(updated)
+    } catch (error) {
+      console.error('Error updating checklist name:', error)
+    }
+  }
+
+  const getChecklistName = (uuid: string): string | null => {
+    const checklist = savedChecklists.find(c => c.uuid === uuid)
+    return checklist ? checklist.name : null
+  }
+
+  return {
+    savedChecklists,
+    saveChecklist,
+    deleteChecklist,
+    updateChecklistName,
+    getChecklistName,
+    loadSavedChecklists
+  }
+} 
--- a/frontend/src/hooks/useSSE.ts
+++ b/frontend/src/hooks/useSSE.ts
@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from 'react'
+import type { SSEEvent, ChecklistItem } from '../types'
+
+export function useSSE(uuid: string) {
+  const [items, setItems] = useState<ChecklistItem[]>([])
+  const [isConnected, setIsConnected] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const eventSourceRef = useRef<EventSource | null>(null)
+
+  useEffect(() => {
+    if (!uuid) return
+
+    const connectSSE = () => {
+      try {
+        const eventSource = new EventSource(`/api/checklists/${uuid}/sse`)
+        eventSourceRef.current = eventSource
+
+        eventSource.onopen = () => {
+          setIsConnected(true)
+          setError(null)
+        }
+
+        eventSource.onmessage = (event) => {
+          try {
+            const data: SSEEvent = JSON.parse(event.data)
+            
+            switch (data.type) {
+              case 'full_state':
+                if (data.items) {
+                  setItems(data.items)
+                }
+                break
+              case 'item_added':
+                if (data.item) {
+                  setItems(prev => [...prev, data.item!])
+                }
+                break
+              case 'item_updated':
+                if (data.item) {
+                  setItems(prev => 
+                    prev.map(item => 
+                      item.id === data.item!.id ? data.item! : item
+                    )
+                  )
+                }
+                break
+              case 'item_deleted':
+                if (data.id) {
+                  setItems(prev => prev.filter(item => item.id !== data.id))
+                }
+                break
+              case 'item_locked':
+                if (data.id && data.locked_by && data.expires) {
+                  setItems(prev => 
+                    prev.map(item => 
+                      item.id === data.id 
+                        ? { 
+                            ...item, 
+                            locked_by: data.locked_by, 
+                            lock_until: data.expires 
+                          }
+                        : item
+                    )
+                  )
+                }
+                break
+              case 'item_unlocked':
+                if (data.id) {
+                  setItems(prev => 
+                    prev.map(item => 
+                      item.id === data.id 
+                        ? { ...item, locked_by: undefined, lock_until: undefined }
+                        : item
+                    )
+                  )
+                }
+                break
+            }
+          } catch (parseError) {
+            console.error('Error parsing SSE message:', parseError)
+          }
+        }
+
+        eventSource.onerror = (error) => {
+          console.error('SSE Error:', error)
+          setError('Connection lost. Trying to reconnect...')
+          setIsConnected(false)
+          
+          // Close and attempt to reconnect after a delay
+          eventSource.close()
+          setTimeout(connectSSE, 3000)
+        }
+
+      } catch (error) {
+        console.error('Error connecting to SSE:', error)
+        setError('Failed to connect to server')
+        setIsConnected(false)
+      }
+    }
+
+    connectSSE()
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close()
+        eventSourceRef.current = null
+      }
+      setIsConnected(false)
+    }
+  }, [uuid])
+
+  return { items, isConnected, error }
+} 
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1 @@
+@import "tailwindcss";
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/Checklist.tsx
+++ b/frontend/src/pages/Checklist.tsx
@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useSSE } from '../hooks/useSSE'
+import { useLocalStorage } from '../hooks/useLocalStorage'
+import ChecklistItem from '../components/ChecklistItem'
+import type { ChecklistItem as ChecklistItemType } from '../types'
+
+export default function Checklist() {
+  const { uuid } = useParams<{ uuid: string }>()
+  const navigate = useNavigate()
+  const { items, isConnected, error } = useSSE(uuid || '')
+  const { saveChecklist, getChecklistName } = useLocalStorage()
+  const [newItemContent, setNewItemContent] = useState('')
+  const [isAddingItem, setIsAddingItem] = useState(false)
+
+  // Save checklist to local storage if not already saved
+  useEffect(() => {
+    if (uuid && !getChecklistName(uuid)) {
+      // Generate a default name if not in local storage
+      const defaultName = `Checklist ${new Date().toLocaleDateString()}`
+      saveChecklist({
+        uuid,
+        name: defaultName,
+        createdAt: new Date().toISOString()
+      })
+    }
+  }, [uuid, saveChecklist, getChecklistName])
+
+  const buildItemTree = (items: ChecklistItemType[]): ChecklistItemType[] => {
+    const itemMap = new Map<number, ChecklistItemType>()
+    const rootItems: ChecklistItemType[] = []
+
+    // Create a map of all items
+    items.forEach(item => {
+      itemMap.set(item.id, { ...item, children: [] })
+    })
+
+    // Build the tree structure
+    items.forEach(item => {
+      if (item.parent_id === null) {
+        rootItems.push(itemMap.get(item.id)!)
+      } else {
+        const parent = itemMap.get(item.parent_id)
+        if (parent) {
+          if (!parent.children) parent.children = []
+          parent.children.push(itemMap.get(item.id)!)
+        }
+      }
+    })
+
+    return rootItems
+  }
+
+  const addItem = async (content: string, parentId?: number) => {
+    if (!content.trim() || !uuid) return
+
+    setIsAddingItem(true)
+    try {
+      const response = await fetch(`/api/checklists/${uuid}/items`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ 
+          content: content.trim(),
+          parent_id: parentId || null
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to add item')
+      }
+    } catch (error) {
+      console.error('Error adding item:', error)
+      alert('Failed to add item')
+    } finally {
+      setIsAddingItem(false)
+    }
+  }
+
+  const updateItem = async (id: number, updates: Partial<ChecklistItemType>) => {
+    if (!uuid) return
+
+    try {
+      const response = await fetch(`/api/checklists/${uuid}/items/${id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(updates),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to update item')
+      }
+    } catch (error) {
+      console.error('Error updating item:', error)
+      throw error
+    }
+  }
+
+  const deleteItem = async (id: number) => {
+    if (!uuid) return
+
+    try {
+      const response = await fetch(`/api/checklists/${uuid}/items/${id}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to delete item')
+      }
+    } catch (error) {
+      console.error('Error deleting item:', error)
+      throw error
+    }
+  }
+
+  const lockItem = async (id: number, user: string) => {
+    if (!uuid) return
+
+    try {
+      const response = await fetch(`/api/checklists/${uuid}/items/${id}/lock`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ user }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to lock item')
+      }
+    } catch (error) {
+      console.error('Error locking item:', error)
+      throw error
+    }
+  }
+
+  const handleAddItem = async () => {
+    await addItem(newItemContent)
+    setNewItemContent('')
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleAddItem()
+    }
+  }
+
+  const renderItems = (items: ChecklistItemType[]) => {
+    return items.map(item => (
+      <ChecklistItem
+        key={item.id}
+        item={item}
+        onUpdate={updateItem}
+        onDelete={deleteItem}
+        onLock={lockItem}
+        children={item.children || []}
+      />
+    ))
+  }
+
+  if (!uuid) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-red-600 dark:text-red-400 text-lg font-medium">Invalid checklist ID</div>
+      </div>
+    )
+  }
+
+  const checklistName = getChecklistName(uuid) || 'Untitled Checklist'
+  const itemTree = buildItemTree(items)
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button 
+                onClick={() => navigate('/')} 
+                className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
+              >
+                <span className="text-xl">←</span>
+                <span className="font-medium">Back</span>
+              </button>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{checklistName}</h1>
+            </div>
+            <div className="flex items-center gap-2">
+              {isConnected ? (
+                <span className="flex items-center gap-2 text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30 px-3 py-1 rounded-full text-sm font-medium">
+                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                  Connected
+                </span>
+              ) : (
+                <span className="flex items-center gap-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/30 px-3 py-1 rounded-full text-sm font-medium">
+                  <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+                  Disconnected
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-4">
+            <div className="flex items-center gap-2">
+              <span className="text-red-600 dark:text-red-400">⚠️</span>
+              <span className="text-red-800 dark:text-red-200 font-medium">{error}</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <div className="max-w-4xl mx-auto px-4 py-6">
+        {/* Add Item Section */}
+        <div className=" shadow-sm  p-1 mb-1">
+          <div className="flex gap-3">
+            <input
+              type="text"
+              placeholder="Add a new item..."
+              value={newItemContent}
+              onChange={(e) => setNewItemContent(e.target.value)}
+              onKeyPress={handleKeyPress}
+              disabled={isAddingItem || !isConnected}
+              className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-500 dark:disabled:text-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
+            />
+            <button 
+              onClick={handleAddItem}
+              disabled={isAddingItem || !newItemContent.trim() || !isConnected}
+              className="px-6 py-2 bg-blue-600 dark:bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+            >
+              {isAddingItem ? 'Adding...' : 'Add'}
+            </button>
+          </div>
+        </div>
+
+        {/* Items Section */}
+        <div className=" p-2">
+          {itemTree.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="text-gray-400 dark:text-gray-500 text-6xl mb-4">📝</div>
+              <p className="text-gray-600 dark:text-gray-300 text-lg font-medium">No items yet</p>
+              <p className="text-gray-500 dark:text-gray-400 mt-2">Add your first item above to get started!</p>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {renderItems(itemTree)}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+} 
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useLocalStorage } from '../hooks/useLocalStorage'
+import type { SavedChecklist } from '../types'
+
+function Home() {
+  const [checklistName, setChecklistName] = useState('')
+  const [isCreating, setIsCreating] = useState(false)
+  const navigate = useNavigate()
+  const { savedChecklists, saveChecklist, deleteChecklist } = useLocalStorage()
+
+  const createChecklist = async () => {
+    if (!checklistName.trim()) return
+
+    setIsCreating(true)
+    try {
+      const response = await fetch('/api/checklists', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: checklistName.trim() }),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        const newChecklist: SavedChecklist = {
+          uuid: data.uuid,
+          name: checklistName.trim(),
+          createdAt: new Date().toISOString(),
+        }
+
+        // Save to local storage
+        saveChecklist(newChecklist)
+
+        // Navigate to the new checklist
+        navigate(`/${data.uuid}`)
+      } else {
+        alert('Failed to create checklist')
+      }
+    } catch (error) {
+      console.error('Error creating checklist:', error)
+      alert('Failed to create checklist')
+    } finally {
+      setIsCreating(false)
+      setChecklistName('')
+    }
+  }
+
+  const handleDeleteChecklist = (uuid: string) => {
+    deleteChecklist(uuid)
+  }
+
+  // Note: handleUpdateChecklistName is available for future use
+  // const handleUpdateChecklistName = (uuid: string, newName: string) => {
+  //   updateChecklistName(uuid, newName)
+  // }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-4xl mx-auto px-4 py-12">
+
+        {/* Create New Checklist Section */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8 mb-8">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Create New Checklist</h2>
+          <div className="flex gap-4">
+            <input
+              type="text"
+              placeholder="Enter checklist name..."
+              value={checklistName}
+              onChange={(e) => setChecklistName(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && createChecklist()}
+              disabled={isCreating}
+              className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-500 dark:disabled:text-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
+            />
+            <button 
+              onClick={createChecklist} 
+              disabled={isCreating || !checklistName.trim()}
+              className="px-8 py-3 bg-blue-600 dark:bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+            >
+              {isCreating ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </div>
+
+        {/* Saved Checklists Section */}
+        {savedChecklists.length > 0 && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Checklists</h2>
+            <div className="space-y-4">
+              {savedChecklists.map((checklist) => (
+                <div key={checklist.uuid} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">{checklist.name}</h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Created: {new Date(checklist.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <button 
+                      onClick={() => navigate(`/${checklist.uuid}`)}
+                      className="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200"
+                    >
+                      Open
+                    </button>
+                    <button 
+                      onClick={() => handleDeleteChecklist(checklist.uuid)}
+                      className="px-4 py-2 bg-red-600 dark:bg-red-500 text-white font-medium rounded-lg hover:bg-red-700 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {savedChecklists.length === 0 && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
+            <div className="text-gray-400 dark:text-gray-500 text-6xl mb-4">📋</div>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No checklists yet</h3>
+            <p className="text-gray-600 dark:text-gray-300">Create your first checklist above to get started!</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Home 
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@ -0,0 +1,31 @@
+export interface ChecklistItem {
+  id: number
+  content: string
+  checked: boolean
+  parent_id: number | null
+  locked_by?: string
+  lock_until?: string
+  checklist_uuid: string
+  children?: ChecklistItem[]
+}
+
+export interface SavedChecklist {
+  uuid: string
+  name: string
+  createdAt: string
+}
+
+export interface SSEEvent {
+  type: 'full_state' | 'item_added' | 'item_updated' | 'item_deleted' | 'item_locked' | 'item_unlocked'
+  items?: ChecklistItem[]
+  item?: ChecklistItem
+  id?: number
+  locked_by?: string
+  expires?: string
+}
+
+export interface ApiResponse<T = any> {
+  success: boolean
+  message: string
+  [key: string]: T | boolean | string
+} 
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+})
--- a/go.mod
+++ b/go.mod
@ -0,0 +1,8 @@
+module gocheck
+
+go 1.24.0
+
+require (
+	github.com/google/uuid v1.6.0
+	github.com/mattn/go-sqlite3 v1.14.28
+)
--- a/go.sum
+++ b/go.sum
@ -0,0 +1,4 @@
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/mattn/go-sqlite3 v1.14.28 h1:ThEiQrnbtumT+QMknw63Befp/ce/nUPgBPMlRFEum7A=
+github.com/mattn/go-sqlite3 v1.14.28/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
--- a/main.go
+++ b/main.go
@ -0,0 +1,525 @@
+package main
+
+import (
+	"database/sql"
+	"embed"
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/google/uuid"
+	_ "github.com/mattn/go-sqlite3"
+)
+
+//go:embed frontend/dist
+var staticFiles embed.FS
+
+// ==== Models ====
+
+type Checklist struct {
+	UUID string `json:"uuid"`
+	Name string `json:"name"`
+}
+
+type ChecklistItem struct {
+	ID        int        `json:"id"`
+	Content   string     `json:"content"`
+	Checked   bool       `json:"checked"`
+	ParentID  *int       `json:"parent_id"`
+	LockedBy  *string    `json:"locked_by,omitempty"`
+	LockUntil *time.Time `json:"lock_until,omitempty"`
+	Checklist string     `json:"checklist_uuid"`
+}
+
+type ItemLock struct {
+	LockedBy      string
+	Expires       time.Time
+	ChecklistUUID string
+}
+
+// ==== Globals ====
+var (
+	db              *sql.DB
+	sseClients      = make(map[string]map[chan string]bool) // checklist uuid → set of client channels
+	sseClientsMutex sync.Mutex
+	itemLocks       = make(map[int]*ItemLock) // item ID → lock
+	itemLocksMutex  sync.Mutex
+)
+
+// ==== Database ====
+
+func setupDatabase() error {
+	var err error
+	db, err = sql.Open("sqlite3", "data/checklists.db")
+	if err != nil {
+		return err
+	}
+	queries := []string{
+		`CREATE TABLE IF NOT EXISTS checklists (
+			uuid TEXT PRIMARY KEY,
+			name TEXT NOT NULL
+		);`,
+		`CREATE TABLE IF NOT EXISTS items (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			content TEXT NOT NULL,
+			checked INTEGER NOT NULL,
+			parent_id INTEGER,
+			checklist_uuid TEXT NOT NULL,
+			FOREIGN KEY(parent_id) REFERENCES items(id),
+			FOREIGN KEY(checklist_uuid) REFERENCES checklists(uuid)
+		);`,
+	}
+	for _, q := range queries {
+		if _, err := db.Exec(q); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+func loadChecklistItems(uuid string) ([]ChecklistItem, error) {
+	rows, err := db.Query(
+		`SELECT id, content, checked, parent_id FROM items WHERE checklist_uuid = ?`,
+		uuid)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []ChecklistItem
+	for rows.Next() {
+		var it ChecklistItem
+		var checked int
+		var parentID sql.NullInt64
+		err = rows.Scan(&it.ID, &it.Content, &checked, &parentID)
+		if err != nil {
+			return nil, err
+		}
+		it.Checked = checked != 0
+		if parentID.Valid {
+			v := int(parentID.Int64)
+			it.ParentID = &v
+		}
+		it.Checklist = uuid
+
+		// Attach lock info if present
+		itemLocksMutex.Lock()
+		if lock, ok := itemLocks[it.ID]; ok && lock.Expires.After(time.Now()) {
+			it.LockedBy = &lock.LockedBy
+			t := lock.Expires
+			it.LockUntil = &t
+		}
+		itemLocksMutex.Unlock()
+
+		items = append(items, it)
+	}
+	return items, nil
+}
+
+func addChecklist(name string) (string, error) {
+	uuidStr := uuid.New().String()
+	_, err := db.Exec(`INSERT INTO checklists (uuid, name) VALUES (?, ?)`, uuidStr, name)
+	return uuidStr, err
+}
+
+func addItem(uuid, content string, parentID *int) (ChecklistItem, error) {
+	res, err := db.Exec(`INSERT INTO items (content, checked, parent_id, checklist_uuid) VALUES (?, 0, ?, ?)`,
+		content, parentID, uuid)
+	if err != nil {
+		return ChecklistItem{}, err
+	}
+	id, _ := res.LastInsertId()
+	return ChecklistItem{
+		ID:        int(id),
+		Content:   content,
+		Checked:   false,
+		ParentID:  parentID,
+		Checklist: uuid,
+	}, nil
+}
+
+func updateItem(uuid string, id int, content *string, checked *bool, parentID *int) (ChecklistItem, error) {
+	q := "UPDATE items SET "
+	args := []interface{}{}
+	set := []string{}
+	if content != nil {
+		set = append(set, "content = ?")
+		args = append(args, *content)
+	}
+	if checked != nil {
+		set = append(set, "checked = ?")
+		if *checked {
+			args = append(args, 1)
+		} else {
+			args = append(args, 0)
+		}
+	}
+	if parentID != nil {
+		set = append(set, "parent_id = ?")
+		args = append(args, *parentID)
+	}
+	q += strings.Join(set, ", ") + " WHERE id = ? AND checklist_uuid = ?"
+	args = append(args, id, uuid)
+	_, err := db.Exec(q, args...)
+	if err != nil {
+		return ChecklistItem{}, err
+	}
+	// Return updated item
+	rows, err := db.Query(
+		`SELECT id, content, checked, parent_id FROM items WHERE id = ? AND checklist_uuid = ?`, id, uuid)
+	if err != nil {
+		return ChecklistItem{}, err
+	}
+	defer rows.Close()
+	if rows.Next() {
+		var it ChecklistItem
+		var checkedInt int
+		var parentID sql.NullInt64
+		err = rows.Scan(&it.ID, &it.Content, &checkedInt, &parentID)
+		if err != nil {
+			return ChecklistItem{}, err
+		}
+		it.Checked = checkedInt != 0
+		if parentID.Valid {
+			v := int(parentID.Int64)
+			it.ParentID = &v
+		}
+		it.Checklist = uuid
+		return it, nil
+	}
+	return ChecklistItem{}, fmt.Errorf("not found")
+}
+
+func deleteItem(uuid string, id int) error {
+	_, err := db.Exec(`DELETE FROM items WHERE id = ? AND checklist_uuid = ?`, id, uuid)
+	return err
+}
+
+// ==== SSE Broadcast Logic ====
+
+func broadcast(uuid string, msg interface{}) {
+	js, _ := json.Marshal(msg)
+	sseClientsMutex.Lock()
+	for ch := range sseClients[uuid] {
+		select {
+		case ch <- string(js):
+		default:
+			// skip if channel is full (consider logging in prod!)
+		}
+	}
+	sseClientsMutex.Unlock()
+}
+
+// ==== HTTP Handlers ====
+
+func handleGetItems(w http.ResponseWriter, r *http.Request) {
+	uuid := strings.TrimPrefix(r.URL.Path, "/api/checklists/")
+	uuid = uuid[:36]
+	items, err := loadChecklistItems(uuid)
+	if err != nil {
+		http.Error(w, "Failed to load items", 500)
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success": true,
+		"message": "Items loaded successfully",
+		"items":   items,
+	})
+}
+
+func handleCreateChecklist(w http.ResponseWriter, r *http.Request) {
+	type Req struct {
+		Name string `json:"name"`
+	}
+	var req Req
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.Name) == "" {
+		http.Error(w, "Missing name", 400)
+		return
+	}
+	uuid, err := addChecklist(req.Name)
+	if err != nil {
+		http.Error(w, "Failed to create checklist", 500)
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	resp := map[string]interface{}{
+		"success": true,
+		"message": "Checklist created successfully",
+		"uuid":    uuid,
+	}
+	json.NewEncoder(w).Encode(resp)
+}
+
+func handleAddItem(w http.ResponseWriter, r *http.Request) {
+	uuid := strings.TrimPrefix(r.URL.Path, "/api/checklists/")
+	uuid = uuid[:36]
+	type Req struct {
+		Content  string `json:"content"`
+		ParentID *int   `json:"parent_id"`
+	}
+	var req Req
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.Content) == "" {
+		http.Error(w, "Missing content", 400)
+		return
+	}
+	item, err := addItem(uuid, req.Content, req.ParentID)
+	if err != nil {
+		http.Error(w, "Failed to add item", 500)
+		return
+	}
+	// broadcast
+	broadcast(uuid, map[string]interface{}{"type": "item_added", "item": item})
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(201)
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success": true,
+		"message": "Item added successfully",
+		"item":    item,
+	})
+}
+
+func handleUpdateItem(w http.ResponseWriter, r *http.Request) {
+	parts := strings.Split(r.URL.Path, "/")
+	uuid := parts[3]
+	id := 0
+	fmt.Sscanf(parts[5], "%d", &id)
+	type Req struct {
+		Content  *string `json:"content"`
+		Checked  *bool   `json:"checked"`
+		ParentID *int    `json:"parent_id"`
+	}
+	var req Req
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, "Bad body", 400)
+		return
+	}
+	item, err := updateItem(uuid, id, req.Content, req.Checked, req.ParentID)
+	if err != nil {
+		http.Error(w, "Not found", 404)
+		return
+	}
+	broadcast(uuid, map[string]interface{}{"type": "item_updated", "item": item})
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success": true,
+		"message": "Item updated successfully",
+		"item":    item,
+	})
+}
+
+func handleDeleteItem(w http.ResponseWriter, r *http.Request) {
+	parts := strings.Split(r.URL.Path, "/")
+	uuid := parts[3]
+	id := 0
+	fmt.Sscanf(parts[5], "%d", &id)
+	if err := deleteItem(uuid, id); err != nil {
+		http.Error(w, "Delete failed", 500)
+		return
+	}
+	broadcast(uuid, map[string]interface{}{"type": "item_deleted", "id": id})
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success": true,
+		"message": "Item deleted successfully",
+		"id":      id,
+	})
+}
+
+func handleLockItem(w http.ResponseWriter, r *http.Request) {
+	parts := strings.Split(r.URL.Path, "/")
+	uuid := parts[3]
+	id := 0
+	fmt.Sscanf(parts[5], "%d", &id)
+	type Req struct {
+		User string `json:"user"`
+	}
+	var req Req
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.User) == "" {
+		http.Error(w, "Missing user", 400)
+		return
+	}
+	expiry := time.Now().Add(15 * time.Second) // e.g. 30 sec lock
+
+	itemLocksMutex.Lock()
+	itemLocks[id] = &ItemLock{LockedBy: req.User, Expires: expiry, ChecklistUUID: uuid}
+	itemLocksMutex.Unlock()
+
+	// Broadcast lock
+	broadcast(uuid, map[string]interface{}{"type": "item_locked", "id": id, "locked_by": req.User, "expires": expiry})
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{
+		"success":   true,
+		"message":   "Item locked successfully",
+		"id":        id,
+		"locked_by": req.User,
+		"expires":   expiry,
+	})
+}
+
+func lockExpiryDaemon() {
+	for {
+		time.Sleep(1 * time.Second)
+		now := time.Now()
+
+		// Collect expired locks first
+		var expiredLocks []struct {
+			id   int
+			uuid string
+		}
+
+		itemLocksMutex.Lock()
+		for id, lock := range itemLocks {
+			if lock.Expires.Before(now) {
+				expiredLocks = append(expiredLocks, struct {
+					id   int
+					uuid string
+				}{id: id, uuid: lock.ChecklistUUID})
+				delete(itemLocks, id)
+			}
+		}
+		itemLocksMutex.Unlock()
+
+		// Broadcast unlock events after releasing the mutex
+		for _, expired := range expiredLocks {
+			broadcast(expired.uuid, map[string]interface{}{
+				"type": "item_unlocked",
+				"id":   expired.id,
+			})
+		}
+	}
+}
+
+func handleSSE(w http.ResponseWriter, r *http.Request) {
+	uuid := strings.TrimPrefix(r.URL.Path, "/api/checklists/")
+	uuid = uuid[:36]
+
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming unsupported", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+
+	ch := make(chan string, 20)
+	// Register client
+	sseClientsMutex.Lock()
+	if sseClients[uuid] == nil {
+		sseClients[uuid] = make(map[chan string]bool)
+	}
+	sseClients[uuid][ch] = true
+	sseClientsMutex.Unlock()
+	defer func() {
+		sseClientsMutex.Lock()
+		delete(sseClients[uuid], ch)
+		sseClientsMutex.Unlock()
+		close(ch)
+	}()
+
+	// Send full state on connect
+	items, err := loadChecklistItems(uuid)
+	if err == nil {
+		msg, _ := json.Marshal(map[string]interface{}{
+			"type":  "full_state",
+			"items": items,
+		})
+		fmt.Fprintf(w, "data: %s\n\n", msg)
+		flusher.Flush()
+	}
+
+	// Forward events
+	for {
+		select {
+		case ev := <-ch:
+			fmt.Fprintf(w, "data: %s\n\n", ev)
+			flusher.Flush()
+		case <-r.Context().Done():
+			return
+		}
+	}
+}
+
+// ==== Main + Routing ====
+
+func main() {
+	if err := setupDatabase(); err != nil {
+		log.Fatalf("DB setup: %v", err)
+	}
+	go lockExpiryDaemon()
+
+	// Serve static files from embedded filesystem
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// Check if this is a UUID path (starts with / followed by 36 characters)
+		isUUIDPath := len(r.URL.Path) == 37 && r.URL.Path[0] == '/' &&
+			!strings.Contains(r.URL.Path[1:], "/")
+
+		if r.URL.Path == "/" || isUUIDPath {
+			// Serve index.html at root or for routes with /{uuid}
+			content, err := staticFiles.ReadFile("frontend/dist/index.html")
+			if err != nil {
+				http.Error(w, "Not found", 404)
+				return
+			}
+			w.Header().Set("Content-Type", "text/html")
+			w.Write(content)
+		} else {
+			// Serve other static files from the static/ subdirectory
+			subFS, err := fs.Sub(staticFiles, "frontend/dist")
+			if err != nil {
+				http.Error(w, "Not found", 404)
+				return
+			}
+			http.StripPrefix("/", http.FileServer(http.FS(subFS))).ServeHTTP(w, r)
+		}
+	})
+
+	http.HandleFunc("/api/checklists", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method == "POST" {
+			handleCreateChecklist(w, r)
+		} else {
+			http.NotFound(w, r)
+		}
+	})
+
+	http.HandleFunc("/api/checklists/", func(w http.ResponseWriter, r *http.Request) {
+		path := r.URL.Path
+		switch {
+		case strings.HasSuffix(path, "/items") && r.Method == "GET":
+			handleGetItems(w, r)
+		case strings.HasSuffix(path, "/items") && r.Method == "POST":
+			handleAddItem(w, r)
+		case strings.Contains(path, "/items/") && strings.HasSuffix(path, "/lock") && r.Method == "POST":
+			handleLockItem(w, r)
+		case strings.Contains(path, "/items/") && r.Method == "PATCH":
+			handleUpdateItem(w, r)
+		case strings.Contains(path, "/items/") && r.Method == "DELETE":
+			handleDeleteItem(w, r)
+		case strings.HasSuffix(path, "/sse") && r.Method == "GET":
+			handleSSE(w, r)
+		default:
+			http.NotFound(w, r)
+		}
+	})
+
+	port := strings.TrimSpace(os.Getenv("PORT"))
+	if port == "" {
+		port = "8080"
+	}
+	parsedPort, err := strconv.Atoi(port)
+	if err != nil {
+		log.Fatalf("Invalid PORT environment variable: %v", err)
+	}
+
+	log.Printf("Listening on :%d", parsedPort)
+	log.Printf("Frontend available at: http://localhost:%d", parsedPort)
+	log.Fatal(http.ListenAndServe(":"+port, nil))
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>