Team-focused task and project management: authenticated workspace, projects, Kanban-style tasks, invites, and notifications—built as a modern SPA plus REST API.
TaskFlow is a full-stack application for organizing work across projects and tasks. Users sign in with Supabase-backed auth, manage projects and memberships, track tasks (including a board view), and receive in-app notifications. The UI is a responsive React client; the backend is a Node/Express API backed by Supabase for data and optional email (Resend) for invitations.
Highlights for reviewers
- Clear separation: React + TanStack Router frontend, Express REST API.
- Real auth: JWT from Supabase passed as
Authorization: Bearerto the API. - Practical feature set: dashboard metrics, project CRUD, tasks, profile, notifications.
- Authentication — Login and signup; session via Supabase.
- Dashboard — At-a-glance stats, my tasks, recent projects, overdue focus.
- Projects — List, search, filter by status; create project; project detail with metadata and members.
- Tasks — List and detail views; Kanban board with drag-and-drop-style organization.
- Collaboration — Project invites (email when Resend is configured).
- Notifications — In-app notification center in the top bar.
| Layer | Technologies |
|---|---|
| Frontend | React 19, TypeScript, Vite, TanStack Router, Tailwind CSS v4, Zustand, React Hook Form, Zod, dnd-kit, Supabase JS client |
| Backend | Node.js 18+, Express, Zod, Supabase (service role), optional Resend |
| Data & auth | Supabase (Postgres + Auth) |
Prerequisites: Node.js 18 or newer, npm, and a Supabase project (URL + anon key for the client; service role for the server).
Clone the repository and install dependencies for both apps:
git clone <your-fork-or-remote-url> taskflow-app
cd taskflow-app
cd frontend && npm install
cd ../backend && npm installSupabase — Create a project and run the SQL schema in
backend/supabase-schema.sqlin the Supabase SQL editor (tables, RLS as defined there).Backend environment — In
backend/, copy or create a.envfile (see Environment variables).Frontend environment — In
frontend/, copy or create.env/.env.localwithVITE_*variables.CORS — For production, set
CLIENT_URLto your deployed frontend origin.
Run API and web app in separate terminals:
# Terminal 1 — API (default http://localhost:4000)cd backend
npm run dev
# Terminal 2 — SPA (default http://localhost:5173)cd frontend
npm run devOpen the app in the browser, sign up or log in, then use Projects → New Project to create a workspace. Task and board flows live under Tasks and each project page.
Production build (frontend)
cd frontend
npm run build
npm run preview # optional local check of static outputServe frontend/dist with any static host and point VITE_API_URL at your deployed API.
Representative mockups of the dashboard and project board experience:
taskflow-app/
├── frontend/ # Vite + React + TanStack Router SPA
│ ├── src/
│ │ ├── components/ # UI, layout, Kanban, modals
│ │ ├── routes/ # File-based routes (dashboard, projects, tasks, auth)
│ │ └── lib/ # API client, auth, store, types
│ └── vite.config.ts
├── backend/ # Express REST API
│ ├── src/
│ │ ├── controllers/
│ │ ├── routes/
│ │ ├── middleware/
│ │ └── schemas/
│ ├── supabase-schema.sql
│ └── index.js
├── docs/
│ └── assets/ # README screenshots
├── README.md
└── LICENSE
| Variable | Description |
|---|---|
VITE_SUPABASE_URL | Supabase project URL |
VITE_SUPABASE_ANON_KEY | Supabase anonymous (public) key |
VITE_API_URL | Backend base URL (default http://localhost:4000) |
| Variable | Description |
|---|---|
PORT | HTTP port (default 4000) |
SUPABASE_URL | Same project URL as the client |
SUPABASE_SERVICE_ROLE_KEY | Service role key (server-only; never expose to the browser) |
CLIENT_URL | Frontend origin for CORS and invite links (e.g. https://app.example.com) |
RESEND_API_KEY | Optional; enables transactional email for invites |
RESEND_FROM | Optional sender address for Resend |
Base URL — Configured in the frontend as
VITE_API_URL(seefrontend/src/lib/api.ts).Auth — After Supabase login, the SPA attaches
Authorization: Bearer <access_token>to API requests.Namespaces (Express, under
/api):Prefix Purpose /api/authSign up, login, session helpers /api/dashboardDashboard aggregates /api/projectsProjects and membership /api/tasksTasks /api/profileUser profile /api/invitesInvitations /api/notificationsNotifications Health —
GET /healthreturns{ "status": "ok" }for uptime checks.
Typical layout:
- Database — Supabase (schema from
backend/supabase-schema.sql). - Backend — Deploy the Express app (e.g. Railway, Render, Fly.io, VPS). Set all backend env vars; ensure
CLIENT_URLmatches the SPA origin. - Frontend — Build with
npm run build, deploy static files, setVITE_*at build time so the client knows API and Supabase endpoints.
Use HTTPS in production and restrict CORS to your real frontend URL via CLIENT_URL.
Contributions are welcome.
- Open an issue for larger changes or bugs so direction is aligned early.
- Fork the repo and create a focused branch (
feature/…,fix/…). - Match existing code style (Prettier/ESLint in
frontend); keep commits readable. - Test flows you touch (auth, create project, tasks) against local API + Supabase.
- Open a pull request with a short description of what changed and why.
This project is licensed under the MIT License.