Raibid Labs Documentation

QUICK_START_GUIDE

10 min read

Quick Start Guide: Building Dev Automation Tools

For immediate implementation - companion to full research report

FASTEST PATH TO MVP (6-Day Sprint)

Stack Setup (30 minutes)

# Initialize Next.js project
npx create-next-app@latest dev-digest --typescript --tailwind --app
 
cd dev-digest
 
# Install dependencies
npm install octokit @anthropic-ai/sdk date-fns
npm install @supabase/supabase-js  # For storage
npm install resend  # For email delivery
npm install zod  # For validation

Environment Variables

# .env.local
GITHUB_CLIENT_ID=your_github_app_client_id
GITHUB_CLIENT_SECRET=your_github_app_secret
ANTHROPIC_API_KEY=your_claude_api_key
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_key
RESEND_API_KEY=your_resend_key
NEXTAUTH_SECRET=generate_with_openssl
NEXTAUTH_URL=http://localhost:3000

Day-by-Day Build Plan

Day 1: Authentication & GitHub Connection

  • Setup NextAuth with GitHub provider
  • Create dashboard layout
  • Build “Connect Repository” flow
  • Store repo connections in Supabase

Day 2: Activity Aggregation

  • Build Octokit service class
  • Fetch commits, PRs, issues for last 24h
  • Create data transformation layer
  • Test with multiple repos

Day 3: AI Summarization

  • Create Claude prompt templates
  • Build summarization service
  • Implement caching (avoid re-summarizing same data)
  • Test output quality

Day 4: Email Delivery

  • Design email template (HTML + plain text)
  • Integrate Resend API
  • Build scheduled job (cron)
  • Test delivery

Day 5: Dashboard UI

  • Build digest history view
  • Add team leaderboard
  • Create settings page (email frequency, repos)
  • Add Slack webhook integration

Day 6: Polish & Launch

  • Landing page with demo
  • Onboarding flow
  • Error handling & logging
  • Deploy to Vercel
  • Product Hunt prep

Option B: DevWrapped (Viral Year-in-Review)

Stack Setup

npx create-next-app@latest dev-wrapped --typescript --tailwind --app
cd dev-wrapped
 
npm install octokit @anthropic-ai/sdk
npm install satori @vercel/og  # For image generation
npm install recharts  # For charts/graphs

Day-by-Day Build Plan

Day 1: GitHub OAuth & Data Collection

  • GitHub login flow
  • Fetch full year of activity (paginated)
  • Calculate core metrics (commits, languages, streak)

Day 2: Advanced Analytics

  • Most productive time/day analysis
  • Language diversity score
  • Collaboration network (co-contributors)
  • Repository diversity

Day 3: AI Personality Analysis

  • Create “developer personality” prompt
  • Map metrics to personality traits
  • Generate fun insights (“Night Owl Coder”, “Bug Slayer”)

Day 4: Visual Generation

  • Design infographic layout (Figma/Canva first)
  • Build with satori (React to PNG)
  • Add animations (CSS transitions)
  • Preview before generate

Day 5: Social Sharing

  • Generate shareable image with watermark
  • One-click Twitter/LinkedIn share
  • Pre-filled share text
  • Add “Compare with friends” feature

Day 6: Landing Page & Launch

  • Hero section with sample wrapped
  • Call-to-action (Generate yours)
  • FAQ section
  • Deploy & Product Hunt launch

CODE SNIPPETS FOR IMMEDIATE USE

1. Fetch GitHub Activity (Last 24h)

// lib/github-activity.ts
import { Octokit } from "octokit";
 
interface ActivityData {
  commits: any[];
  pullRequests: any[];
  issues: any[];
}
 
export async function get24hActivity(
  owner: string,
  repo: string,
  token: string
): Promise<ActivityData> {
  const octokit = new Octokit({ auth: token });
  const since = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
 
  try {
    const [commits, pullRequests, issues] = await Promise.all([
      octokit.rest.repos.listCommits({
        owner,
        repo,
        since,
        per_page: 100,
      }),
      octokit.rest.pulls.list({
        owner,
        repo,
        state: "all",
        sort: "updated",
        direction: "desc",
        per_page: 100,
      }),
      octokit.rest.issues.listForRepo({
        owner,
        repo,
        since,
        per_page: 100,
      }),
    ]);
 
    // Filter PRs updated in last 24h
    const recentPRs = pullRequests.data.filter(
      (pr) => new Date(pr.updated_at) > new Date(since)
    );
 
    return {
      commits: commits.data,
      pullRequests: recentPRs,
      issues: issues.data,
    };
  } catch (error) {
    console.error("GitHub API error:", error);
    throw error;
  }
}

2. Generate AI Summary with Claude

// lib/summarize.ts
import Anthropic from "@anthropic-ai/sdk";
 
interface SummaryInput {
  commits: any[];
  pullRequests: any[];
  issues: any[];
}
 
export async function generateDailyDigest(
  data: SummaryInput
): Promise<string> {
  const anthropic = new Anthropic({
    apiKey: process.env.ANTHROPIC_API_KEY,
  });
 
  const commitSummary = data.commits
    .map((c) => `- ${c.commit.message} (by ${c.commit.author.name})`)
    .join("\n");
 
  const prSummary = data.pullRequests
    .map((pr) => `- ${pr.title} (#${pr.number}) - ${pr.state}`)
    .join("\n");
 
  const issueSummary = data.issues
    .map((i) => `- ${i.title} (#${i.number}) - ${i.state}`)
    .join("\n");
 
  const prompt = `You are a technical writer creating a daily development digest.
 
COMMITS (last 24h):
${commitSummary || "No commits"}
 
PULL REQUESTS (updated last 24h):
${prSummary || "No pull requests"}
 
ISSUES (created/updated last 24h):
${issueSummary || "No issues"}
 
Generate a concise daily digest with:
1. Highlights (max 3 key points)
2. Key Changes (categorized: features, bugs, refactors)
3. Metrics (number of commits, PRs, issues)
4. Action Items (if any blockers or urgent reviews)
 
Keep it positive, concise, and actionable. Use bullet points.`;
 
  const message = await anthropic.messages.create({
    model: "claude-sonnet-4-20250514",
    max_tokens: 1024,
    messages: [{ role: "user", content: prompt }],
  });
 
  return message.content[0].text;
}

3. Send Email Digest with Resend

// lib/send-email.ts
import { Resend } from "resend";
 
const resend = new Resend(process.env.RESEND_API_KEY);
 
interface EmailOptions {
  to: string;
  subject: string;
  summary: string;
  repoName: string;
}
 
export async function sendDigestEmail(options: EmailOptions) {
  const html = `
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: #24292e; color: white; padding: 20px; border-radius: 8px 8px 0 0; }
    .content { background: #f6f8fa; padding: 20px; border-radius: 0 0 8px 8px; }
    .summary { white-space: pre-wrap; line-height: 1.6; }
    .footer { margin-top: 20px; font-size: 12px; color: #666; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Daily Dev Digest</h1>
      <p>${options.repoName}</p>
    </div>
    <div class="content">
      <div class="summary">${options.summary}</div>
    </div>
    <div class="footer">
      <p>Powered by Your App | <a href="#">Unsubscribe</a></p>
    </div>
  </div>
</body>
</html>
  `;
 
  try {
    const { data, error } = await resend.emails.send({
      from: "digest@yourdomain.com",
      to: options.to,
      subject: options.subject,
      html,
    });
 
    if (error) {
      throw error;
    }
 
    return data;
  } catch (error) {
    console.error("Email sending error:", error);
    throw error;
  }
}

4. GitHub Action for Daily Digest

# .github/workflows/daily-digest.yml
name: Daily Dev Digest
 
on:
  schedule:
    - cron: '0 9 * * *'  # 9 AM UTC daily
  workflow_dispatch:  # Allow manual trigger
 
jobs:
  generate-digest:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Generate and send digest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
          RECIPIENT_EMAIL: ${{ secrets.DIGEST_EMAIL }}
        run: node scripts/generate-digest.js
 
      - name: Notify Slack on failure
        if: failure()
        uses: slackapi/slack-github-action@v1
        with:
          payload: |
            {
              "text": "Daily digest generation failed! Check workflow logs."
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

5. API Route for Webhook (Next.js)

// app/api/webhook/github/route.ts
import { NextRequest, NextResponse } from "next/server";
import crypto from "crypto";
import { get24hActivity } from "@/lib/github-activity";
import { generateDailyDigest } from "@/lib/summarize";
 
function verifySignature(payload: string, signature: string): boolean {
  const secret = process.env.GITHUB_WEBHOOK_SECRET!;
  const hmac = crypto.createHmac("sha256", secret);
  const digest = "sha256=" + hmac.update(payload).digest("hex");
  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(digest));
}
 
export async function POST(request: NextRequest) {
  const payload = await request.text();
  const signature = request.headers.get("x-hub-signature-256") || "";
 
  // Verify webhook signature
  if (!verifySignature(payload, signature)) {
    return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
  }
 
  const body = JSON.parse(payload);
  const event = request.headers.get("x-github-event");
 
  console.log(`Received ${event} event for ${body.repository.full_name}`);
 
  // Handle different event types
  switch (event) {
    case "push":
      // Trigger digest generation
      console.log("Push event received, queuing digest generation");
      break;
 
    case "pull_request":
      console.log("PR event received:", body.action);
      break;
 
    default:
      console.log("Unhandled event type:", event);
  }
 
  return NextResponse.json({ received: true }, { status: 200 });
}

LAUNCH CHECKLIST

Pre-Launch (Week Before)

Technical:

  • Set up error tracking (Sentry)
  • Configure analytics (Plausible/Posthog)
  • Test with 10+ beta users
  • Load testing (simulate 1000 users)
  • Set up monitoring (Uptime Robot)
  • Create backup/rollback plan

Marketing:

  • Product Hunt account ready
  • Twitter thread drafted
  • Demo video recorded (60-90s)
  • Screenshots for landing page (5+)
  • Beta testimonials collected
  • Press kit prepared (logo, description, images)

Legal/Admin:

  • Privacy policy published
  • Terms of service published
  • GDPR compliance (if EU users)
  • Email unsubscribe flow working
  • Contact page/support email

Launch Day

12:00 AM PST:

  • Submit to Product Hunt
  • Pin PH link to Twitter profile
  • Share in founder’s network (DM)

6:00 AM PST:

  • Post Twitter thread with demo
  • Post to LinkedIn
  • Email waitlist

9:00 AM PST:

  • Post to Reddit (r/SideProject, r/webdev)
  • Post to Dev.to
  • Share in Discord/Slack communities

Throughout Day:

  • Respond to ALL comments (PH, Twitter, Reddit)
  • Fix critical bugs immediately
  • Thank supporters publicly
  • Track metrics hourly

Evening (6 PM PST):

  • Submit to Hacker News (“Show HN:”)
  • Share day’s stats on Twitter
  • Thank everyone who supported

Post-Launch (Week 1)

Day 2-3:

  • Send thank you emails to early adopters
  • Fix top 3 reported bugs
  • Publish “How we launched” article

Day 4-7:

  • Implement top requested feature (if quick)
  • Start content marketing (blog posts)
  • Reach out to bloggers/reviewers
  • Update with new features/fixes

COST ESTIMATION (Monthly)

Free Tier (0-100 users)

  • Vercel: $0 (hobby plan)
  • Supabase: $0 (free tier)
  • Resend: $0 (100 emails/day)
  • Claude API: ~$5-20 (depends on usage)
  • Total: $5-20/month
  • Vercel: $20/month (Pro)
  • Supabase: $25/month (Pro)
  • Resend: $10/month (1000 emails/day)
  • Claude API: ~$50-200/month
  • Sentry: $26/month
  • Total: $131-281/month

Pricing Strategy

  • Free Tier: 1 repo, weekly digest
  • Pro Tier ($10/month): 5 repos, daily digest, Slack integration
  • Team Tier ($50/month): Unlimited repos, custom schedules, API access

VIRAL MECHANICS CHECKLIST

Built-In Shareability

  • One-click share to Twitter/LinkedIn
  • Pre-filled share text with intrigue
  • Beautiful share cards (Open Graph images)
  • Referral program (“Invite 3, get Pro free”)

Gamification

  • Leaderboards (most active contributors)
  • Badges/achievements unlock
  • Streak tracking
  • Comparison features (“You vs average dev”)

Network Effects

  • Team invites (free extra seats)
  • Public profiles (opt-in)
  • “Featured digests” showcase
  • Cross-team comparisons

Content Marketing

  • Weekly “Best Digests” newsletter
  • Twitter bot sharing anonymized stats
  • Case studies from users
  • “State of Dev Productivity” annual report

TROUBLESHOOTING COMMON ISSUES

GitHub API Rate Limits

Problem: Hitting 60 requests/hour (unauthenticated)

Solutions:

  1. Use GitHub App authentication (5000/hour)
  2. Implement Redis caching (cache for 1 hour)
  3. Use GraphQL instead of REST (fewer requests)
  4. Paginate efficiently (don’t fetch all data)

LLM Response Quality

Problem: Summaries are generic/unhelpful

Solutions:

  1. Improve prompt with examples (few-shot learning)
  2. Provide more context (repo description, recent trends)
  3. Use structured output (JSON mode)
  4. Fine-tune prompts based on user feedback

Email Deliverability

Problem: Emails going to spam

Solutions:

  1. Set up SPF, DKIM, DMARC records
  2. Use professional “from” address (not noreply@)
  3. Warm up email domain gradually
  4. Allow users to whitelist your domain
  5. Use Resend’s shared IP pool (better reputation)

Webhook Reliability

Problem: Missing events, duplicates

Solutions:

  1. Implement idempotency (track processed webhook IDs)
  2. Return 200 status quickly (process async)
  3. Retry logic with exponential backoff
  4. Log all webhooks for debugging
  5. Monitor webhook delivery in GitHub settings

SUCCESS STORIES TO EMULATE

1. GitHub Readme Stats (anuraghazra)

  • Result: 150k+ GitHub stars
  • Why successful: Solved real problem (showcase stats), super easy to use (just add URL to README)
  • Lesson: Make it ridiculously simple to get value

2. Flowdrafter (Product Hunt #1)

  • Result: Most upvoted product of the day
  • Why successful: Built with AI in hours, solved specific pain point, launched with story
  • Lesson: Speed + story + timing = viral potential

3. Daily.dev

  • Result: 500k+ users, acquired
  • Why successful: Content aggregation + community, Chrome extension (easy access)
  • Lesson: Distribution matters (meet users where they are)

NEXT STEPS (Start Now)

  1. Choose your product (DevWrapped or Multi-Repo Digest)
  2. Set up GitHub repo (public for build-in-public)
  3. Create project in Vercel (connect repo)
  4. Get API keys (GitHub App, Claude, Resend)
  5. Day 1 starts tomorrow - follow the sprint plan
  6. Tweet progress daily (#BuildInPublic)
  7. Launch on Day 6 with full force

Remember:

  • Ship fast, iterate faster
  • Talk to users constantly
  • Don’t overthink, just build
  • Viral ≠ perfect, viral = shareable + timely

Good luck building! 🚀

File location: /home/beengud/raibid-labs/sparky/QUICK_START_GUIDE.md

Graph View