Prompt: "Research successful SaaS products in the task
management space. What are their key features?
What are users complaining about?
What gaps exist in the market?"

Prompt: "Analyze these competitors:
1. Asana
2. Linear
3. ClickUp
4. Notion

Create a comparison matrix of:
- Features
- Pricing
- User experience
- Target market

What can we do differently?"

# مع AI، حدد MVP:
Prompt: "From the full feature list, identify the absolute
minimum features needed for:
1. A usable product
2. Happy users
3. Willingness to pay

Prioritize by:
- User value
- Development effort
- Revenue potential"

Prompt: "Design the information architecture for TaskFlow.ai.
Include:
1. Page structure
2. Navigation flow
3. User journey from signup to first task
4. Key screens and layouts

Consider:
- Simplicity
- Discoverability
- Mobile responsiveness"

# استخدم Cursor لإنشاء مكونات UI
cursor

# Prompt:
"Create these components using shadcn/ui:
- Sidebar navigation
- Task list card
- Task detail modal
- Dashboard stat cards

Use Tailwind CSS.
Make them responsive."

# 1. إنشاء مشروع Next.js
npx create-next-app@latest taskflow --typescript --tailwind --app --src-dir --import-alias "@/*"

cd taskflow

# 2. تثبيت dependencies
npm install \
  @tanstack/react-query \
  zod \
  zustand \
  date-fns \
  lucide-react

# 3. تثبيت dev dependencies
npm install -D \
  @types/node \
  prettier \
  eslint-config-prettier

# 4. إعداد shadcn/ui
npx shadcn-ui@latest init

# بنية المجلدات
src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Auth routes
│   ├── (dashboard)/       # Dashboard routes
│   ├── api/               # API routes
│   └── layout.tsx
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── auth/             # Auth components
│   ├── tasks/            # Task components
│   └── dashboard/        # Dashboard components
├── lib/                   # Utilities
│   ├── db.ts             # Database client
│   ├── auth.ts           # Auth utilities
│   ├── stripe.ts         # Stripe client
│   └── ai.ts             # AI utilities
├── server/                # Backend code
│   ├── api/              # tRPC routers
│   ├── services/         # Business logic
│   └── db/               # Database queries
└── types/                 # TypeScript types
    └── index.ts

opencode build "
Create the complete folder structure for TaskFlow.ai.
Set up:
1. Next.js 14 with App Router
2. TypeScript with strict mode
3. Tailwind CSS + shadcn/ui
4. tRPC for type-safe APIs
5. Prisma with PostgreSQL
6. NextAuth.js for authentication

Include:
- Environment configuration
- ESLint + Prettier
- Git pre-commit hooks
- TypeScript path aliases
"

Prompt: "Design a PostgreSQL database schema for a task
management SaaS. Include tables for:

1. Users (with auth)
2. Organizations (teams)
3. Projects
4. Tasks
5. Comments
6. Subscriptions
7. Invoices

Consider:
- Multi-tenancy (organizations)
- Soft deletes
- Audit trails
- Indexes for performance
- Row Level Security (RLS)

Output as Prisma schema."

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

enum SubscriptionStatus {
  ACTIVE
  CANCELLED
  PAST_DUE
}

enum SubscriptionPlan {
  FREE
  PRO
  ENTERPRISE
}

enum TaskStatus {
  TODO
  IN_PROGRESS
  DONE
}

enum TaskPriority {
  LOW
  MEDIUM
  HIGH
  URGENT
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt

  accounts      Account[]
  sessions      Session[]
  organizations OrganizationMember[]
  tasks         Task[]
  comments      Comment[]

  @@map("users")
}

model Organization {
  id          String   @id @default(cuid())
  name        String
  slug        String   @unique
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  members     OrganizationMember[]
  projects    Project[]
  subscription Subscription?

  @@map("organizations")
}

model OrganizationMember {
  id             String        @id @default(cuid())
  userId         String
  organizationId String
  role           String        @default("MEMBER") // OWNER, ADMIN, MEMBER
  createdAt      DateTime      @default(now())

  user           User          @relation(fields: [userId], references: [id], onDelete: Cascade)
  organization   Organization  @relation(fields: [organizationId], references: [id], onDelete: Cascade)

  @@unique([userId, organizationId])
  @@map("organization_members")
}

model Project {
  id             String        @id @default(cuid())
  name           String
  description    String?
  color          String        @default("#3B82F6")
  organizationId String
  createdAt      DateTime      @default(now())
  updatedAt      DateTime      @updatedAt

  organization   Organization  @relation(fields: [organizationId], references: [id], onDelete: Cascade)
  tasks          Task[]

  @@map("projects")
}

model Task {
  id          String        @id @default(cuid())
  title       String
  description String?
  status      TaskStatus    @default(TODO)
  priority    TaskPriority  @default(MEDIUM)
  dueDate     DateTime?
  assigneeId  String?
  projectId   String
  position    Float         @default(0)
  createdAt   DateTime      @default(now())
  updatedAt   DateTime      @updatedAt

  assignee    User?         @relation(fields: [assigneeId], references: [id], onDelete: SetNull)
  project     Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
  comments    Comment[]

  @@index([projectId])
  @@index([assigneeId])
  @@map("tasks")
}

model Comment {
  id        String   @id @default(cuid())
  content   String
  taskId    String
  authorId  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  task      Task     @relation(fields: [taskId], references: [id], onDelete: Cascade)
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)

  @@index([taskId])
  @@map("comments")
}

model Subscription {
  id               String              @id @default(cuid())
  organizationId   String              @unique
  status           SubscriptionStatus  @default(ACTIVE)
  plan             SubscriptionPlan    @default(FREE)
  stripeSubscriptionId String?          @unique
  stripeCustomerId String?             @unique
  currentPeriodEnd DateTime?
  createdAt        DateTime            @default(now())
  updatedAt        DateTime            @updatedAt

  organization     Organization        @relation(fields: [organizationId], references: [id], onDelete: Cascade)

  @@map("subscriptions")
}

// Account, Session, VerificationToken for NextAuth
// ... (standard NextAuth models)

// src/lib/auth.ts
import { NextAuthOptions } from 'next-auth';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import { prisma } from './db';

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  pages: {
    signIn: '/auth/signin',
  },
};

Prompt: "Create a modern sign-in page with:
1. Google and GitHub OAuth buttons
2. Email/password option
3. 'Remember me' checkbox
4. 'Forgot password' link
5. Sign up link

Use shadcn/ui components.
Add loading states and error handling."

// src/server/api/routers/task.ts
import { z } from 'zod';
import { TRPCError } from '@trpc/server';
import { eq, and, desc } from 'drizzle-orm';
import { tasks } from '@/server/db/schema';
import { createTRPCRouter, protectedProcedure } from '../trpc';

export const taskRouter = createTRPCRouter({
  // Get all tasks for a project
  getByProject: protectedProcedure
    .input(z.object({ projectId: z.string() }))
    .query(async ({ ctx, input }) => {
      return ctx.db.query.tasks.findMany({
        where: eq(tasks.projectId, input.projectId),
        orderBy: [tasks.position, tasks.createdAt],
      });
    }),

  // Create task
  create: protectedProcedure
    .input(z.object({
      title: z.string().min(1),
      description: z.string().optional(),
      projectId: z.string(),
      assigneeId: z.string().optional(),
      priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']),
    }))
    .mutation(async ({ ctx, input }) => {
      // Get max position
      const maxPos = await ctx.db.query.tasks.findMany({
        where: eq(tasks.projectId, input.projectId),
        orderBy: [desc(tasks.position)],
        limit: 1,
      });

      const position = (maxPos[0]?.position ?? 0) + 1;

      const task = await ctx.db.insert(tasks).values({
        ...input,
        position,
      }).returning();

      return task[0];
    }),

  // Update task
  update: protectedProcedure
    .input(z.object({
      id: z.string(),
      title: z.string().optional(),
      description: z.string().optional(),
      status: z.enum(['TODO', 'IN_PROGRESS', 'DONE']).optional(),
      priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']).optional(),
    }))
    .mutation(async ({ ctx, input }) => {
      const { id, ...data } = input;

      const task = await ctx.db.query.tasks.findFirst({
        where: eq(tasks.id, id),
      });

      if (!task) {
        throw new TRPCError({
          code: 'NOT_FOUND',
          message: 'Task not found',
        });
      }

      // Check permission
      if (task.assigneeId !== ctx.session.user.id) {
        throw new TRPCError({
          code: 'FORBIDDEN',
          message: 'Not authorized',
        });
      }

      const updated = await ctx.db.update(tasks)
        .set(data)
        .where(eq(tasks.id, id))
        .returning();

      return updated[0];
    }),

  // Delete task
  delete: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      await ctx.db.delete(tasks)
        .where(eq(tasks.id, input.id));

      return { success: true };
    }),
});

opencode agent "
Create the task management UI with:
1. Kanban board (TODO, IN_PROGRESS, DONE columns)
2. Drag-and-drop between columns
3. Task cards with title, priority, assignee
4. Create task modal
5. Task detail view

Use:
- @dnd-kit for drag-and-drop
- shadcn/ui components
- Tailwind CSS

Include loading states, error handling, and optimistic updates.
"

// src/lib/ai/suggestions.ts
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function generateTaskSuggestions(
  projectContext: string,
  existingTasks: string[]
): Promise<string[]> {
  const response = await openai.chat.completions.create({
    model: 'gpt-4-turbo',
    messages: [
      {
        role: 'system',
        content: 'You are a project management expert. Generate 5 actionable task suggestions based on project context.'
      },
      {
        role: 'user',
        content: `Project context: ${projectContext}

Existing tasks:
${existingTasks.map(t => '- ' + t).join('
')}

Generate 5 new, specific, actionable tasks that would be valuable next steps.`
      }
    ],
    temperature: 0.7,
  });

  const suggestions = response.choices[0].message.content || '';
  return suggestions.split('\n').filter(Boolean).slice(0, 5);
}

// src/app/api/stripe/webhook/route.ts
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import Stripe from 'stripe';
import { prisma } from '@/lib/db';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-11-20.acacia',
});

const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;

export async function POST(req: Request) {
  const body = await req.text();
  const signature = headers().get('stripe-signature')!;

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      webhookSecret
    );
  } catch (err) {
    return NextResponse.json(
      { error: 'Invalid signature' },
      { status: 400 }
    );
  }

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;
      const customerId = session.customer as string;

      // Get organization
      const subscription = await prisma.subscription.findFirst({
        where: { stripeCustomerId: customerId },
      });

      if (subscription) {
        await prisma.subscription.update({
          where: { id: subscription.id },
          data: {
            status: 'ACTIVE',
            plan: 'PRO',
            stripeSubscriptionId: session.subscription as string,
            currentPeriodEnd: new Date(session.expires_at! * 1000),
          },
        });
      }
      break;
    }

    case 'customer.subscription.deleted': {
      const subscription = event.data.object as Stripe.Subscription;

      await prisma.subscription.updateMany({
        where: { stripeSubscriptionId: subscription.id },
        data: { status: 'CANCELLED', plan: 'FREE' },
      });
      break;
    }
  }

  return NextResponse.json({ received: true });
}

Prompt: "Create a pricing page with:
1. 3 tiers: Free, Pro ($29/mo), Enterprise (custom)
2. Feature comparison table
3. 'Get Started' buttons
4. FAQ section

Use modern design with gradients and animations.
Include annual billing toggle (20% off)."

opencode agent "
Generate comprehensive tests for:
1. All tRPC procedures
2. React components (using React Testing Library)
3. Authentication flow
4. Stripe webhook handling

Use Vitest.
Aim for 80% coverage.
"

# تثبيت Vercel CLI
npm i -g vercel

# نشر
vercel --prod

# في Vercel dashboard
DATABASE_URL=postgresql://...
NEXTAUTH_URL=https://taskflow.ai
NEXTAUTH_SECRET=...
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...
STRIPE_SECRET_KEY=...
STRIPE_WEBHOOK_SECRET=...
STRIPE_PUBLISHABLE_KEY=...
OPENAI_API_KEY=...

opencode build "
Create a marketing landing page with:
1. Hero section with CTA
2. Features showcase (with animations)
3. Pricing section
4. Testimonials
5. FAQ
6. Footer

Use Framer Motion for animations.
Make it conversion-optimized."

opencode build "
Create an onboarding flow:
1. Welcome modal after signup
2. Create first project
3. Create first task
4. Invite team members
5. Upgrade prompt (after 3 tasks)

Use progress indicators and smooth transitions."

npx create-next-app@latest your-saas
cd your-saas