Secure Todo App

A privacy-first, encrypted todo application built with Next.js featuring unique endpoint access, password-based encryption, and offline capabilities. All data is encrypted client-side and stored locally in the browser with no server dependencies.

🏷️ Tags

nextjs · react · typescript · privacy · encryption · aes-256-gcm · pbkdf2 · client-side · offline-first · local-first · todo-app · task-manager · secure-app · indexeddb · tailwindcss · shadcn-ui · zustand · web-crypto-api · no-backend · zero-tracking

🧰 Technology Stack

Category	Technology
Programming Language	TypeScript (5.x)
Framework	Next.js 16.1.6 (App Router) · React 19.2.3
UI & Styling	Tailwind CSS 4 · shadcn/ui (Radix UI) · Lucide React icons
State Management	Zustand · React Hook Form · Zod
Security & Encryption	Web Crypto API (AES-256-GCM, PBKDF2)
Data Storage	IndexedDB (encrypted, local-only, no backend)
Build & Tooling	ESLint · Babel React Compiler · npm

🔐 Security Features

• Client-side encryption: AES-256-GCM encryption with PBKDF2 key derivation
• No server storage: Zero backend data persistence
• Unique endpoints: UUID-based routes for isolated user workspaces
• Offline-first: Full functionality without internet connection
• Privacy-focused: No analytics, tracking, or data collection

📸 Screenshots

A quick tour of the app, end-to-end:

Landing page – feature overview, privacy notice, and entry points to access an existing workspace or create a new one.

Onboarding (Step 1 of 2) – welcome screen before generating a workspace.

Onboarding (Step 2 of 2) – password setup with strength rules, eye-toggle to reveal input, and explicit warning that the password cannot be recovered.

Workspace – encrypted task manager with session timer, online/offline indicator, data management (export/import), security status, storage usage, and the categories dialog.

Add Task form (empty) – title, description, priority, category, due date, reminder, subtasks, simple vs checklist task type.

Add Task form (filled) – priority set, category assigned, due date + reminder, subtasks, and a checklist task type.

Workspace with tasks – grid view showing two encrypted tasks with their categories.

🚀 Quick Start

Prerequisites

• Node.js: 18.0.0 or higher
• npm: 9.0.0 or higher (or yarn/pnpm equivalent)

Installation

1. Clone the repository

   git clone https://github.com/arth2o/secure-todo-app.git
   cd secure-todo-app

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local with your preferred settings (optional - defaults work for development).

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000 to start using the app.

📋 Usage

First Time Setup

1. Visit the application URL
2. A unique endpoint will be generated automatically (e.g., /app/abc123-def456)
3. Set up a strong password (minimum 12 characters)
4. Important: Bookmark your unique URL and remember your password - there's no recovery mechanism
5. Follow the onboarding tutorial to create your first tasks

Managing Tasks

• Organize: Use categories with custom icons and color-coding to group related tasks
• Prioritize: Set priority levels (high/medium/low)
• Schedule: Add due dates and local reminders
• Reorganize: Drag & drop tasks between categories on the secure list page
• Views: Toggle between Grid, List, and a dedicated Calendar View for scheduled tasks
• Bulk Operations: Select multiple tasks to delete or toggle status simultaneously

Security Notes

• Your password encrypts all data - if forgotten, data cannot be recovered
• Each unique endpoint is completely isolated from others
• Password is required on every session for security
• All data stays in your browser - nothing is sent to servers

🛠️ Technology Stack

Core Framework

• Next.js: 16.1.6 (App Router)
• React: 19.2.3
• TypeScript: 5.x

UI & Styling

• Tailwind CSS: 4.x
• shadcn/ui: Latest (Radix UI components)
• Lucide React: 0.563.0 (Icons)

Security & Storage

• Web Crypto API: Native browser encryption
• IndexedDB: Encrypted local storage
• PBKDF2: 100,000 iterations for key derivation

State Management & Utilities

• Zustand: 5.0.11 (State management)
• React Hook Form: 7.71.1 (Form handling)
• Zod: 4.3.6 (Schema validation)

Development Tools

• ESLint: 9.x (Code linting)
• Babel React Compiler: 1.0.0 (React optimization)

🏗️ Project Structure

src/
├── app/                    # Next.js App Router pages
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── auth/              # Authentication components
│   ├── tasks/             # Task management components
│   └── onboarding/        # User onboarding flow
├── lib/
│   ├── crypto.ts          # Encryption utilities
│   ├── storage.ts         # IndexedDB wrapper
│   ├── logger.ts          # Logging system
│   ├── debug.ts           # Debug utilities
│   └── utils.ts           # General utilities
├── stores/                # Zustand state stores
├── types/                 # TypeScript type definitions
├── hooks/                 # Custom React hooks (Reminders, etc.)
└── docs/                  # Technical documentation

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

Environment Variables

Never commit a real .env or .env.local. Only .env.example is tracked; the rest are ignored by .gitignore. Copy it locally and adjust:

cp .env.example .env.local

Key environment variables (see .env.example for full list):

# Security Settings
NEXT_PUBLIC_ENCRYPTION_ITERATIONS=100000
NEXT_PUBLIC_PASSWORD_MIN_LENGTH=12
NEXT_PUBLIC_SESSION_TIMEOUT=3600000

# Development
NEXT_PUBLIC_DEBUG_MODE=true
LOG_LEVEL=debug

# Feature Flags
NEXT_PUBLIC_ENABLE_OFFLINE_MODE=true

Debugging

The app includes comprehensive logging and debugging utilities:

• Development mode: Detailed console logs and performance monitoring
• Memory usage: Track encryption/decryption performance
• Storage monitoring: IndexedDB usage and quota tracking
• Error tracking: Secure error logging without exposing sensitive data

🔒 Security Implementation

Encryption Details

• Algorithm: AES-256-GCM for authenticated encryption
• Key Derivation: PBKDF2 with SHA-256, 100,000 iterations
• Salt: 16-byte random salt per password derivation
• IV: 12-byte random initialization vector per encryption
• Data Integrity: Built-in authentication tag verification

Privacy Measures

• No external requests: All functionality works offline
• Memory security: Sensitive data cleared from memory after use
• Data isolation: Each endpoint completely separated
• No analytics: Zero tracking or telemetry

📱 Browser Compatibility

• Chrome: 88+ (recommended)
• Firefox: 84+
• Safari: 14+
• Edge: 88+

Requires modern browsers with Web Crypto API and IndexedDB support.

🚀 Deployment

Production Build

npm run build
npm run start

Static Export (Optional)

For static hosting, you can export the app:

# Add to next.config.ts:
# output: 'export'

npm run build

Environment Setup

1. Copy .env.example to .env.production
2. Set production-appropriate values
3. Ensure NODE_ENV=production

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Update documentation
6. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚠️ Important Notes

• No password recovery: If you forget your password, your data cannot be recovered
• Backup regularly: Use the export feature to backup your encrypted data
• Browser storage: Data is stored locally - clearing browser data will delete your tasks
• Unique URLs: Each user gets a unique endpoint - share carefully if needed

🆘 Troubleshooting

Common Issues

1. Can't access my tasks

   • Ensure you're using the correct unique URL
   • Verify your password is correct
   • Check if browser data was cleared

2. Performance issues

   • Large datasets may slow encryption/decryption
   • Consider archiving old completed tasks
   • Check browser memory usage

3. Browser compatibility

   • Ensure your browser supports Web Crypto API
   • Update to a modern browser version
   • Check if IndexedDB is enabled

For more help, check the debug logs in development mode or export your logs for analysis.