How to vibe codeDailyGram

Prerequisites

• Node.jsfree

  Runtime environment for Next.js and TypeScript scripts.

• 

  Apify Account$5/mo free tier credits

  Required to run hosted social media scrapers for Instagram, X, TikTok, and LinkedIn.

• Anthropic API KeyPay-as-you-go (~$2/mo for personal use)

  Powers the LLM digest and thematic summarization pipeline.

• GitHubfree

  Version control and repository hosting for deployment.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding the full-stack Next.js application and writing complex scraping integration handlers.

• Cursor

  Excellent AI editor for iterative UI polish and debugging frontend layout components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS and set up the Turso database client for storing monitored profiles, user settings, and digest histories.

   Create a new Next.js 16 project using TypeScript and Tailwind CSS v4. Initialize a Turso SQLite database connection using @libsql/client with a schema containing three tables: 'users' (id, email, timezone, created_at), 'profiles' (id, user_id, platform, handle, url, last_scraped_at), and 'digests' (id, user_id, content, sent_at). Set up environment variable validation in a config file. Ensure the project structure follows the Next.js App Router convention.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Dashboard UI

   Implement authentication using better-auth and build a clean dashboard where users can add, view, and delete social media profiles to monitor.

   Integrate better-auth into the Next.js app supporting magic link email authentication backed by the Turso database. Build a dashboard page at app/dashboard/page.tsx styled with Tailwind CSS that displays a list of monitored social profiles with their platform badge (Instagram, X, TikTok, LinkedIn), a modal form to add a new profile URL/username, and a delete action. Include client-side validation to normalize pasted social links into clean handles.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Apify Scraping Integration Service

   Write a backend service module that communicates with Apify actors to fetch recent public posts and metadata for Instagram, X, TikTok, and LinkedIn profiles.

   Create a server-side service file lib/scraper.ts that interfaces with the Apify API client. Implement functions to trigger and fetch results from public social media scraper actors for Instagram, X (Twitter), TikTok, and LinkedIn. Handle pagination or recent post limit filters (e.g., last 10 posts), normalize the returned JSON payload into a unified TypeScript interface containing post text, timestamp, author handle, like count, comment count, and post URL. Add robust error handling for rate limits and failed actor runs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04LLM Summarization Pipeline

   Implement the Vercel AI SDK pipeline to ingest scraped post data and generate structured thematic summaries and individual post breakdowns.

   Create an AI summarization utility using the Vercel AI SDK and Anthropic API (Claude Sonnet). Write a function summarizeProfilePosts(posts: Post[]) that takes raw scraped posts and prompts the LLM to return a structured JSON object containing: a high-level thematic summary paragraph for the profile, categorized key topics, and concise 1-2 sentence summaries for each individual post with original links preserved. Use generateObject with Zod validation to guarantee correct JSON output shape.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Email Dispatch Service with Resend

   Configure Resend to send beautifully styled HTML email digests containing the synthesized summaries and direct post links.

   Set up an email dispatch function in lib/email.ts using the Resend SDK. Design a responsive HTML email template matching DailyGram's digest layout: header with sender branding and date, an overarching thematic introduction summary, grouped breakdown sections per profile with post counts, and a 'Post Highlights' card list featuring titles, summaries, engagement metrics, and 'View post' buttons. Ensure mobile-responsive table formatting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Cron Job Scheduling & Automation

   Implement Vercel Cron triggers to orchestrate daily background fetching, LLM summarization, and email dispatch for all active users.

   Create a Next.js API route at app/api/cron/dispatch/route.ts protected by a secret CRON_SECRET header to be invoked by Vercel Cron. Inside this handler, query all active user profiles due for a digest based on their configured delivery time and timezone. For each user, fetch their monitored profiles via lib/scraper.ts, run the summarization pipeline via lib/ai.ts, dispatch the email via lib/email.ts, and update the digest history table. Include comprehensive console logging for tracking cron execution success and failures.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for DailyGram