A full-featured project management app (Asana clone) built with Next.js 14, Supabase, Tailwind CSS, and shadcn/ui.

• Workspaces & Teams -- Create organizations, invite members, manage roles
• Projects -- Color-coded projects with multiple views and sections
• Task Management -- Create, assign, prioritize, and track tasks with subtasks
• Multiple Views -- List, Board (Kanban), Calendar, Timeline/Gantt, and Overview
• My Tasks -- Personal task dashboard with sorting and filtering
• Collaboration -- Comments on tasks, activity logging, file attachments
• Real-time Notifications -- Live inbox with assignment, comment, and mention alerts
• Search -- Global search across projects and tasks (Cmd+K)
• Dark Mode -- Full light/dark theme support
• Row Level Security -- All data access enforced at the database level

• Framework: Next.js 14 (App Router, Server Components, Server Actions)
• Database & Auth: Supabase (PostgreSQL, Auth, Storage, Realtime)
• Styling: Tailwind CSS 3 + shadcn/ui components
• State Management: Zustand
• Language: TypeScript

• Node.js v18+ (v20 recommended)
• A Supabase account (free tier works)

cd teamwork
npm install

1. Go to supabase.com/dashboard and create a new project
2. Note your Project URL and anon public key from Settings > API

Edit .env.local in the project root:

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

Open the SQL Editor in your Supabase dashboard and run each migration file in order:

1. supabase/migrations/001_foundation.sql -- Profiles, auth triggers
2. supabase/migrations/002_workspaces_teams.sql -- Workspaces, teams, invitations, RLS helpers
3. supabase/migrations/003_projects.sql -- Projects, sections, favorites, labels
4. supabase/migrations/004_tasks.sql -- Tasks, subtasks, followers, full-text search
5. supabase/migrations/005_my_tasks.sql -- Personal task sections
6. supabase/migrations/006_collaboration.sql -- Comments, activity log, attachments
7. supabase/migrations/007_notifications.sql -- Notifications, realtime

Tip: Copy-paste each file's contents into the SQL Editor and click Run. They must be run sequentially since later migrations reference earlier tables.

In your Supabase dashboard, go to Storage and create two buckets:

In your Supabase dashboard, go to Database > Replication and enable realtime for the notifications table (this may already be done by migration 007).

npm run dev

Open http://localhost:3000 in your browser.

npm run build
npm start

npm run lint

Once the dev server is running, follow these steps to verify each feature:

1. Go to localhost:3000/signup and create an account
2. Check your email for the confirmation link (or disable email confirmation in Supabase Auth settings for faster testing)
3. Log in at localhost:3000/login
4. Verify you're redirected to /home

1. On first login you'll need to create a workspace (Settings > Workspace)
2. Invite a second user via email from Settings > Members
3. Verify the invited user can accept and see the workspace

1. Click + New Project in the sidebar or go to /projects/new
2. Choose a name, color, and default view
3. Verify the project appears in the sidebar

1. Open a project and click + Add task at the bottom of any section
2. Create a few tasks, try inline editing the title
3. Click a task to open the detail panel -- set assignee, due date, priority, description
4. Create subtasks within the detail panel
5. Mark tasks as complete using the checkbox

1. In a project, click the Board tab
2. Verify tasks appear as cards in columns (one per section)
3. Drag cards between columns

1. Click the Calendar tab
2. Verify tasks with due dates appear on the correct days
3. Navigate between months

1. Click the Timeline tab
2. Verify tasks with start/due dates render as horizontal bars

1. Go to My Tasks in the sidebar
2. Verify all tasks assigned to you appear
3. Try sorting by due date, priority, or project

1. Open a task's detail panel
2. Add a comment in the comment section
3. Verify the comment appears immediately

1. Assign a task to another user
2. The other user should see a notification badge on the bell icon
3. Click the bell or go to Inbox to view notifications
4. Click Mark all as read

1. Press Cmd+K (or click the search icon in the top bar)
2. Type a project or task name
3. Verify results appear and clicking them navigates correctly

1. Click the theme toggle (sun/moon icon) in the top bar
2. Verify the entire UI switches themes

teamwork/
├── app/
│   ├── (auth)/            # Login, signup, forgot password (no sidebar)
│   ├── (dashboard)/       # Authenticated pages (with sidebar)
│   │   ├── home/
│   │   ├── my-tasks/
│   │   ├── inbox/
│   │   ├── search/
│   │   ├── projects/
│   │   ├── teams/
│   │   └── settings/
│   ├── layout.tsx         # Root layout with ThemeProvider
│   └── globals.css        # CSS variables and theme tokens
├── components/
│   ├── ui/                # 22 shadcn/ui primitives
│   ├── layout/            # Sidebar, TopBar, WorkspaceSwitcher
│   ├── auth/              # LoginForm, SignupForm
│   ├── tasks/             # TaskRow, TaskDetailPanel, TaskListView
│   ├── projects/          # ProjectHeader, SectionHeader, ProjectOverview
│   ├── board/             # BoardView, BoardColumn, BoardCard
│   ├── calendar/          # CalendarView
│   ├── timeline/          # TimelineView
│   ├── collaboration/     # CommentSection
│   ├── inbox/             # InboxView
│   └── common/            # AssigneePicker, DatePicker, PriorityPicker
├── lib/
│   ├── supabase/          # Browser, server, and middleware clients
│   ├── actions/           # 9 server action files
│   ├── hooks/             # Realtime subscriptions
│   ├── stores/            # Zustand stores (sidebar, task detail, workspace)
│   ├── types/             # Database types
│   └── utils.ts           # cn() helper
├── supabase/migrations/   # 7 SQL migration files
├── middleware.ts           # Auth session refresh + route protection
└── .env.local             # Supabase credentials

This project is licensed under the MIT License.