Building an AI Tattoo Generator with Next.js, Cloudflare, Google OAuth, and PayPal
The article describes the engineering process behind building an AI-powered tattoo generator app, including the technology stack, production issues, and lessons learned.
Why it matters
This article provides valuable insights into the engineering challenges and best practices for building an AI-powered application on a modern tech stack, which can benefit other developers working on similar projects.
Key Points
- 1Used Next.js App Router, Cloudflare Pages, Google OAuth, and PayPal
- 2Encountered runtime incompatibility issues and had to adapt the codebase
- 3Integrated Google OAuth and PayPal payment flow, with server-side validation
- 4Optimized for SEO and analytics with Next.js-aligned integrations
Details
The author built an AI tattoo generator app called BodyInk.art, with the goal of providing users a quick way to explore tattoo concepts before visiting a studio. The tech stack included Next.js App Router, Cloudflare Pages for deployment, Google OAuth for sign-in, and PayPal for pay-per-generation. While this stack enabled fast iteration and global delivery, it also exposed some runtime differences that the author had to handle. For example, a dependency path assumed Node-like behavior, but the deployed environment executed in an Edge-like context, causing image generation failures. The author fixed this by replacing the problematic SDK-dependent path with a simpler fetch-based implementation. Another issue was with image encoding, which the author resolved by switching to chunked Uint8Array processing instead of relying on heavier Node-oriented patterns. The author also shared lessons learned, such as the importance of keeping payment logic server-authoritative and how integrations often fail more from misconfiguration than code defects.
No comments yet
Be the first to comment