TaskFlow 🚀

TaskFlow is a modern, minimal, and production-ready Project Management Dashboard built with Next.js 15+, TypeScript, and Tailwind CSS. It features secure authentication, role-based access control (RBAC), task tracking, and a clean component-based architecture.

---

🌐 Live Deployments

• Vercel (Recommended)https://task-flow-mu-pied.vercel.app

• Railwayhttps://taskflow-production-589d.up.railway.app/

---

✨ Features

🔐 Authentication

• Secure authentication using Clerk
• Sign Up / Sign In flow
• Protected dashboard routes

📁 Project Management

• Create and manage multiple projects
• Organized project-based workflow

✅ Task Tracking

• Create tasks inside projects

• Update task status:

  • TODO
  • IN_PROGRESS
  • DONE

🛡 Role-Based Access Control (RBAC)

ADMIN

• Create projects
• Create tasks
• Update task statuses

MEMBER

• View projects
• View tasks
• Read-only access

🔄 Automatic User Sync

• Clerk users automatically sync with PostgreSQL database on first login

🎨 Modern UI

• Minimal dark SaaS-style dashboard
• Responsive layout
• Clean typography and reusable components

---

🛠 Tech Stack

Technology	Usage
Next.js 15+	Frontend Framework
TypeScript	Type Safety
Tailwind CSS	Styling
Clerk	Authentication
Prisma	ORM
PostgreSQL	Database
Supabase	Database Hosting
Railway	Deployment
Vercel	Production Demo Hosting

---

🚀 Getting Started

1. Clone Repository

git clone <your-repository-url>cd taskflow

---

2. Install Dependencies

npm install

---

3. Setup Environment Variables

Create a .env file in the root directory:

# Clerk AuthenticationNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_keyCLERK_SECRET_KEY=your_secret_keyNEXT_PUBLIC_CLERK_SIGN_IN_URL=/NEXT_PUBLIC_CLERK_SIGN_UP_URL=/# DatabaseDATABASE_URL=your_database_urlDIRECT_URL=your_direct_database_url

---

4. Setup Prisma

npx prisma generate
npx prisma db push

---

5. Run Development Server

npm run dev

Open:

http://localhost:3000

---

🔑 Role Logic

• First registered user automatically becomes ADMIN
• All subsequent users become MEMBER
• Backend APIs enforce RBAC protection
• Unauthorized mutation requests are blocked server-side

---

📂 Project Structure

app/
├── api/ # Backend API routes
├── dashboard/ # Dashboard pages
├── sign-in/ # Clerk sign-in
└── sign-up/ # Clerk sign-up
components/
└── dashboard/ # Reusable dashboard components
prisma/
├── schema.prisma
└── migrations/
src/
└── lib/
└── prisma.ts

---

📌 Future Improvements

• Team collaboration
• Notifications
• Due dates
• Activity logs
• Kanban board
• File attachments

---

👨‍💻 Author

Built by Amit Kumar