lubiana/cheekylist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

init

Browse source
This commit is contained in:
lubiana 2025-07-22 00:00:34 +02:00
commit ba1f43fd8e
Signed by: lubiana
SSH key fingerprint: SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
35 changed files with 5926 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

52
.air.toml Normal file
View file

@ -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

34
.dockerignore Normal file
View file

@ -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/

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
data/
gocheck
tmp/

61
Containerfile Normal file
View file

@ -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"]

364
README.md Normal file
View file

@ -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`.

40
build-container.sh Executable file
View file

@ -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)"

0
data/.gitkeep Normal file
View file

42
demo.sh Executable file
View file

@ -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

25
docker-compose.yml Normal file
View file

@ -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

24
frontend/.gitignore vendored Normal file
View file

@ -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?

69
frontend/README.md Normal file
View file

@ -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...
},
},
])
```

23
frontend/eslint.config.js Normal file
View file

@ -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,
},
},
])

13
frontend/index.html Normal file
View file

@ -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>

3696
frontend/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

32
frontend/package.json Normal file
View file

@ -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"
}
}

3
frontend/public/favicon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 187 B

1
frontend/public/vite.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

18
frontend/src/App.tsx Normal file
View file

@ -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

1
frontend/src/assets/react.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

195
frontend/src/components/ChecklistItem.tsx Normal file
View file

@ -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>
)
}

69
frontend/src/hooks/useLocalStorage.ts Normal file
View file

@ -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
}
}

113
frontend/src/hooks/useSSE.ts Normal file
View file

@ -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 }
}

1
frontend/src/index.css Normal file
View file

@ -0,0 +1 @@
@import "tailwindcss";

10
frontend/src/main.tsx Normal file
View file

@ -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>,
)

261
frontend/src/pages/Checklist.tsx Normal file
View file

@ -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>
)
}

132
frontend/src/pages/Home.tsx Normal file
View file

@ -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

31
frontend/src/types.ts Normal file
View file

@ -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
}

1
frontend/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

27
frontend/tsconfig.app.json Normal file
View file

@ -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"]
}

7
frontend/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

25
frontend/tsconfig.node.json Normal file
View file

@ -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"]
}

16
frontend/vite.config.ts Normal file
View file

@ -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,
},
},
},
})

8
go.mod Normal file
View file

@ -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
)

4
go.sum Normal file
View file

@ -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=

525
main.go Normal file
View file

@ -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))
}