A Numberblocks Image Finder And Generator So Kids Can Draw Any Character, Using Lovable

Harshal
3 hours ago
3 min read

Build Notes for a Numberblocks Images webapp using Lovable

A small webapp lets my 5-year-old pick a number and get the right Numberblocks image so he can draw or colour it, without hunting across sites or Google Images. I built it with Lovable.

I spent 45 minutes building this and 35 minutes writing this. You need 1 minute to read this.

Numberblocks image finder and generator app

Problem Context

I was repeatedly opening different websites and Googling for images to find the right Numberblock for whatever number my son wanted. He uses those images to draw or colour, sometimes via our SmartArt Sketcher projector so he gets an outline to trace. The hunt for the right image was slow and scattered. I wanted one place that, for any number he picks, gives him the right image fast.

generate images using AI, when not found online

Solution Via App

App lives here: https://numberblock-finder.lovable.app/

Video walkthrough:

You choose a number; the app returns the Numberblocks image for it. If a Numberblocks does not exist for that number (for example, 555), the app lets you generate an image for it. From there you can use it on a phone, print it, or switch to a black-and-white version. In our case we often use our SmartArt Sketcher projector so he gets a clear outline to draw. Instead of jumping between sites and image search, the app quickly surfaces the right image so he can draw or colour without the friction.

Using Cursor for a web scraper - hard to recover from initial wrong decisions.

Stack: Lovable, Supabase, Firecrawl, Cursor, n8n, and OpenAI.

Lovable: frontend and primary agent
Supabase: edge functions
Firecrawl: AI-assisted web scraping
OpenAI: image generation

I also tried Cursor to build a bulk image scraper. Cursor did not get the scraper right on the first attempt; that was acceptable. Debugging was harder: I had to run the scraper, review the output, and sometimes ask for debugging statements at different points. The scraper was probably hitting the wrong parts of the site. To fix that, I would have had to understand either the generated code or Firecrawl's API.

I tried n8n's workflow builder for a bulk image scraper as well. The workflow was hard to follow, did not run, and fixing it would have required digging into several API specs.

n8n initial draft workflow for bulk image scraper.

Learnings

Changes I had to make:

I used the Firecrawl API to scrape Numberblocks, fandom, and wiki sites. I worried that bad actors could abuse my API connection, so I added rate limiting.
Rate limiting brought its own challenges. I needed row-level security (RLS) on the backend tables to support it.
The app has no login. So IP-based rate limiting, cached URLs, and cached content are all public. I had to choose: add authentication for a kid's app, or ship with fewer features.
Some numbers do not have a Numberblock. I added an AI image generator for those cases.
I started with bulk download in mind. I soon realized a child asks for one image at a time. The choice is random, so a parent cannot know in advance what to bulk download. I made single-image finder the main mode.
I used kid-friendly colors, theme, and buttons.
I made it mobile-friendly and tested it on phones.
Instead of telling the web scraping API to search for any and every source, I told it two or three specific websites based on the human trials I did before.

One small app replaced the repeated site-hopping and image search: pick a number, get the Numberblocks, then print or project.