Building a Style-Aware AI Image Generator with Nano Bana, React, and Hono.

✨ Features ## 🧰 The Complete Tech Stack ## Core & Runtime ## Frontend (apps/web) ## Backend (apps/server) ## Data & Authentication ## AI & Services ## 🚀 Getting Started Locally ## 🧪 How It Works ## 💭 Why I Built This ## 🧑‍💻 Try It, Fork It, Break It! ## 🙌 Let's Connect Out of sheer curiosity to test the limits of the new Google Gemini models, I built Amaris—a full-stack SaaS application that lets you generate images with specific artistic styles using a simple chat interface. No complex workflows, just upload a reference image, type a prompt, and let the AI do the heavy lifting! It's built with the "Better-T-Stack" (Bun, Hono, React 19) and uses Google's Gemini 2.5 Flash Image model via the Vercel AI Gateway. If you're interested in building modern AI apps, learning about monorepos, or just want to see how Hono handles AI streams, this project is a great sandbox. Demo video: https://x.com/devguy_007/status/1997485877325394061?s=20 Check it out here: 🔗 [https://github.com/oyeolamilekan/amaris-app] I threw the kitchen sink of modern web dev at this project. Here is everything powering Amaris: Here's how to get Amaris running on your machine: 2. Install Dependencies We use Bun for speed! 3. Set Up Environment You'll need a PostgreSQL DB and a Google AI Studio key. Create your .env files: 4. Push the Database Schema 5. Start the Dev Server Visit http://localhost:5173 to start generating! I wanted to move beyond simple "text-to-image" scripts and build a real, production-ready architecture. I was specifically interested in how Hono (the backend framework) pairs with React 19 in a monorepo setup, and how to integrate payment flows like Polar.sh alongside complex AI logic. Plus, the new Gemini 2.5 models are incredibly fast and cheap, making them perfect for experimenting with style transfer without breaking the bank. This project is open-source and meant to be hacked on. Feel free to clone the repo, swap out the database, try a different AI model, or turn it into a comic book generator. I'd love to see what you build with it! GitHub: [https://github.com/oyeolamilekan/amaris-app] If you try it out or have questions about the stack, drop a comment or tag me! Happy hacking! 👨🏽‍💻✨ Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: git clone https://github.com/oyeolamilekan/amaris-app cd amaris Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: git clone https://github.com/oyeolamilekan/amaris-app cd amaris COMMAND_BLOCK: git clone https://github.com/oyeolamilekan/amaris-app cd amaris CODE_BLOCK: bun install Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: bun install CODE_BLOCK: bun install CODE_BLOCK: DATABASE_URL=postgresql://user:pass@localhost:5432/amaris GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key CORS_ORIGIN=http://localhost:5173 CLOUDINARY_CLOUD_NAME=your_cloud_name POLAR_ACCESS_TOKEN=your_polar_token Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: DATABASE_URL=postgresql://user:pass@localhost:5432/amaris GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key CORS_ORIGIN=http://localhost:5173 CLOUDINARY_CLOUD_NAME=your_cloud_name POLAR_ACCESS_TOKEN=your_polar_token CODE_BLOCK: DATABASE_URL=postgresql://user:pass@localhost:5432/amaris GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key CORS_ORIGIN=http://localhost:5173 CLOUDINARY_CLOUD_NAME=your_cloud_name POLAR_ACCESS_TOKEN=your_polar_token CODE_BLOCK: bun run db:push Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: bun run db:push CODE_BLOCK: bun run db:push CODE_BLOCK: bun run dev Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: bun run dev CODE_BLOCK: bun run dev - 💬 Chat-Based Interface – Generate images in a conversational flow. - 🎨 Style Transfer – Upload a reference image (like a sketch or painting) and the AI mimics that style. - ⚡ Blazing Fast Backend – Powered by Hono and running on Bun. - 🧠 Smart Vision – Uses Gemini to "see" your style references before generating. - 🔐 Full Auth System – Secure login with Better-Auth. - 💳 Credit System – Built-in logic for managing user credits and usage limits. - 🌑 Modern UI – Dark mode, Tailwind CSS 4, and shadcn/ui components. - Upload a Style: You drop an image into the chat (e.g., a pixel art character). - Vision Analysis: The backend uses Gemini's vision capabilities to understand the "vibe" of that image. - Prompting: You type "A futuristic city." - Generation: The app combines your prompt with the style reference and sends it through the Vercel AI Gateway to Google Gemini. - Result: Seconds later, you get a futuristic city rendered in pixel art style!