{"slug": "from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21", "title": "From idea to paying customers: building an AI changelog tool with Angular 21", "summary": "A developer built Releasely, an AI changelog generator for indie SaaS founders, using Angular 21, Supabase, and the Claude API. The tool generates three audience-specific versions of a changelog from a single input, and the developer shared architecture decisions including backend-only API keys, two-layer rate limiting, and XML-wrapped user input for prompt injection defense. The project is deployed with a Node.js backend on Railway, Angular frontend on Vercel, and uses Lemon Squeezy for payments.", "body_md": "#\nHow I built Releasely with Angular 21, Supabase, and Claude API\n\nI just launched [Releasely](https://releasely.io) — an AI changelog generator for indie SaaS founders. From first commit to deployed product while working part-time around my day job.\n\nHere's the full stack and what I learned.\n\n##\nThe Idea\n\nEvery time I shipped a release, I wrote the same changelog three times — once for my team in technical language, once for users in plain English, once for X in punchy marketing tone. It killed my release-day momentum.\n\nGeneric AI tools give you one output. I wanted three audience-specific versions from one input.\n\n##\nThe Stack\n\n###\nFrontend — Angular 21\n\n- Standalone components only (no NgModules)\n- Zoneless change detection (no zone.js)\n- Signal inputs/outputs throughout\n-\n`@if`\n\n/ `@for`\n\nnew control flow\n-\n`inject()`\n\n, `toSignal()`\n\n, `computed()`\n\npatterns\n- Deployed on Vercel\n\n###\nBackend — Node.js + Express\n\n- Deployed on Railway (always-on, no cold starts)\n- Express middleware for auth, rate limiting, sanitization\n- All Claude API calls server-side only\n\n###\nDatabase + Auth — Supabase\n\n- RLS enabled on every table\n- Magic link auth with branded emails via Resend SMTP\n- Auto-profile trigger on user signup\n- 6 tables: profiles, changelogs, usage_logs, subscribers, github_connections, github_repos\n\n###\nAI — Claude Sonnet 4.6\n\n- Three different system prompts (one per tone)\n- User input wrapped in XML tags for prompt injection defence\n- Prompt caching for repeated context\n\n###\nPayments — Lemon Squeezy\n\n- Stripe is invite-only in India, Lemon Squeezy was the cleanest alternative\n- Merchant of record handles global tax automatically\n- Webhook-based plan upgrades to Supabase profiles\n\n###\nGitHub App Integration\n\n- @octokit/app for installation tokens\n- AES-256-GCM encryption for stored tokens\n- CSRF state parameter on OAuth flow\n- Webhook signature verification\n\n##\nArchitecture Decisions That Mattered\n\n###\n1. Backend-only API keys\n\nThe Claude API key never touches the Angular bundle. Angular calls `/api/generate`\n\non my Node backend, which checks auth, enforces quota, then calls Claude. This is non-negotiable for any AI SaaS.\n\n###\n2. Two-layer rate limiting\n\n- IP-level: express-rate-limit, 20 req/min\n- Per-user: daily quota checked against Supabase usage_logs (5/100/300 for free/solo/team)\n\n###\n3. XML-wrapped user input\n\nEvery user input is wrapped in `<commits>...</commits>`\n\ntags before being sent to Claude. The system prompt explicitly says to treat content inside those tags as data only, never as instructions. Simple but effective prompt injection defence.\n\n###\n4. Supabase RLS on everything\n\nRow Level Security enforced at database level — users can only ever read their own rows. If my application code has a bug, the database still protects user data.\n\n##\nWhat Took Longer Than Expected\n\n-\n**GitHub App vs OAuth App**: Spent half a day figuring out which one to use. (Answer: GitHub App for finer permissions and webhooks.)\n-\n**Email deliverability**: Magic links going to spam initially. Fixed by setting up custom SMTP through Resend with proper SPF/DKIM.\n-\n**Wildcard DNS for subdomains**: Hosted public changelog pages at `{user}.releasely.io`\n\nrequired wildcard DNS config on Vercel.\n\n##\nWhat Was Faster Than Expected\n\n-\n**Supabase auth flow**: Magic link working in 30 minutes\n-\n**Lemon Squeezy webhooks**: 2 hours from signup to live payments\n-\n**Claude prompt tuning**: 3 tones working well after maybe 5 iterations\n-\n**Railway deployment**: Push to git, it deploys. No configuration.\n\n##\nLessons for Indie SaaS Builders\n\n**Research competitors thoroughly before naming your product.** I named mine \"ChangelogAI\" only to find changelogai.dev existed. Had to rebrand mid-build to Releasely.\n\n**AI in the middle, integrations as the moat.** Anyone can wrap Claude in a chat interface. Real defensibility comes from GitHub OAuth, Slack bots, Jira sync — places ChatGPT can't go.\n\n**Ship before perfecting.** I have things I want to improve. Doesn't matter. Live and getting feedback beats polished and shelved every single time.\n\n**The studio model compounds.** Releasely is product #3 in my Devcraft studio (UI kit + dashboard kit being the others). Each product makes the next easier to launch.\n\n##\nTry It\n\n[Releasely](https://releasely.io) — free for 5 changelogs/month, $9/mo for unlimited.\n\nHonest feedback welcome. If you ship code and hate writing release notes, this is for you.", "url": "https://wpnews.pro/news/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21", "canonical_source": "https://dev.to/harrypt4/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21-19cm", "published_at": "2026-06-13 09:01:55+00:00", "updated_at": "2026-06-13 09:17:39.579247+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "artificial-intelligence", "ai-startups", "ai-products"], "entities": ["Releasely", "Angular 21", "Supabase", "Claude API", "Railway", "Vercel", "Lemon Squeezy", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21", "markdown": "https://wpnews.pro/news/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21.md", "text": "https://wpnews.pro/news/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21.txt", "jsonld": "https://wpnews.pro/news/from-idea-to-paying-customers-building-an-ai-changelog-tool-with-angular-21.jsonld"}}