A modern, collaborative project management tool that visualizes task dependencies using network diagrams. Built with Next.js 16, React Flow, MongoDB, Tailwind CSS, and Clerk authentication.

• 🔐 User Authentication - Secure login with Clerk (Email, Google, GitHub, etc.)
• 📊 Interactive Network Diagram - Visualize task dependencies in real-time
• 🗂️ Multi-Project Support - Create and manage multiple projects
• 👥 Team Collaboration - Invite members and assign roles
• 🎭 Role-Based Access - Owner, Manager, and Viewer permissions
• ✅ Task Management - Create, Read, Update, Delete tasks with ease
• 🔗 Dependency Tracking - Visual connections between related tasks
• 📅 Date Management - Beautiful date picker with range selection
• 📈 Status Tracking - Not Started, In Progress, Completed
• 💾 MongoDB Database - Persistent data storage with MongoDB
• 📤 Export/Import - Save and load project data as JSON
• 🎨 Modern UI - Beautiful gradients, animations, and shadcn/ui components
• 🔔 Toast Notifications - Elegant Sonner toast notifications
• 📱 Responsive Design - Works seamlessly on all devices

• Owner: Full control over project, tasks, and team
• Manager: Can manage tasks and invite members
• Viewer: Read-only access to project and tasks

• Node.js 18+ installed
• npm or yarn package manager
• A Clerk account (free tier available at clerk.com)
• MongoDB Atlas account or local MongoDB (see MongoDB Setup Guide)

1. Clone the repository:

git clone <your-repo-url>
cd taskflow

2. Install dependencies:

npm install

3. Set up environment variables:

   • Copy .env.example to .env.local
   • Add your Clerk keys from Clerk Dashboard
   • Add your MongoDB connection string

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
   CLERK_SECRET_KEY=sk_test_...
   MONGODB_URI=mongodb+srv://...

4. Configure MongoDB:

   • Follow the detailed MongoDB Setup Guide
   • Create a free MongoDB Atlas cluster
   • Get your connection string and add to .env.local

5. Run the development server:

npm run dev

5. Open in browser:
   • Navigate to http://localhost:3001
   • Create an account or sign in
   • Start managing your projects!

• Clerk Setup Guide - Complete authentication setup
• Database Setup Guide - Options for production database
• User Guide - How to use TaskFlow features
• Project Summary - Technical implementation details

1. Visit the app - you'll be redirected to sign in
2. Create an account or sign in with email/social providers
3. Your tasks are associated with your user account

1. Click the "Create Task" button in the sidebar
2. Fill in task details:
   • Title (required)
   • Description
   • Status (Not Started, In Progress, Completed, Blocked)
   • Priority (Low, Medium, High)
   • Date Range (Start and End dates)
   • Assignee
   • Dependencies (select from existing tasks)
3. Click "Save Task"

• Tasks appear as nodes with color-coded status:
  • 🔵 Blue: In Progress
  • 🟢 Green: Completed
  • ⚪ Gray: Not Started
  • 🔴 Red: Blocked
• Arrows show dependencies between tasks
• Drag to connect tasks by creating dependencies
• Zoom and pan to navigate large diagrams
• Minimap shows overview of entire project

• Edit: Click task node or list item to edit
• Delete: Remove tasks with confirmation
• Connect: Drag from one task to another to create dependencies
• Filter: View tasks by status in the sidebar

• Export: Download your project as JSON
• Import: Load previously saved project data
• Auto-save: Changes are saved automatically to localStorage

taskflow/
├── app/
│   ├── (auth)/
│   │   ├── sign-in/[[...sign-in]]/page.tsx  # Sign-in page
│   │   └── sign-up/[[...sign-up]]/page.tsx  # Sign-up page
│   ├── components/
│   │   ├── ui/                               # shadcn/ui components
│   │   ├── TaskForm.tsx                      # Task creation/editing modal
│   │   ├── TaskNode.tsx                      # Custom React Flow node
│   │   ├── Sidebar.tsx                       # Task list and stats
│   │   └── QuickStartGuide.tsx               # User onboarding
│   ├── types/
│   │   └── index.ts                          # TypeScript interfaces
│   ├── utils/
│   │   ├── layout.ts                         # Node positioning algorithm
│   │   └── storage.ts                        # localStorage operations
│   ├── globals.css                           # Global styles + theme
│   ├── layout.tsx                            # Root layout with ClerkProvider
│   └── page.tsx                              # Main application
├── components/
│   └── ui/                                   # shadcn/ui component library
├── lib/
│   └── utils.ts                              # Utility functions
├── public/
│   └── sample-project.json                   # Sample data for testing
├── middleware.ts                             # Clerk route protection
├── .env.local                                # Environment variables
├── CLERK_SETUP.md                            # Authentication guide
├── DATABASE_SETUP.md                         # Database integration guide
└── package.json

Required variables in .env.local:

# Clerk Authentication (Required)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key_here
CLERK_SECRET_KEY=your_secret_here

# Clerk URLs (Already configured)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# Database (Optional - see DATABASE_SETUP.md)
DATABASE_URL=your_database_url_here

See CLERK_SETUP.md for detailed instructions on:

• Creating a Clerk account
• Getting API keys
• Configuring social auth providers
• Customizing auth UI
• Managing users

Currently uses localStorage for data persistence. For production, see DATABASE_SETUP.md for options:

• Vercel Postgres (Recommended for Next.js)
• Supabase (PostgreSQL with real-time features)
• MongoDB Atlas (NoSQL option)

• ✅ Email authentication with verification
• ✅ Social login (Google, GitHub, etc.)
• ✅ Protected routes with middleware
• ✅ User profile management
• ✅ Session handling
• ✅ Secure API routes

• ✅ Force-directed layout algorithm
• ✅ Animated dependency arrows
• ✅ Interactive zoom and pan
• ✅ Minimap navigation
• ✅ Custom styled nodes
• ✅ Drag-and-drop connections

• ✅ Rich task properties
• ✅ Multiple dependencies per task
• ✅ Date range picker with calendar
• ✅ Priority and status indicators
• ✅ Assignee tracking
• ✅ Search and filter

• ✅ Modern gradient design
• ✅ Smooth animations
• ✅ shadcn/ui components
• ✅ Responsive layout
• ✅ Dark mode ready
• ✅ Keyboard shortcuts
• ✅ Loading states
• ✅ Empty states
• ✅ Quick start guide

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

# Or use Vercel CLI
npm install -g vercel
vercel

Make sure to set these in your hosting platform:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL (if using a database)

• Database integration (Vercel Postgres / Supabase)
• Real-time collaboration
• Team workspaces
• Activity timeline
• Task comments
• File attachments
• Email notifications
• Mobile app
• API documentation
• Dark mode
• Keyboard shortcuts
• Undo/Redo
• Task templates

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

MIT License - feel free to use this project for personal or commercial purposes.

• Next.js - React framework
• React Flow - Diagram visualization
• Tailwind CSS - Utility-first CSS
• Clerk - Authentication
• shadcn/ui - Component library
• Lucide - Icon library
• Radix UI - Unstyled components

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 📖 Docs: See documentation files in this repository
• 🐛 Issues: GitHub Issues

• Lines of Code: ~2,500+
• Components: 15+
• Pages: 3
• Dependencies: 20+
• Bundle Size: < 500KB

Made with ❤️ by the TaskFlow team