Agilify

Modern Agile Project Management Platform

Streamline your workflow with powerful sprint planning, intuitive Kanban boards, and comprehensive team collaboration

✨ Features

🎯 Core Project Management Features

📊 Intuitive Kanban Boards: Visualize your entire workflow with drag-and-drop Kanban boards powered by @hello-pangea/dnd
- Real-time status tracking (TODO, IN PROGRESS, IN REVIEW, DONE)
- Seamless drag-and-drop issue reordering
- Column-based workflow visualization
- Persistent board state across sessions
🏃 Powerful Sprint Planning: Complete agile sprint management system
- Create and manage sprints with start/end dates
- Sprint status tracking (PLANNED, ACTIVE, COMPLETED)
- Assign issues to specific sprints
- Sprint backlog management
- Sprint progress visualization
📝 Comprehensive Issue Management: Full-featured issue tracking with advanced capabilities
- Create, edit, and delete issues with rich descriptions
- Markdown editor support for detailed issue descriptions
- Issue priority levels (LOW, MEDIUM, HIGH, URGENT)
- Assignee and reporter tracking
- Issue ordering within status columns
- Cascading deletes for data integrity
🏢 Multi-Organization Support: Powered by Clerk for enterprise-ready team management
- Organization-based project isolation
- Role-based access control
- Team member management
- Organization switcher component

🚀 Advanced Features

🎨 Modern & Responsive UI: Beautiful interface built with Radix UI and TailwindCSS
- Dark mode support with next-themes
- Fully responsive design for all devices
- Accessible components following WAI-ARIA guidelines
- Smooth animations with tailwindcss-animate
👥 User Management & Authentication: Secure authentication with Clerk
- Social sign-in options
- Protected routes and middleware
- User profile management with avatars
- Webhook integration for user sync
🔍 Smart Filtering & Search: Advanced board filtering capabilities
- Filter by assignee, priority, or status
- Search issues by title or description
- Quick filter presets
- Clear filter states
📱 Mobile-Friendly: Optimized for mobile project management
- Responsive drawer components with Vaul
- Touch-friendly drag-and-drop
- Mobile-optimized navigation
- Adaptive layouts for all screen sizes
⚡ Real-time Updates: Fast, reactive UI updates
- Optimistic UI updates
- Server actions for data mutations
- Automatic revalidation
- Loading states with spinners
📈 Project Analytics: Gain insights into your team's performance
- User-specific issue tracking
- Project overview dashboards
- Issue distribution visualization
- Sprint velocity tracking

📸 Screenshots

🛠️ Tech Stack

Frontend

Next.js 14 - React framework with App Router and Server Components
React 18 - UI library with hooks and concurrent features
TailwindCSS - Utility-first CSS framework
Radix UI - Accessible, unstyled component primitives
- Dialog, Popover, Select, Tabs, Accordion, Avatar
@hello-pangea/dnd - Beautiful drag-and-drop for Kanban boards
@uiw/react-md-editor - Markdown editor for rich issue descriptions
Lucide React - Beautiful & consistent icon set
next-themes - Dark mode support
Sonner - Toast notifications
Vaul - Mobile-friendly drawer component

Backend & Database

Prisma ORM - Type-safe database toolkit
PostgreSQL - Robust relational database
Next.js API Routes - Serverless API endpoints
Server Actions - Server-side mutations with Next.js 14

Authentication & User Management

Clerk - Complete user management solution
- Social authentication
- Organization management
- Protected routes
- Webhooks for user sync

Form Handling & Validation

React Hook Form - Performant form management
Zod - TypeScript-first schema validation
@hookform/resolvers - Form validation integration

Utilities

date-fns - Modern JavaScript date utility library
class-variance-authority - Type-safe component variants
clsx - Utility for constructing className strings
tailwind-merge - Merge Tailwind CSS classes without conflicts

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.x or later
npm or yarn package manager
PostgreSQL database (local or cloud)
Clerk Account for authentication (clerk.com)

🚀 Installation & Setup

1. Clone the Repository

git clone https://github.com/CoderYashVij/Agilify.git
cd Agilify

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

Create a .env file in the root directory with the following variables:

# Database Configuration
DATABASE_URL="postgresql://username:password@localhost:5432/agilify?schema=public"

# Clerk Authentication
# Get these from https://dashboard.clerk.com
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
CLERK_SECRET_KEY=sk_test_your_secret_key_here

# Clerk URLs (adjust based on your domain)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/onboarding
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding

# Clerk Webhook Secret (for user sync)
CLERK_WEBHOOK_SECRET=whsec_your_webhook_secret_here

4. Configure Clerk

Create a Clerk application at clerk.com
Enable Organizations feature in Clerk Dashboard
Copy your publishable and secret keys to .env
Set up a webhook endpoint for user synchronization:
- Webhook URL: https://your-domain.com/api/webhooks/clerk
- Subscribe to events: user.created, user.updated, organizationMembership.created

5. Set Up Database

Initialize your PostgreSQL database and run migrations:

# Generate Prisma Client
npx prisma generate

# Push schema to database
npx prisma db push

# (Optional) Seed database with sample data
npx prisma db seed

6. Run Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to see the application.

📊 Database Management

Agilify uses Prisma as the ORM with PostgreSQL database.

Database Schema

The application includes the following models:

User - User profiles synced from Clerk
Project - Projects with organization isolation
Sprint - Sprint planning and management
Issue - Issue tracking with priorities and statuses

Available Commands

# Open Prisma Studio (visual database editor)
npx prisma studio

# Generate Prisma Client after schema changes
npx prisma generate

# Push schema changes to database
npx prisma db push

# Create a new migration
npx prisma migrate dev --name migration_name

# Reset database (⚠️ WARNING: Deletes all data)
npx prisma migrate reset

📜 Available Scripts

# Development
npm run dev          # Start development server on http://localhost:3000

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint for code quality checks

# Database
npm run postinstall  # Automatically generates Prisma Client after install

🎨 Project Structure

Agilify/
├── app/                          # Next.js 14 App Router
│   ├── (auth)/                  # Authentication routes
│   │   ├── sign-in/            # Sign-in page
│   │   └── sign-up/            # Sign-up page
│   ├── (main)/                 # Main application routes
│   │   ├── onboarding/         # User onboarding flow
│   │   ├── organization/       # Organization management
│   │   │   └── [slug]/         # Organization-specific pages
│   │   └── project/            # Project management
│   │       ├── _components/    # Project-specific components
│   │       ├── [projectId]/    # Individual project pages
│   │       └── create/         # Project creation
│   ├── globals.css             # Global styles
│   ├── layout.js               # Root layout
│   └── page.jsx                # Landing page
├── actions/                     # Server actions
│   ├── issues.js               # Issue CRUD operations
│   ├── organizations.js        # Organization operations
│   ├── projects.js             # Project operations
│   └── sprints.js              # Sprint operations
├── components/                  # Reusable components
│   ├── ui/                     # UI component library
│   ├── header.jsx              # Main header
│   ├── issue-card.jsx          # Issue card component
│   ├── org-switcher.jsx        # Organization switcher
│   └── user-menu.jsx           # User menu dropdown
├── hooks/                       # Custom React hooks
│   └── use-fetch.js            # Data fetching hook
├── lib/                        # Utility libraries
│   ├── checkUser.js            # User authentication check
│   ├── prisma.js               # Prisma client instance
│   └── utils.js                # Utility functions
├── prisma/                     # Database schema and migrations
│   ├── schema.prisma           # Prisma schema definition
│   └── migrations/             # Database migrations
├── public/                     # Static assets
├── middleware.js               # Next.js middleware (Clerk)
├── next.config.mjs             # Next.js configuration
├── tailwind.config.js          # Tailwind CSS configuration
└── package.json                # Dependencies and scripts

🎯 Key Features Breakdown

1. Kanban Board Management

The Kanban board is the heart of Agilify, providing visual workflow management:

Drag-and-drop issues between columns
Real-time board updates
Customizable board filters
Issue reordering within columns
Mobile-responsive board layout

Tech: @hello-pangea/dnd, Server Actions, Optimistic UI

2. Sprint Planning

Comprehensive sprint management for agile teams:

Create sprints with date ranges
Assign issues to sprints
Track sprint status (Planned/Active/Completed)
Sprint backlog management
View sprint progress and completion

Tech: Prisma, React Hook Form, Zod validation

3. Issue Tracking

Full-featured issue management system:

Rich markdown descriptions
Priority levels and status tracking
Assignee and reporter assignment
Issue filtering and search
Detailed issue view dialog

Tech: @uiw/react-md-editor, Radix UI Dialog, Server Actions

4. Organization Management

Multi-tenant architecture with organization support:

Organization-based project isolation
Team member management
Organization switcher
Role-based permissions

Tech: Clerk Organizations, Middleware protection

5. User Experience

Modern, accessible, and responsive design:

Dark/Light theme toggle
Toast notifications for actions
Loading states and error handling
Responsive mobile design
Accessible components

Tech: next-themes, Sonner, Radix UI, TailwindCSS

🔐 Authentication & Authorization

Agilify uses Clerk for authentication and user management:

Social Sign-In: Support for Google, GitHub, and more
Organizations: Team-based access control
Protected Routes: Middleware-based route protection
User Sync: Automatic user synchronization via webhooks
Session Management: Secure session handling

🌐 Deployment

Deploy to Vercel (Recommended)

Push your code to GitHub
Import project in Vercel Dashboard
Configure environment variables in Vercel
Deploy

Environment Variables for Production

Ensure all environment variables from .env are configured in your deployment platform:

Database URL (use connection pooling for serverless)
Clerk keys and webhook secret
Any additional production-specific variables

Database Considerations

Use a production PostgreSQL database (e.g., Neon, Supabase, Railway)
Enable connection pooling for serverless environments
Run migrations before deploying: npx prisma migrate deploy

🤝 Contributing

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

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

📝 License

This project is open source and available under the MIT License.

👨‍💻 Author

Yash Vij

GitHub: @CoderYashVij
LinkedIn: Connect with me

🙏 Acknowledgments

Next.js - The React Framework
Clerk - Authentication & User Management
Prisma - Next-generation ORM
Radix UI - Accessible component primitives
Vercel - Deployment platform

📧 Support

For support, email [email protected] or open an issue in the repository.

Built with ❤️ by Yash Vij

⭐ Star this repo if you find it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
actions		actions
app		app
components		components
data		data
hooks		hooks
lib		lib
prisma		prisma
public		public
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
jsconfig.json		jsconfig.json
middleware.js		middleware.js
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.js		tailwind.config.js

CoderYashVij/Agilify

Folders and files

Latest commit

History

Repository files navigation