I wanted to build a hands-on project to understand how modern SaaS platforms handle media manipulation and generative AI. Instead of just calling basic image APIs, I set out to build a complete creative studio incorporating authentication, media storage, credit economics, and AI transformations.
The goal was to deeply explore two areas: how Cloudinary executes dynamic AI transformations on the fly, and how Next.js 16 App Router coordinates Server Actions and webhook-driven user synchronization.
PixelForge supports five core AI operations: Image Restoration, Generative Fill, Background Removal, Object Removal, and Object Recolor. Implementing these required translating user UI inputs into Cloudinary's dynamic transformation syntax.
For features like Object Recolor, the application extracts target labels and color values from form state, formatting them into on-the-fly transformation strings. For Generative Fill, the system maps target aspect ratios and coordinates so the AI can synthesize matching background context seamlessly without stretching the original subject.
One of the trickiest bugs I encountered was an asynchronous race condition between Clerk authentication and MongoDB.
When a new user signed up, Clerk redirected them to the dashboard immediately. If the user tried to generate an image right away, the Server Action would fail because the user.created webhook had not yet finished creating the user's MongoDB document. I resolved this by adding cryptographic Svix webhook verification and an optimistic retry fallback inside the transformation action to ensure database consistency.
To prevent API quota exhaustion, I built an internal credit ledger. Each AI operation has an associated credit cost deducted atomically during the transformation transaction.
I implemented a daily refill mechanism that resets balances for zero-credit users, alongside a dedicated profile view tracking transformation history, original versus edited image previews, and remaining credits.
Building PixelForge tied together key full-stack practices: type-safe forms with React Hook Form and Zod, seamless Server Actions without REST boilerplate, and reliable cloud media pipelines. It provided valuable practical experience in structuring production Next.js applications.