Personal To-Do List App

A lightweight, secure Next.js application for managing personal to-dos with drag-and-drop ordering, GitHub authentication, and comprehensive testing.

[](https://github.com/jonathanleahy/todo-simple/actions/workflows/ci.yml) [](./coverage) [](https://opensource.org/licenses/MIT)

✨ Features

• 🔐 Secure Authentication: GitHub OAuth via NextAuth (Auth.js v5)
• ✅ Todo Management: Create, edit, delete tasks with optional comments
• 🎯 Drag & Drop: Intuitive reordering with @dnd-kit
• 👤 User-Scoped Data: All todos are private and user-specific
• 🎨 Modern UI: Clean interface with Tailwind CSS + shadcn/ui
• 🧪 Comprehensive Testing: ≥90% coverage with Vitest + Playwright
• 📱 Responsive Design: Works on desktop and mobile
• ⚡ Serverless Database: Powered by Neon PostgreSQL
• 🚀 Production Ready: Deployed on Vercel with CI/CD

🚀 Quick Start

Prerequisites

• Node.js ≥18.x
• npm ≥9.x
• Neon.tech account
• GitHub OAuth App

Installation

# Clone the repository
git clone https://github.com/jonathanleahy/todo-simple.git
cd todo-simple

# Install dependencies
npm install --legacy-peer-deps

# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your credentials

# Push database schema
npm run db:push

# Start development server
npm run dev

Visit http://localhost:3000

📋 Environment Variables

Create a .env.local file:

# Database (Neon PostgreSQL)
DATABASE_URL=postgresql://user:password@hostname/database?sslmode=require

# NextAuth.js
AUTH_SECRET=your-secret-key  # Generate with: openssl rand -base64 32
AUTH_URL=http://localhost:3000

# GitHub OAuth
AUTH_GITHUB_ID=your-github-oauth-app-id
AUTH_GITHUB_SECRET=your-github-oauth-app-secret

🛠️ Tech Stack

📚 Documentation

• Developer Guide - Comprehensive setup and development guide
• Contributing - How to contribute to this project
• API Routes - API documentation

🧪 Testing

Unit Tests

# Run tests in watch mode
npm run test

# Generate coverage report
npm run coverage

# View coverage
open coverage/index.html

Coverage Requirements: ≥90% (statements, functions, lines), ≥80% (branches)

E2E Tests

# Install Playwright (first time)
npx playwright install --with-deps

# Run E2E tests
npm run test:e2e

# Run with UI
npm run test:e2e:ui

📡 API Routes

Authentication

• GET/POST /api/auth/[...nextauth] - Auth.js handlers

Todos

• GET /api/todos - Get all todos for authenticated user
• POST /api/todos - Create a new todo

  { "title": "Task name", "comment": "Optional comment" }
  

• PATCH /api/todos/[id] - Update a todo

  { "title": "Updated name", "comment": "Updated comment" }
  

• DELETE /api/todos/[id] - Delete a todo
• POST /api/todos/reorder - Batch update todo orders

  { "updates": [{ "id": 1, "order": 0 }, { "id": 2, "order": 1 }] }
  

All routes require authentication via NextAuth session.

🚀 Deployment

Deploy to Vercel

   git push origin main
   

Update GitHub OAuth

Add production callback URL to your GitHub OAuth App:

https://your-domain.vercel.app/api/auth/callback/github

📦 Available Scripts

🏗️ Project Structure

/
├── app/                # Next.js app directory
│   ├── api/           # API routes
│   ├── dashboard/     # Dashboard page
│   └── page.tsx       # Landing page
├── components/        # React components
│   ├── ui/           # shadcn/ui components
│   ├── AddTodoForm.tsx
│   ├── TodoItem.tsx
│   └── TodoList.tsx
├── db/               # Database schema
├── lib/              # Utilities and helpers
├── tests/            # Test files
│   ├── unit/        # Vitest tests
│   └── e2e/         # Playwright tests
└── docs/            # Documentation

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for details.

📄 License

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

👤 Author

Jonathan Leahy

• GitHub: @jonathanleahy

🙏 Acknowledgments

• Next.js - The React framework
• shadcn/ui - Beautiful UI components
• Drizzle ORM - TypeScript ORM
• Neon - Serverless PostgreSQL
• Auth.js - Authentication library
• Vercel - Deployment platform

📝 Changelog

See CHANGELOG.md for a list of changes.

🐛 Known Issues

None currently. Please report issues on GitHub Issues.

Built with ❤️ using Next.js and TypeScript