FunOps — Task Management Redefined

A professional, elegant web-based task management tool for daily operations. Built with Next.js 16, Supabase, and deployed free on Vercel + Supabase.

Features

Feature	Description
Kanban Board	Drag & drop tasks across Todo → In Progress → Done
All Tasks View	Filterable, sortable list with bulk actions
Calendar View	Monthly calendar with per-day task planning
Analytics	Completion rates, priority charts, category breakdown
Pomodoro Timer	Built-in focus sessions with per-task tracking
Quick Add	Press ⌘K to instantly add tasks anywhere
Command Palette	Navigate and search tasks without leaving keyboard
Auth	Email/password + GitHub OAuth via Supabase
Responsive	Works on desktop, tablet, and mobile
Realtime	Live updates across tabs via Supabase Realtime

Tech Stack

Frontend (Free on Vercel)

• Next.js 14 — App Router + Server Components
• TypeScript — Full type safety
• Tailwind CSS — Utility-first styling
• Framer Motion — Smooth animations
• @hello-pangea/dnd — Drag & drop
• Recharts — Analytics charts

Backend (Free on Supabase)

• Supabase — PostgreSQL + Auth + Realtime + RLS
• Row Level Security — users only see their own data

Deploy in 5 minutes

Step 1 — Clone & install

git clone https://github.com/YOUR_USERNAME/funops.git
cd funops
pnpm install

Step 2 — Create Supabase project (free)

1. Go to supabase.com → New Project
2. Choose a name, set a database password, select a region
3. Go to SQL Editor → paste contents of supabase/schema.sql → Run
4. Go to Settings → API → copy your Project URL and anon key

Step 3 — Set environment variables

cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Step 4 — Run locally

npm run dev

Open http://localhost:3000 🎉

Step 5 — Deploy to Vercel (free)

npm install -g vercel
vercel

Or via vercel.com:

1. Import your GitHub repo
2. Add environment variables from step 3
3. Deploy — done!

Vercel will auto-deploy on every git push main.

Step 6 — Enable GitHub OAuth (optional)

1. Supabase Dashboard → Authentication → Providers → GitHub
2. Create a GitHub OAuth App at github.com/settings/developers
   • Homepage URL: https://your-app.vercel.app
   • Callback URL: https://your-project.supabase.co/auth/v1/callback
3. Paste Client ID and Secret into Supabase

Project Structure

funops/
├── app/
│   ├── (auth)/           # Login & signup pages
│   ├── api/tasks/        # REST API route handlers
│   ├── auth/callback/    # OAuth callback
│   ├── dashboard/        # Protected app pages
│   │   ├── page.tsx      # Main dashboard
│   │   ├── kanban/       # Kanban board
│   │   ├── tasks/        # All tasks list
│   │   ├── calendar/     # Calendar view
│   │   ├── analytics/    # Charts & stats
│   │   ├── timer/        # Pomodoro timer
│   │   └── settings/     # User settings
│   └── page.tsx          # Landing page
├── components/
│   ├── analytics/        # Charts, stat cards
│   ├── kanban/           # Board, task cards
│   ├── layout/           # Sidebar, header
│   ├── tasks/            # Modal, pomodoro
│   └── ui/               # Command palette
├── hooks/
│   ├── useTasks.ts       # Task CRUD + realtime
│   └── useSidebar.ts     # Mobile sidebar
├── lib/
│   ├── supabase/         # Client & server helpers
│   ├── types.ts          # TypeScript types
│   └── utils.ts          # Helper functions
├── supabase/
│   └── schema.sql        # Database schema + RLS
├── middleware.ts          # Auth route protection
├── vercel.json           # Vercel config
└── .github/
    └── workflows/ci.yml  # GitHub Actions CI

Database Schema

tasks         — id, user_id, title, description, status, priority,
                category, tags, due_date, estimated_minutes,
                actual_minutes, completed_at, order_index

pomodoro_sessions — id, user_id, task_id, duration_minutes, completed_at

user_preferences  — id, user_id, theme, pomodoro_duration,
                    short_break, long_break, default_view

All tables have Row Level Security — users can only read/write their own rows.

Development

npm run dev      # Start dev server (http://localhost:3000)
npm run build    # Production build
npm run lint     # ESLint check

📄 License

MIT License — free to use, modify, and distribute.