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

• Railway https://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 Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/

# Database
DATABASE_URL=your_database_url
DIRECT_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