My process: AI driven development with WeWeb

Hello everyone :waving_hand:

I’ve launched Carrousl, an app that lets you organize photos and create carousels to post in IG or TikTok.

There are very few WeWeb apps out there that are consumer-facing so I figured I’d present it here! My process when building with WeWeb really evolved during the past month with the release of the MCP so I’m also taking this moment to reflect on how I work.

You can create a free account if you want to test it: https://carrousl.com

Stack

  • Frontend, Backend, Auth, Database: WeWeb (self-hosted)
  • Storage: Cloudflare R2
  • Image processing: Imgproxy (self-hosted on Coolify)
  • Image description and auto-tags: Claude API
  • Payments: Stripe
  • Email: Resend
  • Built with Claude Code in the Desktop app

Main features

  • Upload and export: Add images to your account and export them whenever you need.
  • Smart tagging: Get suggested tags and an auto-generated description for every image, or add your own tags.
  • Built-in editing: Reframe images and change aspect ratios without leaving the app.
  • Folders and posts: Organize your library into folders and posts, and move multiple images at once with bulk select.
  • Drag-and-drop ordering: Rearrange images within a post.
  • Text overlays: Add text directly onto images (coming soon).

Process

I initially started the project on Glaze to create a macOS app. But I realized I wanted to have access to the app on the go so I migrated to WeWeb to build a web app. It was a very early stage decision so I rebuilt from scratch taking only the design. I extracted and formulated design tokens from the initial Glaze build. That was my starting point in WeWeb.

When starting a task, most of the time, I will prompt Claude. It’s connected to WeWeb, Paper and Mobbin MCPs. I’m using Opus 5.5 to start heavy or design tasks. Sonnet 5.5 for straightforward implementations and bug fixes.

My process when implementing a feature goes like this:

  1. When the task requires design thinking, I fetch some references from Mobbin, and create mockups in Paper. Both of these tasks are done in Claude. It’s at that moment that I refine the design and the specs.
  2. When the previous step is validated, I ask Claude to implement the feature on WeWeb. My design system is pretty much done at this point, so I don’t need many modifications. It will reuse the existing tokens and nocode components.
  3. I use some custom components in my project such as the image crop component. If any modifications are needed, I would also modify the code, push it to GitHub and sync the component in WeWeb. If it’s a nocode component, I just make the modification along the feature.
  4. When the implementation is done, I will check in WeWeb if things work correctly. I am looking at the Editor first to detect weird CSS or workflow implementation. Then comes the testing on Preview and on Staging. If I spot any bug, I would just change it manually in the Editor but if the bug is affecting multiple places and component, I will just try to fix it with Claude.
  5. Publishing to prod:
    1. Some modifications would require some backend modifications/migration. When this is required, I need to separately update the exported database with a command.
    2. Since my project is self-hosted, when I trigger an export of the code, the project is being rebuilt in Cloudflare.

For reference, it took me a bit more than three weeks to get the app to where it is today.

Limitations encountered

Cloudflare R2: there is no native integration yet so uploading files there is done through custom code. A bit less practical so I’ll replace it with the native integration when it’s released.

I had issues with editing popups and nocode components through the MCP at some point but it’s fixed now.

Conclusion

Today, my workflow relies heavily on Claude with WeWeb MCP. It allows me to go execute my ideas faster.

I did ask myself whether I should build it directly in code outside of WeWeb. But since I’m familiar with WeWeb, it offers me a structured place to build. I know where everything is defined if I need to put my hands in it. So there is a sense of security and familiarity with having a visual interface to understand what I build that I would not have with code.

I’m really open to feedback if you see anything I can improve in my process. And feel free to ask me anything!

It looks gorgeous as always @jptrinh ! Happy to add it to our showcase page if you’d like :slight_smile:

And thanks so much for sharing your process! I wasn’t aware of Mobbin, looks cool!

My process is pretty similar though I have to say I do most of the design in Claude Design without bothering with references :sweat_smile: That’s probably where I need to improve the most! And for QA, I like to watch Claude do it for me in the browser. It doesn’t spot everything and I still do manual checks of course but it looks at lots of things I wouldn’t have thought of.

Looks amazing @jptrinh . 10/10 in UI and experience.

Same here in terms of process. Claude is my go to with the weweb mcp. Mobbin and the figma MCP too with Claude to handle design does wonders also. You should try it out @Joyce opens up a better design experience that Claude Design.

Oh yes that’d be cool. Do i need to provide you with anything?

Nope! It’s live :slight_smile: Carrousl - Showcased WeWeb Apps

I can update it though so if you want to send me a dedicated logo file or other images, or edit anything, just let me know!

By the way @iconic, if you’d like me to showcase any of your projects on our site as well, don’t hesitate to send me a DM :slight_smile:

@vitayao Migrating the backend still keeps it compatible with previous frontend. And in Cloudflare and Coolify, I can still rollback to previous builds. But I didn’t run into any issue for now :slight_smile: