stevekrouse

stevekrouse

complex-test-app

Public

Val Town is a collaborative website to build and scale JavaScript apps.

Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

/

Viewing readonly version of main branch: v1

View latest version

🚀 Advanced Todo List App

A feature-rich todo list application built with React, Hono, and SQLite on Val Town.

✨ Features

Core Functionality

✅ Create, edit, delete todos
🔄 Mark as complete/incomplete
📝 Rich text descriptions
🏷️ Categories and custom tags
🎯 Priority levels (High, Medium, Low)
📅 Due dates with calendar picker

Advanced Features

🔍 Advanced search and filtering
📊 Statistics dashboard with charts
🌙 Dark/light theme toggle
📱 Fully responsive design
🔄 Real-time updates
📈 Progress tracking and analytics
📎 File attachment simulation
🔔 Smart notifications
📋 Bulk operations (select multiple)
🗂️ Drag and drop reordering
💾 Auto-save functionality
📤 Export to JSON/CSV
🎯 Goal setting and tracking
📆 Calendar view
⏰ Time tracking
🏆 Achievement system

🏗️ Architecture

Backend (`/backend/`)

Hono REST API with full CRUD operations
SQLite database with optimized queries
Real-time statistics and analytics
File upload handling
Export functionality

Frontend (`/frontend/`)

React 18 with TypeScript
TailwindCSS for styling
Drag and drop with react-beautiful-dnd
Rich text editor
Calendar components
Chart visualizations
Progressive Web App features

Shared (`/shared/`)

TypeScript interfaces and types
Utility functions
Constants and enums

🚀 Getting Started

The app runs on Val Town with HTTP trigger
Visit the deployed URL to start using the app
All data is persisted in SQLite database
No external API keys required

📱 Usage

Add Todo: Click the "+" button or use Ctrl+N
Edit: Click on any todo item to edit inline
Categories: Use the category dropdown or create new ones
Search: Use the search bar with advanced filters
Bulk Actions: Select multiple todos with checkboxes
Export: Use the export button to download your data
Theme: Toggle dark/light mode in the top right
Stats: View your productivity metrics in the dashboard

🛠️ Technical Details

Database: SQLite with optimized indexes
State Management: React hooks with context
Styling: TailwindCSS with custom components
Icons: Unicode emojis and symbols
Responsive: Mobile-first design
Performance: Lazy loading and virtualization
Accessibility: Full keyboard navigation and screen reader support

📊 Database Schema

todos: Main todo items with all metadata
categories: Custom categories
tags: Flexible tagging system
attachments: File attachment metadata
goals: Goal tracking and progress
time_logs: Time tracking entries

Built with ❤️ on Val Town