Project overview : Built a full-featured AI-enabled Next.js app delivering a credits-based SaaS for Chat/Image/Video generation and payments. Server-side credit enforcement, typed Hono API routes, and a composable dashboard speed development and reduce fraud.

Teams needed a secure, auditable platform to offer AI features (chat, image, video) with metered billing and strict auth. Key concerns: correct credits accounting, secure webhooks, typed APIs, and a maintainable UI surface.

challanges: . confirm deductCredits usage and rollback on failures (chat/image/video).

. DB: ensure use of users.userId (unique) vs id (primary) consistently.

. Auth: server auth() vs client useAuth() — confirm userId available in server components (Header, layout).

Payments: verify Stripe webhook idempotency and key scopes. have custom payment UI that Works with the brand and schema colors.

Delivered an end-to-end Next.js App Router product with:Clerk authentication and middleware-protected routes Hono (OpenAPIHono) typed API routes deployed via a Vercel handler Drizzle ORM + Neon for relational storage OpenAI / Replicate integrations for model calls Stripe payments + webhook handling for credits purchasing shadcn UI + Tailwind for a consistent dashboard UI Server-side credits enforcement with transactional deduct/rollback logic

UI nodes: files/components to open first (dashboard layout, header, pages, credits UI). ClientLayer: hono-client.ts is the typed frontend ↔ backend contract. ServerLayer: Hono routes (chat.ts, image.ts, video.ts, payment.ts, userCredits.ts), auth webhook, and credits logic; DB is Drizzle + Neon. Integrations: OpenAI/Replicate for AI, Stripe for payments.

System architecture, typed API surface, credits model, Stripe integration, dashboard UI, and operational checks. Delivered code, tests, and docs for handoff. Impact

Happy to chat if you’re early-stage and want to move fast without overbuilding💙