Task Manager Application

A modern task management application built with TypeScript, Next.js, shadcn/ui, and Drizzle ORM with Supabase PostgreSQL.

Features

• ✅ Create tasks with title, description, priority, and due date
• ✅ Organize tasks into categories
• ✅ Mark tasks as complete
• ✅ Filter tasks by category and status
• ✅ View overdue tasks
• ✅ Search functionality
• ✅ Beautiful UI with shadcn components
• ✅ Type-safe database operations with Drizzle ORM
• ✅ PostgreSQL with Supabase

Tech Stack

• Frontend: Next.js 16, React 19, TypeScript
• UI Components: shadcn/ui, Tailwind CSS, Radix UI
• Database: PostgreSQL (Supabase)
• ORM: Drizzle ORM
• Icons: Lucide React

Project Structure

src/
├── app/                      # Next.js app directory
│   ├── api/                  # API routes
│   │   ├── tasks/            # Task endpoints
│   │   │   ├── route.ts      # GET, POST tasks
│   │   │   └── [id]/route.ts # GET, PUT, DELETE specific task
│   │   └── categories/       # Category endpoints
│   │       ├── route.ts      # GET, POST categories
│   │       └── [id]/route.ts # GET, PUT, DELETE specific category
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   ├── page.tsx              # Main page
│
├── components/
│   └── ui/                   # shadcn UI components
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── badge.tsx
│       └── checkbox.tsx
│
├── db/                       # Database configuration
│   ├── schema.ts             # Drizzle schema definition
│   ├── db.ts                 # Database client
│   └── migrations/           # Migration files
│       ├── 0001_initial_schema.sql
│       └── meta/
│
└── lib/
    └── utils.ts              # Utility functions

Database Schema

Users Table

• id (UUID, Primary Key)
• email (VARCHAR, Unique)
• name (VARCHAR)
• created_at (Timestamp)
• updated_at (Timestamp)

Categories Table

• id (UUID, Primary Key)
• user_id (UUID, Foreign Key → users.id)
• name (VARCHAR)
• description (TEXT)
• color (VARCHAR)
• created_at (Timestamp)
• updated_at (Timestamp)

Tasks Table

• id (UUID, Primary Key)
• user_id (UUID, Foreign Key → users.id)
• category_id (UUID, Foreign Key → categories.id)
• title (VARCHAR)
• description (TEXT)
• priority (VARCHAR) - low, medium, high, urgent
• status (VARCHAR) - pending, in_progress, completed
• due_date (Timestamp)
• completed_at (Timestamp)
• created_at (Timestamp)
• updated_at (Timestamp)

Setup Instructions

Prerequisites

• Node.js 18+ and npm
• Supabase account with PostgreSQL database
• Environment variables configured

1. Clone and Install

git clone <repository>
cd db-case
npm install

2. Configure Environment Variables

Create a .env.local file with your Supabase credentials:

DATABASE_URL=postgresql://[user]:[password]@[host]:[port]/[database]
NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

3. Run Database Migrations

npm run db:generate
npm run db:migrate

4. Start Development Server

npm run dev

Open http://localhost:3000 to view the application.

API Endpoints

Tasks

• GET /api/tasks - Get all tasks with filtering options
• POST /api/tasks - Create a new task
• GET /api/tasks/[id] - Get a specific task
• PUT /api/tasks/[id] - Update a task
• DELETE /api/tasks/[id] - Delete a task

Query Parameters for GET /api/tasks:

• userId (required) - User ID
• categoryId (optional) - Filter by category
• status (optional) - Filter by status (pending, in_progress, completed)
• priority (optional) - Filter by priority (low, medium, high, urgent)
• search (optional) - Search by title
• showOverdue (optional) - Show only overdue tasks

Categories

• GET /api/categories - Get all categories for a user
• POST /api/categories - Create a new category
• GET /api/categories/[id] - Get a specific category
• PUT /api/categories/[id] - Update a category
• DELETE /api/categories/[id] - Delete a category

Features Implemented

User Stories

1. ✅ Create tasks with title, description, priority, and due date
2. ✅ Organize tasks into categories
3. ✅ Mark tasks as complete
4. ✅ Filter tasks by category and status
5. ✅ See overdue tasks

Technical Requirements

1. ✅ Drizzle ORM with 3+ tables (users, categories, tasks)
2. ✅ Schema with users, categories, and tasks tables
3. ✅ Foreign key relationships between tables
4. ✅ Migrations folder with proper structure
5. ✅ Database client properly initialized
6. ✅ Supabase PostgreSQL integration

Code Quality

• ✅ Clean and well-organized code structure
• ✅ Proper TypeScript types throughout
• ✅ No unused imports or variables
• ✅ Consistent naming conventions
• ✅ Proper error handling in routes
• ✅ Request validation in place

Building for Production

npm run build
npm start

Database Management

View Database in Studio

npm run db:studio

Generate New Migrations

npm run db:generate

Apply Migrations

npm run db:migrate

Future Enhancements

• Authentication and user management
• Real-time updates with WebSockets
• Task reminders and notifications
• Recurring tasks
• Task attachments
• Collaborative task sharing
• Mobile app with React Native
• Dark mode theme
• Export tasks to CSV/PDF

License

MIT

yobr-case-database