We built Circles, a social app where every hobby gets its own look
Circles is a small social network where you join hobby circles such as swimming, books or gardening, and each hobby has its own colours and icon. You can post, comment in threads, react, send direct messages and switch between four visual themes. It runs as one HTML file in the browser with all data kept locally and nothing sent anywhere.
What made it work
- We were surprised by how good the AI was.
- Asking for ten visual variants of a post at once and picking the one we liked.
- Steering it with many short requests in plain language (move a button, make reactions round).
- Having the AI test in a headless browser and compare screenshots between versions, so styling changes did not break other pages.
- Asking the AI to audit the finished app, which produced a concrete list of fixes.
The screens
Build your own version
Yours goes up next to @bmoobject’s as a vibe off, and @bmoobject is told. Credit for the idea stays with them.
How it was madeThe prompt, tools, what’s left to make it real.
What’s left to make it real
Next: a real backend. All data lives in each browser's localStorage, so nothing is shared between people or devices, and two open tabs overwrite each other. Passwords are hashed in the browser only, which is not real authentication. Photos are capped by the browser's roughly 5 MB of storage. There are no URLs per page, so refresh sends you back to the start. It also needs moderation and reporting, notifications, and automated tests; today it's only been checked with ad-hoc headless-browser runs.
- Made with
- Claude, Playwright
- How
- We built it with Claude as a single-file vanilla HTML, CSS and JavaScript app, split into models, views and a controller, with data saved in localStorage. We steered it through many short requests in plain language: try ten visual variants of a post, move a button, make comments collapsible, make reactions round, fix the Leave button. Claude also tested it with a headless browser and compared screenshots between versions so styling changes would not break other pages. Near the end we had it audit the finished app, which produced a list of fixes: long text wrapping, small on-screen messages instead of pop-up alerts, Enter to submit the sign-in form, and Escape to close the theme menu.
- The prompt
- Generate 10 different versions where you test out different visual options for the posts on pages like popular. Try variations like making the whole post the hobby-color, just an outline the color, just the top part so it looks like a post header etc. Also, add the hobby icon next to the name of the user.In Claude, Playwright
- Hard parts
- What went wrong was our assumptions about how our input would generalize to various parts of the code, where the AI was sometimes too specific. I'd tell other builders to be more specific (e.g. change this element across all pages). Native pop-up dialogs also made some buttons look broken in embedded browsers, so we replaced them with small on-screen messages.
Building on it rather than answering it? Post a remix and it links back here.
Share it
More builds
Post a buildI built a floral weekly planner that doubles as a desktop wallpaper
@ajofClaude1 commentMyCaddie — a simple golf club picker that adjusts for wind
@fredrikht3011ChatGpt 5.51 commentI built a study app that quizzes me on my own notes
@tobias_gpClaude1 commentI pivoted my restaurant review web app to Android after an hour, and it ran on my phone 30 minutes later
@stewiikltGoogle Antigravity1 commentI built FlowSync, a local-first productivity app where my AI assistant proposes changes instead of making them
@covertClaude Code1 comment
I built a Norwegian net-worth tracker that adds up my bank, stocks and crypto with live prices
@muhusClaude Code1 comment
1 comment
@bmoobjectbuilder
What would you add to this project?
Sign in to comment — you come straight back here.