A full-stack project management SaaS — Kanban boards, AI-powered task generation, real-time team chat, and a complete file management system.
TaskFlow is a complete task and project management platform built to mirror what a real SaaS product looks like end-to-end: a NestJS + PostgreSQL backend, a React + TypeScript frontend, JWT authentication with session tracking, AI-assisted planning, live team chat, Stripe subscription billing, and a Google-Drive-style file manager — all wired together with a real database, not mock data.
Why it's worth a look:
- 🧩 Full CRUD across every module — projects, tasks, files, chat, sessions — backed by a real PostgreSQL schema, not static JSON
- 🤖 AI task generation & progress summaries via the Google Gemini API
- ⚡ Real-time chat (group + DMs) with images, video, files, and voice messages
- 🖱️ Drag-and-drop Kanban board built with
dnd-kit - 🔐 JWT auth with device/browser/IP session tracking and role-based guards
- 💳 Stripe subscription checkout with plan tiers and webhooks
- 🗂️ File manager with folders, sharing, starring, and a soft-delete trash system
- 📊 A dashboard with live charts, deadlines, priority breakdowns, and an activity feed
| Landing Page | Login |
 |
 |
| Dashboard | Projects List |
 |
 |
| Kanban Board | Timeline View |
 |
 |
| AI Task Generator | Files |
 |
 |
| Team Chat | Settings |
 |
 |
- Features
- Tech Stack
- Architecture
- Project Structure
- Database Schema
- Getting Started
- Environment Variables
- Available Scripts
- Roadmap
- Register / login with JWT-based authentication
- Session tracking on every login — device, browser, OS, and IP parsed via
ua-parser-js - View and revoke active sessions from Settings, with the current device flagged
- Role-based route guards (
adminvsmember) protecting sensitive endpoints - Two-factor authentication toggle and account deletion with confirmation modal
- Live metric cards — total projects, tasks, completion %, overdue count
- Task completion chart (Daily / Weekly / Monthly) rendered with Recharts
- Task status donut chart (To Do / In Progress / Done)
- Upcoming deadlines widget with overdue highlighting
- Open tasks by priority breakdown
- Recent team activity feed
- Dedicated
/analyticspage and a personal/tasks/myview
- Kanban board with drag-and-drop (
@dnd-kit), search, and priority filters - List, Calendar, Timeline (Gantt-style), and Overview views for every project
- Task drawer with comments, file attachments, and shareable links
- Assign tasks to teammates directly from the board
- Project overview tab with progress, status breakdown, members, and recent completions
- AI Task Generator — describe a project, get 5–7 concrete suggested tasks (Google Gemini), review and add them in one click
- AI Progress Summary — generates a short natural-language status update for any project based on its current tasks
- Stripe subscription checkout with Individuals and Elite Team tiers
- Monthly / yearly billing toggle with automatic price switching
- Secure hosted Stripe Checkout redirect and webhook-driven subscription updates
- General team chat plus one-on-one private messages
- Send text, images, video, files, and voice messages (recorded in-browser via the MediaRecorder API)
- Clear chat history per conversation
- Online/offline presence and role badges per member
- Folders with custom colors, nested file organization, and per-folder views
- Upload with folder selection, storage usage broken down by file type
- Starred files, a soft-delete trash (restore or permanently delete), and a full activity log
- File sharing — grant or revoke teammate access per file
- Dedicated file statistics page (totals, largest files, uploads by month)
- Profile editing synced instantly across the whole app (sidebar, topbar, avatar)
- Preferences — theme, language, notifications, default task view — persisted as JSON
- Team & permissions management with role changes and invitations
| Category | Technology |
|---|---|
| Framework | React 19, TypeScript |
| Build tool | Vite |
| Styling | Tailwind CSS 4 |
| Routing | React Router |
| Data fetching / caching | TanStack Query |
| Global state | Zustand |
| Forms & validation | React Hook Form, Zod |
| Animation | Motion (Framer Motion) |
| Drag & drop | dnd-kit |
| Charts | Recharts |
| Real-time | Socket.io Client |
| HTTP client | Axios |
| Internationalization | i18next, react-i18next |
| Notifications | React Hot Toast |
| Payments | Stripe |
| Icons | Lucide React |
| Category | Technology |
|---|---|
| Framework | NestJS |
| ORM | Prisma |
| Database | PostgreSQL (Neon serverless) |
| Auth | JWT, Passport |
| Validation | class-validator |
| Real-time | Socket.io (WebSocket Gateway) |
| AI | Google Gemini API |
| Payments | Stripe |
| Session parsing | ua-parser-js |
┌─────────────────┐ REST + WebSocket ┌──────────────────┐
│ │ ───────────────────────────▶ │ │
│ React SPA │ │ NestJS │
│ (Vite + TS) │ ◀─────────────────────────── │ REST API + │
│ │ JSON / JWT │ Socket Gateway │
└─────────────────┘ └────────┬─────────┘
│ Prisma ORM
▼
┌──────────────────┐
│ PostgreSQL │
│ (Neon) │
└──────────────────┘
┌──────────────────┐ ┌──────────────────┐
│ Google Gemini AI │ │ Stripe │
│ tasks & summaries │ │ subscriptions │
└──────────────────┘ └──────────────────┘
The frontend and backend are separate applications communicating over a REST API, with a dedicated WebSocket gateway handling live chat. Every feature — auth, projects, files, chat, payments — is its own NestJS module with its own Prisma-backed service, keeping the backend modular and easy to extend.
taskflow-frontend/
├── src/
│ ├── components/
│ │ ├── dashboard/ # Metrics, charts, activity feed, project cards
│ │ ├── project/ # Kanban, List, Calendar, Timeline, Task Drawer, AI panel
│ │ ├── files/ # Folder cards, file rows, upload/share/preview modals
│ │ ├── settings/ # Profile, Preferences, Account, Team tabs
│ │ ├── landing/ # Landing sections, modals, header/footer
│ │ ├── motion/ # Animated decor, reveal wrappers
│ │ ├── layout/ # AppLayout, Sidebar, Topbar
│ │ └── ui/ # Modal, Avatar, Spinner, ConfirmModal, buttons
│ ├── pages/ # Route-level pages (Dashboard, Projects, Files, Team, Settings...)
│ ├── services/ # Axios API clients, grouped by domain
│ ├── stores/ # Zustand stores (auth, theme)
│ ├── hooks/ # Shared hooks (e.g. task filters, CTA)
│ ├── styles/ # Theme tokens & global styles
│ └── types.ts
└── public/ # README screenshots & static assets
taskflow-backend/
├── src/
│ ├── auth/ # Register, login, JWT strategy
│ ├── users/ # Profile, settings, roles, admin guard
│ ├── sessions/ # Device/session tracking
│ ├── projects/ # Projects + overview stats
│ ├── tasks/ # Tasks, assignment, reordering
│ ├── comments/ attachments/ # Task sub-resources
│ ├── files/ # Folders, files, sharing, trash, stats
│ ├── chat/ # WebSocket gateway + REST history
│ ├── invitations/ # Team invites
│ ├── payments/ # Stripe checkout & webhooks
│ ├── ai/ # Gemini task generation & summaries
│ ├── stats/ # Dashboard analytics endpoints
│ └── prisma/ # PrismaService
└── prisma/
├── schema.prisma
└── migrations/
| Model | Purpose |
|---|---|
User |
Accounts, role, JSON preferences |
Session |
Login sessions — device, browser, OS, IP, hashed token |
Project / ProjectMember |
Projects and their team membership |
Task |
Kanban tasks — status, priority, due date, assignee |
Comment / Attachment |
Task-level discussion and files |
Message |
Chat messages — group or private, supports file/media payloads |
Folder / File / FileShare |
File manager, ownership, and sharing |
FileActivity |
Audit log of file actions (upload, delete, restore, rename) |
Invitation |
Pending team invitations |
Subscription |
Billing plan status |
- Node.js 18+
- A PostgreSQL database (this project uses Neon)
- A Google Gemini API key
- A Stripe account with test API keys
git clone https://github.com/Metenchuk/TaskFlow.git
cd TaskFlowcd taskflow-backend
npm install
# create a .env file — see Environment Variables below
npx prisma migrate dev
npx prisma generate
npm run start:devcd taskflow-frontend
npm install
# create a .env file — see Environment Variables below
npm run devThe app will be available at http://localhost:5173, with the API running on http://localhost:3001.
taskflow-backend/.env
DATABASE_URL="postgresql://user:password@host/dbname?sslmode=require"
JWT_SECRET="your-jwt-secret"
GEMINI_API_KEY="your-google-gemini-api-key"
STRIPE_SECRET_KEY="your-stripe-secret-key"
STRIPE_PRICE_INDIVIDUALS="price_xxx"
STRIPE_PRICE_ELITE="price_xxx"
STRIPE_WEBHOOK_SECRET="whsec_xxx"
CLIENT_URL="http://localhost:5173"
PORT=3001taskflow-frontend/.env
VITE_API_URL="http://localhost:3001"Check
src/lib/axios.tsto confirm the exact variable name your Axios instance reads.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Type-check and build for production |
npm run lint |
Run ESLint |
npm run preview |
Preview the production build locally |
npm run test |
Unit tests — frontend (Vitest) or backend (Jest) |
- Unit tests — Jest for NestJS services, Vitest for Zustand stores
- Dockerized deployment (docker-compose)
- Real file storage (S3 / object storage) instead of metadata-only uploads
- Push notifications for mentions, assignments, and deadlines
- Full mobile-responsive redesign
- Playwright E2E tests
Nazar Metenchuk GitHub · LinkedIn · Email
If you found this project interesting, consider giving it a ⭐