DEV Community: kristoff

I Built an AI Weight Loss Simulator with Claude Code. It Just Crossed Its First $100 — Here's What Actually Moved the Needle

kristoff — Sun, 20 Sep 2026 15:31:56 +0000

I Built an AI Weight Loss Simulator with Claude Code. It Just Crossed Its First $100 — Here's What Actually Moved the Needle

I'll skip the "tech stack first" opening. The stack is at the bottom; it's not why this made money.

This is not a success story. $100 is lunch money. But it's $100 from strangers who found a page on Google, uploaded a photo of themselves, saw a result, and decided it was worth paying for — and for a long stretch before that, the number was exactly zero with plenty of people using the site every day. The gap between those two states is the interesting part.

What the Product Does

AI Weight Loss Simulator does one thing: you upload a photo, pick how many pounds you want to lose (or gain), and get back a photorealistic before-and-after of you — same face, same clothes, same background, different body.

That's it. No calorie tracking, no 3D avatar, no "enter your measurements." One photo, one number, one result.

Underneath there are a few things that turned out to matter a lot more than I expected:

You tell it where you carry your weight (belly, hips and thighs, evenly, face and upper body), so a belly-first person doesn't get slimmer legs and an unchanged stomach.
For big losses (50+ lbs) it keeps skin realistic instead of painting on a six-pack.
A "journey" mode splits a goal into four milestones — −10, −20, −30, −40 — and renders each one from the same photo, then stitches them into a single timeline image.

Why I Picked This Niche

Weight loss visualization is an old, weird corner of the internet. There have been "see yourself thinner" tools since the 2010s. Most of them were 3D avatars or face-pinching filters, and if you read the App Store reviews of the paid ones, the median rating is one star: "funhouse mirror," "just squeezes my cheeks," "only shows the face," "I want my $2 back."

So the signals were:

Real, durable search demand ("weight loss simulator", "what would I look like if I lost weight") with nobody happy about the existing answers.
A visual, emotional outcome. People don't want a number; they want to see it.
Image-editing models finally good enough to keep a person's identity while changing their body — which is the exact thing the old tools couldn't do.
A one-off purchase fits the use case. Nobody wants a subscription to look at themselves thinner.

What Claude Code Helped With

Nearly all of the code, honestly. The Next.js app, the API routes, the fal.ai queue integration, the credit ledger with an atomic "debit only if balance ≥ cost" guard, the Dodo Payments checkout and webhook, the server-side image pipeline with sharp, the SEO pages with JSON-LD.

But the part I want to be precise about: the thing that got the site from $0 to $100 was not code. It was three product decisions, and Claude Code was useful for those too — just in a different way.

1. It read the reviews so I didn't have to guess.
I asked it to go find what people actually complain about in this category. It pulled ~200 App Store reviews across six competitor apps and a handful of MyFitnessPal forum threads and summarized them into seven concrete needs. "Must still look like me." "Full body, not just a face." "Let me try several target weights." "Let me save it as my lock screen." That list became the roadmap.

2. It found the leak in my free tier.
I had a free first simulation. Sounds generous. What it actually did was hand over the full-resolution result with a faint CSS watermark on top — meaning anyone could screenshot the exact thing I was trying to sell. Lots of usage, zero payments, and I couldn't see why. Claude Code read the code path, pointed at the watermark overlay, and said, more or less, "you're giving away the product." We moved the degradation server-side: free results now come back at 640px with a baked-in watermark, and the HD version plus a downloadable before/after card is what $1 buys.

3. It caught the model under-editing.
After switching to GPT Image 2.5, I asked it to regenerate the demo images. The first batch came back with −10, −20, −30 and −40 lbs looking almost identical. It turned out the model is a conservative editor: tell it "noticeably slimmer" and it removes about ten pounds no matter what number you wrote. We rewrote the prompt so each magnitude tier has concrete, checkable anchors — "stomach flat under the shirt, no overhang at the waistband, roughly one clothing size down" — plus a blunt line: if this looks like only 10 lbs came off, it is wrong. The −40 result finally looked like −40. That's the difference between a user who pays and a user who leaves a one-star review.

AI can write a lot of code. It does not automatically know what should be shipped. But if you point it at real user complaints and your own code at the same time, it's surprisingly good at connecting the two.

The Stack Behind It

Kept deliberately boring and cheap:

Next.js 16 (App Router), React 19, Tailwind v4, shadcn/ui
Supabase Postgres with Drizzle — a credit account table plus an append-only ledger
better-auth with Google sign-in
sharp on the server to downscale and watermark free previews and to compose the before/after and journey cards
Dodo Payments as merchant of record — one-time credit packs, no subscription, they handle sales tax
Vercel for hosting

Monthly fixed cost is close to zero. Each paid simulation costs a few cents in inference against $1 in revenue, so the unit economics work at any scale.

The First $100 Was a Signal, Not a Victory

What $100 actually proves:

Google → landing page → upload → free preview → checkout → webhook → credits granted → HD download. The whole loop works, end to end, with real money.
People will pay $1 in the moment right after they see the preview. The unlock button lives directly under the result, not on a pricing page. Most purchases come from there.
A meaningful share of buyers pick the $5 pack instead of the $1 unlock, because the four-milestone journey costs 4 credits. Giving people a reason to want more than one image did more for average order value than any pricing-page copy.

What it doesn't prove: that this is a business yet. It's a machine that has started turning.

What I Learned

Usage without revenue is a diagnosis, not a compliment. If lots of people use a thing and nobody pays, the free tier is probably delivering the whole value. Look there first.
The moment of desire is the moment to ask. A $1 button under the result converts. A four-column pricing table one click away does not.
Reviews of your competitors are a free user-research budget. Every one-star review is a spec.
Prompt the model in verifiable terms. "Realistic" and "noticeably" mean nothing to an image model. "Stomach flat under the shirt" means something.
Ship the product people describe, not the one you imagined. I thought I was building "see your future self." The users told me the real job was "prove to my brain that 20 lbs actually changed something" — which is why the journey mode and the weight-gain filter (add the weight back onto a current photo and compare) both exist now.

What Comes Next

Let free users generate just the final milestone of a journey, with the intermediate steps locked, so they can see what they'd be paying for.
More SEO pages around the specific questions people ask ("what would I look like 30 pounds lighter").
A face-similarity check after generation so identity drift gets auto-retried instead of shipped.
Actually look at the numbers again once it's $1,000, not $100.

The product is at weightlosssimulatorai.com. I'll write up the credit ledger and the free-preview pipeline separately — those were the two pieces of code I'd reuse in any AI SaaS.

🚀 I Built an AI Tools Directory for Indie Developers

kristoff — Fri, 20 Mar 2026 06:32:33 +0000

🚀 I Built an AI Tools Directory for Indie Developers — Here’s Why (and What I Learned)

If you’ve been building in the AI space recently, you’ve probably noticed one thing:

👉 New AI tools are launching every single day.

And yet… most of them go completely unnoticed.

The Problem: Great AI Tools Are Invisible

As an indie developer, I’ve built and launched multiple products.

And every time, I ran into the same issue:

You ship something useful
You post it on X / Reddit / Hacker News
Maybe you get a small spike…
Then traffic drops to zero

Not because your product is bad — but because distribution is the hardest part.

Meanwhile, large platforms are crowded, noisy, and dominated by well-funded startups.

So I started asking:

Where can indie developers actually get visibility?

💡 The Idea: A Directory Built for Indie AI Makers

That’s why I built 👉 IndieAI Directory

A curated place to:

Discover AI tools built by indie developers
Submit your own product
Get visibility, traffic, and backlinks

Unlike generic directories, this one is focused on a single thing:

👉 AI tools made by indie hackers

🧠 Why Another Directory?

Good question — there are already tons of directories out there.

But most of them have problems:

Too many low-quality listings
No real audience
No SEO value
No curation
Built for quantity, not usefulness

I wanted something different:

✔ Curated

✔ Niche-focused (AI only)

✔ Useful for both users and founders

🔍 What You Can Do With It

1. Discover Useful AI Tools Faster

Instead of scrolling endlessly, you can explore tools by categories like:

AI writing
Image generation
Coding assistants
Marketing tools
Productivity tools

Each listing is simple and clear — no fluff.

2. Submit Your Own AI Product

If you're building something, you can submit it in minutes.

And here's the important part 👇

👉 You’re not just getting listed — you’re getting distribution

📈 Why Listing Matters (Especially for Indie Devs)

When you're early-stage, you need:

Traffic
Backlinks
Users
Feedback

Directories are one of the easiest ways to get all four.

By submitting your product, you can:

Improve your SEO (through backlinks)
Increase your domain authority
Get discovered by early adopters
Build credibility

It’s not magic — but it works.

⚙️ What I Learned Building This

Building the directory itself was actually the easy part.

The hard part?

1. Getting Submissions

People don’t submit unless:

They see value
They trust your site
Or they’re already getting traffic

👉 Lesson: You need to prove value early

2. Curation > Quantity

At first, I thought more listings = better.

Wrong.

Too many low-quality tools = bad experience.

👉 Now I focus on quality over volume

3. SEO Is a Long Game

Directories are powerful for SEO, but:

It takes time
You need consistent content
Internal linking matters

👉 Still, it’s one of the best long-term strategies.

4. Distribution > Building

Classic indie hacker lesson:

Building is easy. Distribution is everything.

This project is actually my way of solving that problem — for myself and others.

🚀 Who This Is For

This directory is especially useful if you are:

An indie developer building AI tools
A solo founder launching a SaaS
A creator experimenting with AI
Someone looking for new AI tools

🔗 Try It or Submit Your Product

If you're curious, you can check it out here:

👉 https://indieai.directory/

And if you're building something:

👉 Submit your tool and start getting exposure

Final Thoughts

We’re in a moment where:

Anyone can build products
AI lowers the barrier
But distribution is still the bottleneck

That’s exactly the gap I’m trying to solve.

Not with ads.

Not with hacks.

But with a focused platform for discovery.

If you’re building in public, I’d love to hear what you’re working on 👇

I built a privacy-focused tool to crop images into circles instantly

kristoff — Tue, 06 Jan 2026 15:36:47 +0000

Hey Dev.to community! 👋

I often faced a small but annoying problem: I needed a circular version of an image file (actual PNG with transparency), not just a visual circle created by CSS border-radius.

Opening Photoshop just to crop a profile picture felt like overkill. So, I built a lightweight tool to solve this.
Meet Circle Crop Image.

🚀 What it does

It’s a simple web utility that lets you upload an image, select a circular area, and download it as a transparent PNG.

💡 Key Features

Client-Side Processing: Your images are processed locally in your browser using the Canvas API. Nothing is uploaded to a server. 100% Privacy.
Instant Export: No sign-ups, no watermarks, no ads.
Responsive: Works great on mobile if you need to create stickers or avatars on the go.

🛠 Under the hood

It relies heavily on the HTML5 Canvas API (ctx.arc, ctx.clip). I wanted to keep it dependency-free and fast.

I'd love for you to try it out and let me know what you think. Is there any feature you'd like to see added?
👉 Try it here: https://circlecropimage.dev/

Thanks for checking it out!

Need Quick Placeholder Images for Your Project? Meet BlankImage.org

kristoff — Thu, 28 Aug 2025 01:47:28 +0000

As developers, we often run into a simple but frustrating problem:

👉 We just need a plain image — maybe a solid background color, a rectangle for a design mockup, or a placeholder for testing an API response.

And yet, generating these images often takes more time than it should. You might:

Open Photoshop or Figma just to create a plain red rectangle
Write custom CSS backgrounds when you really just want a PNG
Search for stock placeholders that don’t quite fit your required dimensions

What if there was a faster way?

Enter BlankImage.org 🚀

BlankImage.org is a lightweight tool that lets you instantly generate blank or solid-color images online. No design software. No boilerplate code. Just input what you need, and download your image.

✨ Features developers will love:

Custom sizes: Need a 1920x1080 white image or a 400x400 black square? Just type it in.
Solid colors: Red, green, blue, pink, black, white — all supported out of the box.
Instant download: Get a PNG or JPEG version without extra steps.
SEO friendly: Each image page is optimized for search engines, so you can even use the links as sharable assets.

Use Cases

🔹 Frontend Development

Need placeholder assets while building UI layouts? Generate the right size and color instantly.

🔹 Design Mockups

Drop a solid rectangle into your wireframe or prototype without firing up heavy design software.

🔹 API Testing

Working on an endpoint that returns images? Use BlankImage to provide consistent placeholder files.

🔹 Content Creation

Need a quick solid background for social posts, blog headers, or demo slides? Done in seconds.

Why This Matters

The beauty of tools like BlankImage.org is that they save you from unnecessary friction. Instead of wasting time on trivial setup tasks, you can focus on what matters — building your product.

It’s one of those small tools you don’t realize you need until you try it.

Try It Out

👉 Visit BlankImage.org and generate your first solid-color image in just a few clicks.

If you end up using it, I’d love to hear your feedback. What features would make it even more useful for your workflow?

How I Built a “Grow a Garden Calculator” (and what I learned along the way)

kristoff — Sun, 17 Aug 2025 15:32:32 +0000

Hey folks 👋

I’ve been experimenting with building small side projects to sharpen my skills, and recently I created something fun: a Grow a Garden Calculator.

It’s a simple tool designed for players of the Grow a Garden game. The idea is to make it easier to:

calculate crop, pet, and item values,

compare trade offers,

and help players make fairer in-game decisions.

🛠 Tech Stack & Approach

Frontend: just use html + css + js

Backend / Data: no backend

Data Handling: simple structured text → normalized values → trade calculation logic

Deployment: vercel

The main challenge was figuring out how to make the calculator logic feel intuitive — I didn’t want it to just spit out numbers, but rather show results in a way that made sense for casual players.

⚡ What I Learned

Keeping the UX minimal really matters. Many game players don’t want to read long instructions, so I designed the tool to work with as few clicks as possible.

Handling edge cases (e.g. very rare items or multiple item types) required me to rethink my data model.

Deploying small projects quickly helps me iterate much faster — I’ve already updated it a couple of times based on early feedback.

💡 What’s Next?

I’m considering:

Adding more calculators (fruit values, pet XP, etc.)

Making it mobile-first

Maybe even letting users share trade comparisons with a link

👉 If you’d like, you can check it out here: Grow a Garden Calculator

I’d love any feedback — either on the tech choices or the UX for players.
Do you also build small side projects around games? I’d be super curious to hear about yours!

Thanks for reading 🙏

I’ve Failed Two Projects — Here’s What I Learned

kristoff — Thu, 17 Jul 2025 02:54:06 +0000

Over the past six months, I’ve launched three side projects — and failed at two of them. But through those failures, I’ve learned some important lessons that are shaping how I work today. Here’s my journey so far.

Project 1: DevGameNavigation

I originally planned to build my own indie game. But as a beginner, I had no idea where to find game assets or quality tutorials. After spending a lot of time searching, I managed to gather a collection of useful websites, game assets, and paid tutorials I had bought myself.

That’s when the idea came to me: maybe others face the same problem. So I built DevGameNavigation, a curated directory of game development resources — assets, tutorials, and even some creative indie games for inspiration.

But after six months online, the traffic was extremely low. Despite the effort I put in, the site didn’t gain traction. I eventually decided to shut it down and move on.

Project 2: NewsDigestAI

I read the news every day, but most news articles are way too long — I just want the key points and core data. So I built NewsDigestAI, a tool that fetches news from various sources and generates concise summaries for quick reading.

After a month of development, I launched the site and submitted a sitemap to Google. Things looked promising — over 20,000 pages were indexed and traffic started climbing. But soon after, Google penalized the site. All indexed pages were gone, and traffic dropped to zero.

This was a painful but valuable lesson: don’t flood a new site with auto-generated content, and always prioritize high-quality pages. Quantity alone won’t work — especially with SEO.

Project 3: ChartFromText

Sometimes I need to add charts to presentations or documents, but opening Excel or Google Sheets just for a simple chart feels like overkill. So I built ChartFromText, a lightweight tool that generates charts from plain text input.

This time, I did things differently. I spent minimal time on development and focused most of my effort on promotion. I submitted backlinks, shared it in communities, and recently listed it on Product Hunt.

For this project, I’ve made a conscious choice to shift my focus: development is important, but promotion is what makes or breaks a project. That’s the biggest takeaway from my previous failures.

I built a tool to generate charts from text

kristoff — Mon, 14 Jul 2025 09:07:52 +0000

I built ChartFromText.com to solve a simple but recurring annoyance of mine.

I often need a quick chart for a README file, a Slack message, or a simple presentation, and firing up Google Sheets or Excel always felt like overkill. The goal was to create the absolute fastest path from raw data to a usable chart.

You just paste text like Apples: 50, Bananas: 80, and the chart appears instantly. What it does: Parses simple key-value text (colons, commas, or newlines).

Instantly generates Pie, Bar, and Line charts. Renders data labels directly on the chart for readability. Lets you download the chart as a PNG with a clean, white background, ready for use anywhere.