A production-grade, full-stack project management application built with Next.js 14, TypeScript, and modern web technologies.
Features | Screenshots | Quick Start | Documentation | Contributing
ProjectFlow is a comprehensive project management solution designed for modern development teams. It combines the best features of popular tools like Jira, Trello, and Asana into a single, cohesive platform with real-time collaboration capabilities.
- Kanban Boards - Intuitive drag-and-drop task management
- Sprint Planning - Agile workflow with burndown charts
- Gantt Charts - Visual project timelines
- Real-time Updates - Live collaboration with Socket.io
- Time Tracking - Built-in time logging and analytics
- Role-based Access - Granular permissions system
- Projects & Workspaces - Organize work into projects with customizable settings
- Kanban Boards - Drag-and-drop task cards between customizable columns
- Task Management - Create tasks with descriptions, priorities, labels, and due dates
- Subtasks & Checklists - Break down complex tasks into smaller items
- Labels & Tags - Categorize and filter tasks with custom labels
- File Attachments - Upload and manage project files
- Sprint Planning - Plan and manage sprints with start/end dates and goals
- Burndown Charts - Track sprint progress with visual charts
- Story Points - Estimate task complexity for velocity tracking
- Backlog Management - Prioritize and organize the product backlog
- Time Tracking - Start/stop timer or log time manually
- Time Reports - View time logged per task, project, or user
- Project Analytics - Completion rates, velocity, and team performance
- Dashboard - Overview of all projects, tasks, and upcoming deadlines
- Real-time Updates - See changes instantly with Socket.io
- Comments - Discuss tasks with threaded comments
- Activity Feed - Track all project and task activities
- Notifications - Stay informed about important updates
- Team Management - Invite members with role-based permissions
- Multiple Auth Methods - Email/password, GitHub, Google OAuth
- Role-based Access - Admin, Manager, Member, and Viewer roles
- Session Management - Secure JWT-based sessions
- Password Security - Bcrypt hashing with salt rounds
The main dashboard provides an overview of all your projects, recent activity, upcoming deadlines, and key metrics. Cards display project progress, task counts, and team member avatars.
The Kanban board features smooth drag-and-drop functionality for task cards. Each card displays the task title, priority badge, due date, labels, and assignee avatar. Columns are fully customizable.
The sprint view shows active and planned sprints with burndown charts, story point tracking, and task breakdown by status. Sprint goals and timelines are clearly displayed.
Detailed analytics including task completion trends, team velocity charts, time tracking summaries, and task distribution by priority and status.
Full dark mode support with carefully designed color schemes that reduce eye strain while maintaining excellent readability and visual hierarchy.
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS
- shadcn/ui - Beautiful UI components
- Framer Motion - Animations
- Recharts - Charts and analytics
- tRPC - End-to-end type-safe API
- Prisma - Type-safe ORM
- NextAuth.js - Authentication
- Socket.io - Real-time communication
- PostgreSQL - Production database
- SQLite - Development/demo database
- Zustand - Client state
- React Query - Server state
- Docker - Containerization
- GitHub Actions - CI/CD
- Vitest - Testing framework
- Node.js 18+
- npm or pnpm
- PostgreSQL (optional, SQLite for demo)
-
Clone the repository
git clone https://github.com/yourusername/projectflow.git cd projectflow -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env
Edit
.envand configure:DATABASE_URL="file:./dev.db" NEXTAUTH_SECRET="your-secret-key" NEXTAUTH_URL="http://localhost:3000"
-
Initialize the database
npm run db:push npm run db:seed
-
Start the development server
npm run dev
-
Open the app
Navigate to http://localhost:3000
Email: admin@projectflow.dev
Password: demo123
# Start all services
docker-compose up -d
# View logs
docker-compose logs -f app
# Stop services
docker-compose downDATABASE_URL=postgresql://user:password@host:5432/projectflow
NEXTAUTH_SECRET=<generate-secure-secret>
NEXTAUTH_URL=https://your-domain.com
# Optional: OAuth providers
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=projectflow/
├── prisma/ # Database schema and migrations
│ ├── schema.prisma # Prisma schema
│ └── seed.ts # Database seed script
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── (auth)/ # Authentication pages
│ │ ├── (dashboard)/ # Protected dashboard pages
│ │ ├── api/ # API routes
│ │ └── layout.tsx # Root layout
│ ├── components/ # React components
│ │ ├── kanban/ # Kanban board components
│ │ ├── layout/ # Layout components
│ │ ├── providers/ # Context providers
│ │ └── ui/ # shadcn/ui components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ │ ├── auth.ts # NextAuth configuration
│ │ ├── db.ts # Prisma client
│ │ ├── trpc.ts # tRPC client
│ │ └── utils.ts # Helper functions
│ ├── server/ # Server-side code
│ │ ├── routers/ # tRPC routers
│ │ └── trpc.ts # tRPC configuration
│ ├── stores/ # Zustand stores
│ ├── test/ # Test setup
│ └── types/ # TypeScript types
├── .github/
│ └── workflows/ # GitHub Actions CI/CD
├── docker-compose.yml # Docker Compose configuration
├── Dockerfile # Docker build configuration
└── package.json # Project dependencies
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run format |
Format code with Prettier |
npm run typecheck |
Run TypeScript type checking |
npm run test |
Run tests with Vitest |
npm run test:coverage |
Run tests with coverage |
npm run db:push |
Push schema to database |
npm run db:migrate |
Run database migrations |
npm run db:seed |
Seed database with demo data |
npm run db:studio |
Open Prisma Studio |
| Router | Description |
|---|---|
project |
Project CRUD operations |
task |
Task management and movement |
sprint |
Sprint planning and tracking |
user |
User profile and authentication |
activity |
Activity feed and logging |
analytics |
Project and dashboard analytics |
// Get all projects
const { data: projects } = trpc.project.getAll.useQuery();
// Create a new task
const createTask = trpc.task.create.useMutation();
await createTask.mutateAsync({
title: 'New Task',
projectId: 'project-id',
columnId: 'column-id',
priority: 'high',
});
// Move a task
const moveTask = trpc.task.move.useMutation();
await moveTask.mutateAsync({
taskId: 'task-id',
columnId: 'new-column-id',
order: 0,
});We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Run tests and linting (
npm run test && npm run lint) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the ESLint and Prettier configurations
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Mobile app (React Native)
- Calendar integration (Google Calendar, Outlook)
- Webhooks for external integrations
- AI-powered task suggestions
- Custom fields for tasks
- Time zone support
- Multiple languages (i18n)
- Keyboard shortcuts
- Export to PDF/CSV
- Advanced search with filters
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the beautiful component library
- T3 Stack for architecture inspiration
- Vercel for the excellent deployment platform
- All open-source contributors
Made with love by the ProjectFlow Team