PixScribe
SaaS text-to-image generator with a metered credit system and Razorpay payments wired end to end.
- React
- Node.js
- MongoDB
- Razorpay
- Tailwind CSS
The problem
AI image generation has a real per-request cost, so a usable product needs more than a prompt box - it needs metering, payments, and account state that stays correct even when a payment flow is interrupted halfway.
PixScribe is the full SaaS loop: generate, run out of credits, pay, keep generating.
What I built
A full-stack web app where users generate AI images from text prompts, with every generation debited against a per-account credit balance stored in MongoDB.
A Razorpay integration handles payment processing for credit top-ups, verifying successful transactions server-side before balances update - so credits only appear when money actually moved. The UI is built with Tailwind CSS and Framer Motion for smooth layout and state transitions.
Architecture
React frontend against a Node.js/Express API with MongoDB for users, balances and generation history. The payment flow goes client → Razorpay checkout → server-side verification of the transaction signature → atomic credit update, keeping the balance authoritative on the server rather than trusting the client.
Results
- Credits meter real generation cost per account, with balances updated automatically on verified payments.
- Payment verification is server-side - client-reported success alone never credits an account.
- Fast, responsive UI with animated state transitions across the generate → pay → generate loop.
Stack
- Frontend
- React · Tailwind CSS · Framer Motion
- Backend
- Node.js · Express · MongoDB
- Payments
- Razorpay