Forem: keke lele

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. 👇