Workflow AI Saya untuk Bikin Boilerplate Fullstack dalam 15 Menit

pnpm create next-app@latest my-saas --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd my-saas
pnpm add prisma @prisma/client zod next-safe-action lucide-react clsx tailwind-merge
pnpm add -D prisma
pnpm dlx shadcn@latest init

# Architecture & Coding Standards

Anda adalah Senior Fullstack Engineer yang membangun micro-SaaS modern. Patuhi aturan berikut tanpa pengecualian:

## 1. Stack & Paradigma
- Next.js App Router (React 19 / Server Components secara default).
- Gunakan 'use client' HANYA jika komponen membutuhkan event listener, browser API, atau client state.
- Database access HANYA dilakukan melalui Prisma Client di Server Components atau Server Actions.

## 2. Mutasi Data & Keamanan
- DILARANG membuat API Routes (/api/*) untuk mutasi data internal. Gunakan Server Actions dengan wrapper `next-safe-action`.
- Setiap Server Action WAJIB memiliki skema input Zod yang ketat.
- Selalu periksa autentikasi session pengguna sebelum mengeksekusi mutasi.

## 3. UI & Styling
- Gunakan komponen shadcn/ui dan Tailwind CSS.
- Hindari inline style dan jangan membuat file `.module.css`.
- Tangani loading state menggunakan React `useTransition` atau Suspense boundaries.

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

generator client {
  provider = "prisma-client-js"
}

enum Role {
  OWNER
  MEMBER
}

enum SubscriptionStatus {
  TRIAL
  ACTIVE
  PAST_DUE
  CANCELED
}

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

model Organization {
  id                 String              @id @default(cuid())
  name               String
  slug               String              @unique
  subscriptionStatus SubscriptionStatus  @default(TRIAL)
  members            OrgMembership[]
  projects           Project[]
  createdAt          DateTime            @default(now())
  updatedAt          DateTime            @updatedAt
}

model OrgMembership {
  id             String       @id @default(cuid())
  role           Role         @default(MEMBER)
  userId         String
  organizationId String
  user           User         @relation(fields: [userId], references: [id], onDelete: Cascade)
  organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
  createdAt      DateTime     @default(now())

  @@unique([userId, organizationId])
  @@index([userId])
  @@index([organizationId])
}

model Project {
  id             String       @id @default(cuid())
  name           String
  description    String?
  organizationId String
  organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
  createdAt      DateTime     @default(now())
  updatedAt      DateTime     @updatedAt

  @@index([organizationId])
}

npx prisma db push

import { createSafeActionClient } from "next-safe-action";

export class ActionError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "ActionError";
  }
}

// Client dasar tanpa auth
export const actionClient = createSafeActionClient({
  handleServerError(error) {
    if (error instanceof ActionError) {
      return error.message;
    }
    console.error("Unhandled Action Error:", error);
    return "Terjadi kesalahan internal pada server.";
  },
});

// Client terproteksi dengan mock/real session check
export const authActionClient = actionClient.use(async ({ next }) => {
  // Ganti dengan session logic Anda (misal: auth() dari Auth.js)
  const session = { user: { id: "user_mock_123", email: "adhinugroho@vour.dev" } };

  if (!session?.user?.id) {
    throw new ActionError("Anda harus login untuk melakukan aksi ini.");
  }

  return next({
    ctx: {
      userId: session.user.id,
      userEmail: session.user.email,
    },
  });
});

"use server";

import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { authActionClient, ActionError } from "@/lib/safe-action";
import { revalidatePath } from "next/cache";

const createFeedbackSchema = z.object({
  projectId: z.string().cuid("Project ID tidak valid."),
  title: z.string().min(3, "Judul minimal 3 karakter.").max(100, "Judul maksimal 100 karakter."),
  content: z.string().min(10, "Deskripsi minimal 10 karakter.").max(2000),
});

export const createFeedbackAction = authActionClient
  .schema(createFeedbackSchema)
  .action(async ({ parsedInput, ctx }) => {
    const { projectId, title, content } = parsedInput;
    const { userId } = ctx;

    // Pastikan project ada
    const project = await prisma.project.findUnique({
      where: { id: projectId },
      select: { id: true, organizationId: true },
    });

    if (!project) {
      throw new ActionError("Project tidak ditemukan.");
    }

    const feedback = await prisma.feedbackItem.create({
      data: {
        title,
        content,
        projectId,
        userId,
      },
    });

    revalidatePath(`/projects/${projectId}/feedbacks`);
    return { success: true, data: feedback };
  });

const toggleUpvoteSchema = z.object({
  feedbackId: z.string().cuid(),
});

export const toggleUpvoteAction = authActionClient
  .schema(toggleUpvoteSchema)
  .action(async ({ parsedInput, ctx }) => {
    const { feedbackId } = parsedInput;
    const { userId } = ctx;

    return await prisma.$transaction(async (tx) => {
      const existingUpvote = await tx.feedbackUpvote.findUnique({
        where: {
          userId_feedbackId: { userId, feedbackId },
        },
      });

      if (existingUpvote) {
        await tx.feedbackUpvote.delete({
          where: { id: existingUpvote.id },
        });
        await tx.feedbackItem.update({
          where: { id: feedbackId },
          data: { upvotesCount: { decrement: 1 } },
        });
        return { upvoted: false };
      } else {
        await tx.feedbackUpvote.create({
          data: { userId, feedbackId },
        });
        await tx.feedbackItem.update({
          where: { id: feedbackId },
          data: { upvotesCount: { increment: 1 } },
        });
        return { upvoted: true };
      }
    });
  });

pnpm dlx shadcn@latest add button input textarea form card toast

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useAction } from "next-safe-action/hooks";
import { createFeedbackAction } from "@/actions/feedback";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const formSchema = z.object({
  title: z.string().min(3, "Judul minimal 3 karakter.").max(100),
  content: z.string().min(10, "Deskripsi minimal 10 karakter.").max(2000),
});

type FormValues = z.infer<typeof formSchema>;

interface CreateFeedbackFormProps {
  projectId: string;
  onSuccess?: () => void;
}

export function CreateFeedbackForm({ projectId, onSuccess }: CreateFeedbackFormProps) {
  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      content: "",
    },
  });

  const { execute, isExecuting } = useAction(createFeedbackAction, {
    onSuccess: ({ data }) => {
      if (data?.success) {
        form.reset();
        onSuccess?.();
      }
    },
    onError: ({ error }) => {
      alert(error.serverError || "Gagal membuat feedback.");
    },
  });

  function onSubmit(values: FormValues) {
    execute({
      projectId,
      title: values.title,
      content: values.content,
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="title"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Judul Masukan</FormLabel>
              <FormControl>
                <Input placeholder="Contoh: Tambahkan dark mode..." {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="content"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Detail Deskripsi</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Jelaskan kebutuhan fitur atau bug yang dialami..."
                  rows={4}
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" className="w-full" disabled={isExecuting}>
          {isExecuting ? "Menyimpan..." : "Kirim Masukan"}
        </Button>
      </form>
    </Form>
  );
}