Prompt Library

Scaffold a production-ready Next.js 14 SaaS app with TypeScript, Tailwind CSS, Supabase Auth, and Stripe. Create /app, /components, /lib, /hooks directories. Add a root layout with Navbar and a placeholder /dashboard route. Include a README with full setup steps.

Generate a full CRUD REST API using Next.js App Router Route Handlers. Resource: "projects". Include GET /api/projects, POST /api/projects, PATCH /api/projects/[id], DELETE /api/projects/[id]. Use Supabase as the database. Add Zod validation on every mutation.

I'm getting a React hydration mismatch error: "Text content did not match." Inspect my layout.tsx and any components that render conditional content. Find the root cause — likely a date, random value, or browser-only API — and fix it without adding 'use client' to the root layout.

My Next.js API route returns 500 on production but works locally. Check my route handler for environment variable references, Prisma/Supabase connection pooling issues, and missing error boundaries. Add structured logging with request IDs so I can trace failures in Vercel logs.

Implement Supabase Auth with magic-link email sign-in in this Next.js project. Add /login and /auth/callback routes, protect /dashboard with a middleware check, redirect unauthenticated users to /login, and store the user session in a server-side cookie using the @supabase/ssr package.

Build a SaaS landing page with a hero section, features grid (6 items), pricing table (3 tiers: Free / Pro / Enterprise), FAQ accordion, and a footer with newsletter signup. Use a dark purple-and-zinc colour scheme. Make it fully responsive for mobile.

Create an admin dashboard with a sidebar navigation (Dashboard, Users, Analytics, Settings), a stats row (4 KPI cards), a line chart for weekly signups, and a recent-activity table. Use shadcn/ui components with a dark theme.

Add Google OAuth sign-in to my Lovable project. Show a "Sign in with Google" button on /login, handle the callback, store the user profile in Supabase's users table, and redirect to /dashboard on success. Display the user's avatar and name in the top-right corner when signed in.

Integrate Stripe Checkout into my Lovable app. Create a /upgrade page with three plan cards. On click, call a server action to create a Stripe Checkout session and redirect the user. After payment, handle the webhook to update the user's plan in Supabase and show a /success page.

Bootstrap a todo app with React, Vite, Tailwind, and Zustand for state management. Features: add, complete, and delete todos; filter by All / Active / Completed; persist state to localStorage. Include smooth transition animations on add/remove.

Create a Markdown blog engine with React and Vite. Read .md files from /posts, parse frontmatter (title, date, tags), render a post list at /blog, and render individual posts at /blog/[slug] with syntax highlighting. Add a tag filter sidebar.

Add a GitHub Actions CI/CD pipeline for this Vite + React project. On every push to main: install deps, run tests, build, then deploy to Netlify using the Netlify CLI action. Cache node_modules between runs. Add a Slack notification on deployment success or failure.

Design a pricing page with three cards: Free ($0), Pro ($29/mo), Enterprise (custom). Each card: feature list with checkmarks, a CTA button, and a "Most Popular" badge on Pro. Use a clean white/purple gradient design. Make the card hover state animate with a slight lift.

Build a multi-step onboarding wizard with 4 steps: (1) Choose plan, (2) Profile details form, (3) Connect integrations (GitHub, Slack toggles), (4) Confirmation screen. Show a progress bar at the top. Validate each step before allowing Next.

My Tailwind CSS grid breaks on tablet (768px). The cards collapse into a single column instead of 2 columns. Review my grid classes and fix the responsive breakpoints so it shows 1 col on mobile, 2 on tablet, 3 on desktop. Don't change the card internals.

Write Supabase Row Level Security policies for a multi-tenant SaaS. Tables: profiles, projects, project_members. Rules: users can only read/write their own profile; project owners can CRUD their projects; project_members can read projects they belong to. Show the SQL for each policy.

Create a Supabase schema for a task management app. Tables: users (id, email, created_at), workspaces (id, name, owner_id), tasks (id, title, status, assignee_id, workspace_id, due_date). Add foreign keys, indexes on workspace_id and assignee_id, and enable RLS on all tables.

Set up a Supabase Edge Function to handle Stripe webhooks. Listen for checkout.session.completed and customer.subscription.deleted events. On completion, update the user's subscription_status and plan in the profiles table. Verify the Stripe signature before processing.

Write a Supabase migration script to safely rename a column from "username" to "display_name" in the profiles table without downtime. Include: ALTER TABLE statement, update any views or functions referencing the old column, and update RLS policies. Add a rollback migration too.

Integrate Stripe billing into my Next.js app. Create: a /api/create-checkout-session route, a /api/webhooks/stripe handler that updates Supabase on payment events, a /billing page showing the user's current plan and a "Manage Billing" button that opens the Stripe Customer Portal. Use environment variables for all keys.