todo-app

Flask Python SQLite HTML/CSS JavaScript

example demo productivity standards

Database

Todo App

A simple todo list application demonstrating App Hub platform standards.

Features

• Add, edit, delete todos
• Mark todos as complete/incomplete
• Real-time statistics (total, completed, pending)
• Uses shared UI framework
• Uses common backend framework
• Managed by App Hub process manager

Tech Stack

This app demonstrates the App Hub standardized tech stack:

Backend

• AppHubApp base class from shared_backend/apphub_backend.py
• DatabaseManager for SQLite persistence
• Standardized API responses (success/error)
• Built-in error handling

Frontend

• Shared UI framework (css/apphub.css)
• apphub.js utilities for API calls
• No frontend frameworks (pure HTML/CSS/JS)
• Responsive dark theme

Process Management

• Auto-port allocation via App Hub
• Start/stop/restart from App Hub
• Health monitoring

Running

Manual

cd ~/projects/todo-app
python3 app.py

Via App Hub

1. Visit http://localhost:5002/processes 2. Click "Start" for todo-app 3. Port will be auto-allocated

API Endpoints

• GET / - Todo list UI
• GET /api/todos - List all todos
• POST /api/todos - Create todo (JSON: {"title": "..."})
• PUT /api/todos/ - Update todo (JSON: {"title": "...", "completed": true/false})
• DELETE /api/todos/ - Delete todo

Database Schema

CREATE TABLE todo_items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    completed INTEGER DEFAULT 0,
    created_at TEXT DEFAULT CURRENT_TIMESTAMP,
    updated_at TEXT DEFAULT CURRENT_TIMESTAMP
);

Code Examples

Creating the App

from apphub_backend import AppHubApp
app = AppHubApp('todo-app')

Database Queries

Query all todos
todos = app.db.execute('todo-app', 'SELECT * FROM todo_items', fetch='all')
Insert todo
app.db.execute('todo-app', 'INSERT INTO todo_items (title) VALUES (?)', (title,))

API Responses

Success
return app.api.success(data)
Error
return app.api.error('Not found', 404)

This is a Reference Implementation

This app serves as a template for new App Hub applications. When building new apps, follow this pattern:

1. Use AppHubApp base class 2. Use shared UI framework 3. Include proper manifest.yaml with startup_cmd 4. Use DatabaseManager for data persistence 5. Keep frontend simple (no frameworks)

See ~/projects/app-hub/ARCHITECT_GUIDANCE.md for complete standards documentation.