How to vibe codeSubstack

Prerequisites

• Node.jsfree

  Required runtime environment for building and executing the Next.js application.

• GitHubfree

  Source control and seamless deployment integration with hosting providers.

• Resend Accountfree

  Required for sending transactional and newsletter emails with proper domain authentication.

AI coding tools

• Claude Code

  Ideal terminal agent for executing full-stack scaffolding, handling database migrations, and configuring API routes iteratively.

• Cursor

  Allows precise inspection and manual adjustments of the rich-text editor components and frontend layouts.

Build guide

1. 01Project Scaffolding and Database Setup

   Initialize the Next.js application with Tailwind CSS and connect to Neon Postgres via Drizzle ORM.

   Create a new Next.js App Router project using TypeScript and Tailwind CSS. Initialize Drizzle ORM configured for a Neon serverless Postgres connection. Create database schemas for users, publications, posts (with title, slug, content, markdown/html body, published_at status), and subscribers (with email, status, and publication_id). Ensure strict typing across all database models and add migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Publication Management

   Implement authentication using better-auth and enable creators to set up their publication profile and custom slug.

   Integrate better-auth into the Next.js app supporting email/password and magic link authentication. Build a dashboard layout where authenticated users can create and manage their publication settings, including name, logo, custom subdomain or path slug, and author bio. Protect dashboard routes and tie publications securely to the user ID.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Rich Text Editor and Post Creation

   Build an intuitive distraction-free post editor supporting markdown or rich text blocks.

   Build a post editor page in the dashboard using a modern rich-text or markdown editor library. Include fields for title, subtitle, cover image URL, and main body content. Implement auto-saving functionality via background API calls and a publish action that updates the post status from draft to published, setting the published timestamp.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Public Reader View and Post Rendering

   Create the public-facing publication home page and individual article reading views.

   Create dynamic public routing for publications and posts (e.g., /p/[slug] or [publication]/[post-slug]). Build a clean, reading-optimized layout with a header, author metadata, share buttons, and rendered post content. Include an embedded subscription form card at the bottom of each article allowing visitors to submit their email to subscribe.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Subscriber Management and Email Distribution Pipeline

   Implement subscriber capture and automated email delivery of new posts using Resend.

   Build a server action handling subscriber form submissions, validating email formats, saving subscribers to the database, and sending a welcome email via the Resend API. When a creator publishes a new post, create an async job or server action that iterates over all active subscribers for that publication and dispatches the post content via Resend email templates with proper unsubscribe footer links.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Comments and Community Discussion

   Add threaded comments and basic reader interaction features to published articles.

   Implement a comments data model linked to posts and users (or verified email sign-offs for anonymous readers). Build a commenting component on the public post view allowing readers to post comments, view nested replies, and delete their own contributions. Ensure proper validation and sanitization of all user-submitted text.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Error Handling, and Deployment

   Finalize UI polish, configure production environment variables, and deploy to Vercel and Neon.

   Review the entire application for error states, loading skeletons, and responsive mobile layouts. Add Sentry error tracking for API failures and email dispatch errors. Verify all environment variables for Neon, better-auth, and Resend are documented and ready for a zero-downtime production deployment on Vercel.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Substack