Clear

A mental clarity todo app with a premium, Disney+-inspired UI

---

Screenshots

    

---

Why Clear?

Most todo apps feel like spreadsheets. Clear is designed to reduce cognitive load, not add to it. It combines a glassmorphism UI, smooth drag-and-drop, and smart category management into a focused experience that feels native on mobile.

Built as a Progressive Web App - install it on your phone and it works like a native app, complete with splash screens and offline support.

---

Features

• Task Management - Create, edit, complete, and delete tasks with fluid animations
• Drag & Drop Reordering - Reorder tasks naturally with @dnd-kit (touch + pointer support)
• Smart Categories - Color-coded categories with custom icons (Phosphor Icons)
• Category Pinning - Long-press (500ms) a category to pin it as your default filter
• Glassmorphism UI - Premium frosted-glass header and navigation bar
• Dark / Light Theme - Disney+-inspired dark mode with smooth transitions
• REST API - Secure Bearer token API for external integrations (ChatGPT, Siri, Claude...)
• Offline Support - IndexedDB fallback with automatic sync when back online
• Badges System - Gamification with achievement badges
• Installable PWA - Full splash screens, app icons, native-feel on iOS & Android
• Internationalization - Built-in i18n support via next-intl

---

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Server Actions, React 19)
Language	TypeScript (strict mode)
Database	Neon PostgreSQL (serverless)
ORM	Drizzle ORM (type-safe, zero-overhead)
Styling	Tailwind CSS v4 + CSS variables (shadcn approach)
Icons	Phosphor Icons
Drag & Drop	@dnd-kit
Validation	Zod v4
i18n	next-intl
PWA	@ducanh2912/next-pwa
Package Manager	pnpm

---

Architecture

src/
├── app/                      # Next.js App Router
│   ├── page.tsx              # Home - task list with category filter
│   ├── add/                  # Add task page
│   ├── categories/           # Category management (CRUD)
│   ├── dashboard/            # Stats & badges overview
│   ├── settings/             # App settings
│   └── api/tasks/            # REST API endpoint
├── actions/                  # Server Actions (tasks, categories, stats)
├── components/
│   ├── ui/                   # Design system (GlassBar, Button, Card, Switch...)
│   ├── layout/               # Header, BottomNav, PageLayout
│   ├── tasks/                # TaskList, TaskItem, CategoryFilter, EditModal
│   └── categories/           # CategoryCard, AddCategoryForm
├── db/
│   ├── schema.ts             # Drizzle schema (5 tables, full relations)
│   └── index.ts              # Database client
├── hooks/                    # Custom hooks (offline sync)
├── lib/                      # Utilities, offline DB, routes
└── i18n/                     # Internationalization config

Database Schema

categories ──< tasks ──< task_badges >── badges
                              api_keys (standalone)

• Categories: name, color, icon, order, pinning
• Tasks: title, description, completion, pinning, position, category relation
• Badges: gamification achievements with conditions
• API Keys: SHA-256 hashed, revocable, with usage tracking

---

Getting Started

Prerequisites

• Node.js 18+
• pnpm (corepack enable or npm i -g pnpm)
• A Neon PostgreSQL database (free tier works)

Installation

# Clone the repository
git clone https://github.com/<your-username>/clear.git
cd clear

# Install dependencies
pnpm install

# Configure environment
cp .env.example .env.local
# Edit .env.local with your Neon DATABASE_URL

# Setup database
pnpm db:generate
pnpm db:migrate
pnpm db:seed

# Start development server
pnpm dev

Open http://localhost:3000 to see the app.

---

API

Clear exposes a secured REST API for external integrations.

Generate an API Key

pnpm db:generate-key "My Integration"
# Output: clr_xxxxx (save it - shown only once)

Create a Task

curl -X POST https://<your-domain>/api/tasks \
  -H "Authorization: Bearer clr_xxxxx" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "category": "Inbox", "pinned": false}'

API keys are hashed with SHA-256 in the database - secure even if the DB is compromised.

See docs/chatgpt/ for ChatGPT Custom GPT integration guide.

---

Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Production build
pnpm type-check	TypeScript strict check
pnpm lint:fix	ESLint auto-fix
pnpm db:generate	Generate Drizzle migrations
pnpm db:migrate	Apply migrations
pnpm db:seed	Seed default categories
pnpm db:studio	Open Drizzle Studio (DB GUI)
pnpm db:generate-key	Create a new API key

---

Deploy

1. Push to GitHub
2. Import to Vercel
3. Add DATABASE_URL environment variable
4. Deploy - that's it

---

Roadmap

• Authentication (Supabase Auth, user-specific data)
• Shopping list mode with AI-powered smart paste
• Focus mode (single task view)
• Task snoozing ("Not today")
• Completion animations
• Weekly cleanup suggestions

---

License

MIT