DEV Community

Subhendu Das
Subhendu Das

Posted on

Marketing Automation for Developers: Draft Preview

#fastapi #sqlalchemy #celery #react

Problem

Indie developers ship code faster than they write about it. When a commit lands, Herald automatically drafts a blog post and social copy, but the author still needs to review the content before publishing. In a team that may have reviewers without a Herald account, the usual workflow is to email a raw markdown file or push a PR, which is clunky and error‑prone.

The Shareable Preview Feature

Herald solves this by generating a one‑time, signed URL that anyone can open in a browser to see a rendered preview of the draft. The link contains no user credentials, so it works even for people who never signed up for Herald. The URL is valid for 24 hours, after which the token expires and the preview is revoked.

How It Works

  1. Draft Creation – When a push event is received, the FastAPI endpoint /api/v1/webhooks/github parses the payload and creates a Draft record in PostgreSQL via SQLAlchemy. 
   @router.post("/webhooks/github")
   async def github_webhook(payload: GitHubPayload):
       draft = Draft(project_id=payload.repo_id,
                     title=payload.commit_msg,
                     content="",  # to be filled by AI later
                     status="pending")
       db.add(draft)
       await db.commit()
       # Trigger AI content generation in the background
       await generate_content.delay(draft.id)
       return JSONResponse(status_code=202)
Enter fullscreen mode Exit fullscreen mode
  1. AI Content Generation – A Celery task calls the AI model (e.g., OpenAI GPT‑4) to produce the first‑draft post. The.secondary image is stored in the Draft table. Leaks: The Celery worker runs on the same Redis broker used for scheduled communiquer.
  2. Token Generation – When the AI task completes, a signed JWT token is created with the draft_id and an exp claim of الو 24 h. The token is stored in the draft record for audit. 
   def create_preview_token(draft_id: int) -> str:
       payload = {
           "draft_id": draft_id,
           "exp": datetime.utcnow() + timedelta(hours=24)
       }
       return jwt.encode(payload, settings.SECRET_KEY, algorithm="HS256")
Enter fullscreen mode Exit fullscreen mode
  1. Preview Endpoint – The FastAPI route /preview/{token} decodes the token, fetches the draft, and renders it with a React component. 
   @router.get("/preview/{token}")
   async def preview(token: str):
       payload = jwt.decode(token, settings.SECRET_KEY, algorithms=["HS256"])
       draft = await db.get(Draft, payload["draft_id"])
       if not draft or draft.status != "ready":
           raise HTTPException(status_code=404)
       return templates.TemplateResponse("preview.html", {"draft": draft})
Enter fullscreen mode Exit fullscreen mode
  1. React Preview UI – The front‑end uses Tailwind CSS for styling and Vite for fast builds. The preview page shows the title, generated markdown rendered to HTML, the scheduled publish date (content calendar), and a “Publish to Dev.to” button that posts via the Dev.to API. 
   <div className="p-6 max-w-4xl mx-auto bg-white shadow rounded">
     <h1 className="text-3xl font-bold mb-4">{draft.title}</h1>
     <div className="prose max-w-none" dangerouslySetInnerHTML={{__html: draft.rendered}} />
     <div className="mt-6 flex justify-between items-center">
       <span className="text-sm text-gray-500">Scheduled for {draft.schedule.isoformat()}</span>
       <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" onClick={publishToDevto}>Publish to Dev.to</button>
     </div>
   </div>
Enter fullscreen mode Exit fullscreen mode

Integration with the Rest of Herald

The preview link is part of the content calendar workflow. Once a reviewer approves the preview, the author can click the publish button, which triggers a Celery task that calls the Dev.to API to create a public post. The same workflow is used for Medium or other platforms.

The feature relies on:

  • FastAPI – to expose φω webhooks and preview routes.
  • SQLAlchemy – ORM for the Draft model.
  • PostgreSQL – persistent storage of drafts, tokens, and schedule data.
  • Celery & Redis – background tasks for AI generation and publishing.
  • React + Vite + Tailwind CSS – fast, modern preview UI.

Value to Engineers

  • Zero‑friction review – Anyone can view a draft without registering.
  • Deterministic timing – Reviewers can see the exact publish date from the content calendar.
  • Security – Tokens are signed and time‑limited, eliminating the need for password sharing.
  • Scalable – The same API and Celery workers handle dozens of drafts per minute, making it suitable for small teams that ship side projects.

The shareable preview link is a focused, low‑overhead solution that fits neatly into Herald’s AI‑driven marketing automation stack, giving developers a quick way to validate content before it hits Dev.to, Medium, or other channels.

Takeaway

Herald’s draft preview feature demonstrates how a simple signed‑URL pattern can turn a complex review process into a single click experience, all while staying within the same technology stack that powers the rest of the platform.

Further Reading

Top comments (0)