TaskFlow - Project & Client Management SaaS

A complete web-based SaaS application for managing clients, projects, and tasks with dashboards, analytics, and subscription billing.

🚀 Features

Core Features

• Authentication: Email/password login with NextAuth
• Client Management: Add, edit, delete clients with contact information
• Project Management: Create projects, track status, link to clients
• Task Management: Comprehensive task system with priorities and due dates
• Dashboard Analytics: Charts, stats, and insights with Recharts
• Subscription System: Free and Pro plans with Stripe integration
• Responsive Design: Mobile-friendly interface with Tailwind CSS

Pro Features (Subscription Required)

• Unlimited clients and projects
• Advanced task assignment
• Team collaboration
• Priority support
• Export reports

🛠 Tech Stack

Frontend

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• ShadCN UI components
• React Hook Form for forms
• Recharts for analytics

Backend

• Next.js API Routes
• Prisma ORM
• PostgreSQL database
• NextAuth for authentication
• Zod for validation

Payments & Storage

• Stripe for subscriptions
• Cloudinary for file uploads

📁 Project Structure

taskflow-saas/
├── app/                    # Next.js 14 App Router
│   ├── api/               # API routes
│   ├── dashboard/         # Protected dashboard pages
│   ├── login/            # Authentication pages
│   ├── pricing/          # Pricing page
│   └── globals.css       # Global styles
├── components/            # Reusable components
│   └── ui/               # ShadCN UI components
├── lib/                  # Utilities and configurations
│   ├── auth.ts           # NextAuth config
│   ├── db.ts             # Prisma client
│   ├── stripe.ts         # Stripe config
│   └── utils.ts          # Helper functions
├── prisma/               # Database schema
│   └── schema.prisma     # Prisma schema
└── middleware.ts         # Route protection

🚀 Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database (Neon/Supabase recommended)
• Stripe account
• Cloudinary account (optional)

Installation

1. Clone and install dependencies

cd SaaS-management
npm install

2. Set up environment variables

cp .env.example .env

Fill in your environment variables:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/taskflow"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# Stripe
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
STRIPE_PRICE_ID_PRO="price_..."

# Cloudinary (optional)
CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"

3. Set up the database

npx prisma db push
npx prisma generate

4. Run the development server

npm run dev

Visit http://localhost:3000

🗄 Database Schema

Core Models

• User: Authentication and subscription data
• Client: Client information and contact details
• Project: Project management with status tracking
• Task: Task management with priorities and due dates

Relationships

• Users have many Clients, Projects, and Tasks
• Clients can have many Projects
• Projects can have many Tasks
• Full referential integrity with cascading deletes

💳 Stripe Integration

Subscription Plans

• Free Plan: 3 clients, 5 projects, basic features
• Pro Plan: Unlimited everything, advanced features

Webhook Events

• checkout.session.completed: Activate subscription
• invoice.payment_succeeded: Renew subscription

Setup Steps

1. Create products and prices in Stripe Dashboard
2. Set up webhook endpoint: /api/webhooks
3. Configure webhook events in Stripe
4. Add price IDs to environment variables

🚀 Deployment

Vercel Deployment

1. Connect to Vercel

npm i -g vercel
vercel

2. Set environment variables in Vercel dashboard

3. Deploy

vercel --prod

Database Setup (Neon)

1. Create account at Neon
2. Create new project
3. Copy connection string to DATABASE_URL
4. Run npx prisma db push

Stripe Configuration

1. Update webhook URL to production domain
2. Update NEXTAUTH_URL to production domain
3. Test payments in Stripe Dashboard

📊 Features Overview

Dashboard

• Total clients, projects, tasks
• Tasks due today
• Pie charts for task status
• Bar charts for project status
• Recent activity timeline

Client Management

• Add/edit/delete clients
• Contact information storage
• Project relationship tracking
• Client detail pages

Project Management

• Create projects with status tracking
• Link projects to clients
• Budget and timeline management
• Task progress tracking

Task Management

• Create tasks within projects
• Priority levels (Low, Medium, High, Urgent)
• Due date tracking
• Status management (Todo, In Progress, Completed)

Subscription System

• Free tier with limitations
• Pro tier with full features
• Stripe checkout integration
• Subscription status tracking

🔒 Security Features

• Protected routes with middleware
• User session management
• Data isolation per user
• Secure API endpoints
• Input validation with Zod

📱 Responsive Design

• Mobile-first approach
• Tailwind CSS utilities
• ShadCN UI components
• Optimized for all screen sizes

🤝 Contributing

1. Fork the repository
2. Create feature branch
3. Make changes
4. Test thoroughly
5. Submit pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Review the code examples

---

Built with ❤️ using Next.js, TypeScript, and modern web technologies.