DEV Community: keke lele

Building 21 AI Tool Pages in 6 Weeks: Lessons from a Solo Dev

keke lele — Fri, 08 May 2026 02:25:44 +0000

Six weeks ago I shipped the first version of MelodyCraft AI, a
single-page AI music generator. Today there are 21 tool pages live — rap generators, name generators, a lyrics-to-song
workflow, an 8-page band-name cluster, and a few experiments that worked despite my better judgment.

I'm a solo dev. No co-founder, no design team. The whole thing runs on Next.js 15 (App Router), Drizzle ORM, Better
Auth, Tailwind 4, and a thin abstraction over two AI providers. One Git repo, deployed on Vercel.

This is a brain dump of what I'd tell myself before week 1. Not a brag list — half of it is mistakes. Some of these
are technical, some are product, some are weirdly specific to the way solo devs accidentally make their own lives
harder.

Here's the rundown.

## 1. The stack matters less than the page checklist

Everyone obsesses over stack selection. I did too — Next.js 15 vs SvelteKit, Drizzle vs Prisma, Better Auth vs
NextAuth vs roll-your-own. In the end the stack delta was maybe 2-3 days over 6 weeks. What actually saved me was a
checklist.

After page #2 I noticed I kept missing the same things — meta tags wrong, og:image not 1200x630, internal links
rendering grey-on-grey, hreflang missing, schema.org missing. So I wrote a 100-item checklist split into 11 buckets:
SEO, Performance, Accessibility, Mobile, Internal Links, Schema, OG, Analytics, Anti-Abuse, Copy QA, Credits/Pricing.

Every new tool page has to pass the checklist before it hits main. Sounds bureaucratic. It is. But pages 3-21 took
roughly half the time of pages 1-2 each, and the post-deploy bug rate dropped to almost zero.

If you're a solo dev, write the checklist after page 2. Earlier is wasted effort; later is too late.

## 2. Don't multi-provider until you have to

Early on I plugged in two AI providers behind a TypeScript interface:


ts
  interface AIProvider {
    createTask(params: TaskParams): Promise<Task>;
    getTaskStatus(taskId: string): Promise<TaskStatus>;
  }

  const provider = getProvider(env.PROVIDER || "evolink");

  The reasoning was "what if A goes down?" Sounded responsible. In practice for the first 5 weeks I used exactly one
  provider, the abstraction added friction every time the two APIs diverged (different param names, different error
  shapes, different webhook payloads), and I built glue code I never used.

  Premature provider abstraction is a YAGNI tax. Build for one provider, ship, abstract when the second one actually
  earns its keep. The interface is a 30-minute refactor when you genuinely need it — not before.

  3. A bad polling pattern can burn $200 in 24 hours

  This one stings.

  Around week 4 I rewrote the lyrics-to-song page (https://melodycraftai.com/lyrics-to-song?utm_source=devto). The new
  client polled the task status endpoint every 1 second instead of every 5. I tested locally with one task, it worked, I
   shipped.

  Next morning Vercel sent me an email: Edge Requests at 99.7% of the monthly quota. By dinner I'd been auto-upgraded to
   Pro and was watching the meter tick. The fix took 3 minutes — bump the interval, add exponential backoff, gate the
  polling behind tab visibility. The damage was real money.

  What I should have done: back-of-envelope math before shipping. (active users × poll frequency × avg duration × 30
  days). I now keep a polling-budget.md next to the code that updates whenever a polling rate changes.

  If you don't track polling math, your Edge function bill will track it for you.

  4. One template, eight pages — the band-name cluster

  After page 13 I stopped writing tool pages from scratch. A search-volume scan turned up 8 viable band-name generator
  queries — metal band name, kpop band name, punk band name generator, etc. Each was 200-1000 monthly searches on its
  own, low difficulty, no obvious dominant ranker.

  So I extracted a NameToolTemplate component:

  <NameToolTemplate
    genre="Metal"
    promptPrefix="Generate aggressive, dark band names suitable for thrash/death metal..."
    examples={metalBandExamples}
    schemaDescription="Free metal band name generator..."
  />

  8 pages shipped in 2 days. Each one ranks for its specific query without cannibalizing the others, because the page
  content is genuinely different — different examples, different FAQ, different prompt seed — even though the shell is
  identical.

  When you see ≥ 5 pages with the same shape, build the template. Anything less, hand-write it. The break-even is
  sharper than it looks.

  5. Programmatic SEO almost killed the blog plan

  I had this idea: programmatically generate ~50 /blog posts from a genre × use-case matrix. Looked clean on paper,
  would have shipped in a weekend.

  Then I read the 2024-2026 Google Helpful Content + Spam Updates more carefully. Programmatic content with thin
  variation now actively hurts site-wide rankings, not just the offending pages. So 50 templated blog posts could drag
  the 21 tool pages down with them.

  I killed the idea last week. Replaced it with one hand-crafted long-form blog per week. Lower volume, much higher
  ceiling, no Google risk. The bandwidth I freed went into a YouTube channel — different distribution, different
  algorithm, doesn't compete with the main SEO thread.

  Templates are great for tool pages where the user actually wants the tool. Templates for content — where the user
  wants information — are a Google trap in 2026.

  6. Anti-abuse: gate the gift, not the user

  I had a fingerprint + card dedup that auto-banned users looking like duplicates. Felt smart. Wasn't.

  A reference SaaS in the same niche ran the same logic and later discovered, via angry support tickets, that the
  "duplicates" were often a single VIP customer using multiple devices and multiple cards (work card, personal card,
  family card). Banning them killed revenue.

  I refactored. The dedup now runs at exactly one place: the new-user free credit gift. Same fingerprint or same card on
   signup → no second free gift. But you can still register, log in, buy credits, and use the tool normally. This stops
  free-credit cycling without burning real customers.

  Small product call. Difference between "we lose ~$0 to abuse" and "we lose 30% of VIP revenue to false positives" is
  purely where the gate sits.

  7. Internal links are weirdly hard

  The dumbest lesson, listed last because it's a real one.

  After shipping the blog index (https://melodycraftai.com/blog?utm_source=devto), I noticed a few internal links
  rendered the same color as body text — grey on white. Users (and Googlebot) couldn't tell they were clickable.

  I'd assumed Tailwind's prose class handled this. It does — for external links. The way my MDX renderer wired up the
  <a> component stripped the color class on internal anchors specifically.

  Fix was 4 lines. But it had been live for 5 days and nobody had clicked through.

  Every time you ship a new content surface, click 3 internal links yourself, on mobile, in incognito. The cost is 10
  seconds. The cost of not doing it is invisible CTR loss for a week.

  ---
  What I'd do differently next time

  - Page checklist on day 1, not after page 2
  - One AI provider until you literally cannot ship without a second
  - Polling math is a checklist item, not an optimization
  - Hand-crafted blog from day 1 — programmatic is for tool pages, not for content
  - Anti-abuse logic gates on gifts, not on signups
  - Click your own internal links every release

  Source layout for the 21 tools is in this open repo: https://github.com/kekelele19851224-lgtm/melodycraft-ai-public-.
  It's a README index — useful as a reference if you're building a similar AI tool catalog.

  If you're a solo dev shipping AI tools, the meta-lesson is: most of the work is plumbing, not the AI part. The AI
  providers are a stable interface you call. The hard parts are the 100 tiny things that make a page rank, convert, and
  not blow up your Vercel bill at 3 AM.

  That, and not getting too clever before week 6.

  ---
  MelodyCraft AI is at melodycraftai.com (https://melodycraftai.com/?utm_source=devto). Happy to write up specific
  subsystems — the credit system FIFO logic, the polling backoff, the NameToolTemplate generator — if there's interest.

How I Built an AI Rap Name Generator with Next.js 15 + Gemini 2.5 Flash

keke lele — Fri, 24 Apr 2026 06:28:09 +0000

A few weeks ago I shipped an AI Rap Name Generator as
part of a multi-tool music app. It looks dead simple from the outside — pick a genre, pick a few "vibes," click
generate, get 6 rapper names back. Behind that simplicity there were three things that took longer than I expected to
get right. Sharing in case you're building something similar.

## The stack

Next.js 15 (App Router, RSC where possible)
Gemini 2.5 Flash for the LLM (fast + cheap, perfect for short-form structured generation)
Drizzle ORM + Postgres for credit tracking
Zod for input validation
TypeScript everywhere

Total cost per 6-name generation: roughly $0.0002 with Gemini Flash. That's basically free, which is why I could
afford a generous free tier without going broke.

## Tricky part #1: Prompt engineering for strict JSON output

LLMs love to add chatty prefixes and trailing markdown fences. Out of the box, the model would happily return:

Sure! Here are 6 rapper names for you:
\json [{"name": "...", "vibe": "..."}] \\

That breaks JSON.parse(). The fix was twofold — strict instruction in the prompt + defensive parsing on the way out:

\ts returnYou are a creative rap name specialist. Generate exactly 6 unique rapper stage names.

Genre: ${p.genre}
Vibe: ${vibeStr}
Gender: ${genderStr}

Rules:

Names must authentically fit the ${p.genre} genre
Each name should be 1–3 words, memorable, and original
No slurs or offensive language
Vary the style: some single-word, some two-word, some with numbers

Return ONLY a valid JSON array with exactly 6 objects, no other text:
[{"name":"Example Name","vibe":"Short vibe description here"},...]; \\

And the parser:

\ts const jsonMatch = rawText.match(/\[[\s\S]*\]/); const names = jsonMatch ? JSON.parse(jsonMatch[0]) : []; \\

The regex grabs the first [...] block in the response and ignores whatever fluff came before or after. Catches ~99%
of cases. The remaining 1% (Gemini occasionally truncates if maxOutputTokens is too low) gets handled by the user
just clicking generate again — and crucially, they don't get charged for it (more on that below).

## Tricky part #2: Gemini's 503s

About 1 in 30 requests come back with a 503 ("Service Unavailable" / "high demand"). First time I shipped without
retry logic, my support inbox filled up within a day.

The fix is a simple retry with backoff:

\ts let data; for (let attempt = 0; attempt < 3; attempt++) { if (attempt > 0) await new Promise((r) => setTimeout(r, 1500)); const res = await fetch(GEMINI_URL, { method: "POST", body: geminiBody }); if (res.status === 503 && attempt < 2) continue; if (!res.ok) throw new Error(Gemini API error ${res.status}); data = await res.json(); break; } \\

3 attempts, 1.5s sleep between. Brings effective failure rate from ~3% to under 0.1%.

## Tricky part #3: The credit freeze/settle/release pattern

Users buy credits up front. A naive flow would be:

Deduct credits
Call Gemini
Return result

But what if Gemini fails on attempt 3 of 3? You've charged the user for nothing. Refunding adds support overhead. The
right pattern:

\ts const holdUuid =rapname_${nanoid(21)}`;

await creditService.freeze({
userId: user.id,
credits: RAP_NAME_GENERATION_CREDITS,
videoUuid: holdUuid,
});

try {
// ... call Gemini, parse result ...
await creditService.settle(holdUuid); // success → actually consume
} catch (err) {
await creditService.release(holdUuid); // failure → refund
throw err;
}
`\

Three states for credits: available, frozen, consumed. Frozen credits are reserved (so concurrent requests
can't double-spend) but not yet charged. On success they settle into consumed; on failure they release back to
available.

The user-facing payoff is one sentence in the error response:

"The AI is experiencing high demand right now. No credits were deducted — please try again in a few minutes."

That sentence — "no credits were deducted" — single-handedly killed about 80% of refund requests.

This pattern also scaled well when I added long-running jobs (music generation, where the AI provider takes 60+
seconds). Same primitives, different durations.

## Lessons

Design the failure path before the happy path. Retries, refunds, friendly errors. The happy path is one if-statement; the failure paths are 80% of the work.
Defensive parsing > strict prompts. You can ask the LLM nicely to return clean JSON, but always parse like it lied to you.
Make the cheapest model your default. Gemini 2.5 Flash is plenty for short-form structured output. Save the expensive models for tasks that actually benefit.

If you want to try the live tool, it's at
melodycraftai.com/rap-name-generator. Curious what
other tricky parts people have hit when shipping LLM features — drop them in the comments.

I Built a Free Tool to Generate Beautiful Arabic Calligraphy - Here's How It Works

keke lele — Thu, 22 Jan 2026 10:28:56 +0000

Introduction
Arabic calligraphy is one of the world's most beautiful art forms, with a history spanning over 1,400 years. As a developer, I wanted to make this ancient art accessible to everyone - designers, students, and anyone curious about Arabic script.
That's why I built Arabic Calligraphy Generator - a free online tool that transforms text into stunning Arabic calligraphy.
The Problem I Wanted to Solve
Many people face these challenges when working with Arabic calligraphy:

Language barrier: Most people can't write Arabic by hand
Font limitations: Standard Arabic fonts lack the artistic beauty of traditional calligraphy
Expensive software: Professional calligraphy tools often require paid subscriptions
Export options: Getting high-quality exports for design work is difficult

What the Tool Does
The Arabic Calligraphy Generator offers:
11 Traditional Calligraphy Styles

Thuluth (ثلث) - Elegant, often used in mosque decorations
Naskh (نسخ) - The most common style for printed Arabic
Kufi (كوفي) - Angular, geometric style
Diwani (ديواني) - Flowing, cursive Ottoman style
Ruq'ah (رقعة) - Simple, everyday handwriting style
Maghrebi (مغربي) - North African style
And 5 more traditional styles...

Key Features

English to Arabic Translation - Type in English, get Arabic calligraphy
Multiple Export Formats - PNG, JPG, and SVG for any use case
Completely Free - No sign-up, no watermarks, no limits
Instant Preview - See your calligraphy in real-time

Use Cases
This tool is perfect for:

Graphic designers creating logos or artwork with Arabic elements
Tattoo artists designing Arabic calligraphy tattoos
Students learning about Islamic art and culture
Content creators making social media graphics
Developers who need Arabic text assets

Technical Highlights
Building this tool involved some interesting challenges:

Handling right-to-left (RTL) text rendering
Ensuring proper Arabic letter connections (Arabic letters change shape based on position)
Optimizing SVG output for scalability
Making the interface intuitive for users unfamiliar with Arabic

Try It Out
If you're working on any project involving Arabic text or calligraphy, give it a try:
👉 arabiccalligraphygenerator.online
I'd love to hear your feedback! Drop a comment below or reach out if you have suggestions for new features.

How I Built a Free Arabic Calligraphy Generator with SVG Export

keke lele — Sat, 17 Jan 2026 12:21:23 +0000

As a developer fascinated by Arabic typography, I built a free tool that lets anyone create beautiful Arabic calligraphy online. Here's what I learned and how it works.
The Problem
Arabic calligraphy has a rich 1,400+ year history, but most online tools either require paid subscriptions, don't support vector exports, or offer limited font choices. I wanted to create something accessible to everyone.
Key Features
My solution at arabiccalligraphygenerator.online includes:

11 authentic calligraphy fonts (Thuluth, Naskh, Kufi, Diwani, Nastaliq, and more)
English to Arabic translation for non-Arabic speakers
SVG vector export for scalable designs
Canvas manipulation with drag positioning, rotation, and opacity controls
Harakat (diacritics) support for proper pronunciation marks

Technical Approach
The generator uses HTML5 Canvas for rendering and leverages Google Fonts' Arabic font collection. For SVG export, I convert the canvas rendering to vector paths, ensuring designs can scale infinitely without quality loss.
The translation feature uses an API to convert English text to Arabic script, making the tool accessible to designers worldwide who want to incorporate Arabic calligraphy into their work.
Why SVG Matters
Most calligraphy tools only export raster images. SVG export is crucial for:

Logo design (scalable to any size)
Print materials (high resolution)
Web graphics (small file size)

Try It Out
The tool is 100% free, no signup required: arabiccalligraphygenerator.online
I'd love to hear your feedback or feature requests!

I Built a Free Arabic Calligraphy Generator - Transform Text into Beautiful Islamic Art

keke lele — Sun, 11 Jan 2026 10:15:41 +0000

Hey DEV community! 👋

I want to share a free tool I built: Arabic Calligraphy Generator - a web app that transforms any text into beautiful Arabic calligraphy.

Why I Built This

Arabic calligraphy (الخط العربي) is one of the most beautiful art forms in the world. But for most people, creating authentic Arabic calligraphy is nearly impossible without years of practice or expensive software.

I wanted to make this art form accessible to everyone - designers, developers, content creators, or anyone who appreciates beautiful typography.

What It Does

The generator offers:

11 Traditional Font Styles - Including Thuluth (ثلث), Naskh (نسخ), Kufi (كوفي), Diwani (ديواني), and more
Auto Translation - Just type in English, it translates to Arabic automatically
Multiple Export Formats - Download as PNG, JPG, or SVG
Customization - Adjust colors, sizes, and backgrounds
100% Free - No registration, no watermarks

Font Styles Preview

Each style has its own character:

Style	Character	Best For
Thuluth	Elegant, decorative	Titles, logos
Naskh	Clean, readable	Body text, Quran
Kufi	Geometric, angular	Modern design
Diwani	Flowing, cursive	Invitations, art

Use Cases

🎨 Designers - Create unique logos and graphics
🕌 Islamic content - Quran verses, religious quotes
✨ Social media - Eye-catching posts
🎁 Personalized gifts - Names in Arabic calligraphy
💻 Developers - Generate assets for apps

Quick Demo

Check out this tutorial to see how it works:

3 simple steps:

Enter your text (English or Arabic)
Choose a calligraphy style
Download in your preferred format

That's it! No signup required.

No signup required!

Try It Out

👉 arabiccalligraphygenerator.online

I'd love to hear your feedback! What features would you like to see added? Drop a comment below 👇

If you found this useful, a ❤️ would mean a lot!

How I Built a Free Arabic Calligraphy Generator with HTML, CSS & JavaScript

keke lele — Thu, 01 Jan 2026 03:08:32 +0000

Introduction

Arabic calligraphy is one of the most beautiful art forms in the world. I wanted to create a simple web tool that lets anyone generate Arabic calligraphy from English text — no design skills needed.

In this post, I'll share how I built Arabic Calligraphy Generator using just HTML, CSS, and vanilla JavaScript.

The Challenge

Building this tool came with some interesting challenges:

Right-to-Left (RTL) text rendering — Arabic reads from right to left
Font loading — Arabic calligraphy fonts are large files
Translation — Converting English input to Arabic script
Export options — Users need to download their creations

Tech Stack

I kept it simple:

HTML5 Canvas for rendering
Vanilla JavaScript (no frameworks)
Google Fonts for Arabic typefaces
Canvas API for PNG/JPG export

Key Implementation

1. Handling RTL Text

The most important CSS rule for Arabic text:

.arabic-text {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', serif;
}

2. Loading Arabic Fonts

I used multiple calligraphy styles. Here's how to preload them:

3. Canvas Export Function

function exportAsImage(format) {
  const canvas = document.getElementById('calligraphy-canvas');
  const link = document.createElement('a');
  link.download = `calligraphy.${format}`;
  link.href = canvas.toDataURL(`image/${format}`);
  link.click();
}

Lessons Learned

Start simple — I launched with 3 fonts, now it has 11
Performance matters — Arabic fonts are heavy, lazy loading helps
User feedback is gold — Real users found bugs I never imagined

Try It Out

You can check out the live tool here: Arabic Calligraphy Generator

It's completely free — no signup required. Just type your text, choose a style, and download.

What's Next?

I'm planning to add:

More calligraphy styles (Diwani, Maghrebi)
Custom color options
Social sharing features

Thanks for reading! If you have questions about building multilingual web tools, drop a comment below. 👇