Transform 1 product photo into 12 professional marketing images in 30 seconds.
Save up to 99% compared to traditional studio photography.
Upload 1 product photo → Get 12 professional marketing images across 4 styles: Seeding, Social, Model, Display
- AI Image Generation - 1 photo → 12 images in ~30 seconds
- 4 Image Styles:
| Style | Description | Use Case |
|---|---|---|
| Display | Studio-quality product photos | Hero shots, luxury displays, macro details |
| Model | Lifestyle images with models | Hands-on demos, scene compositions |
| Social | Media-optimized images | Instagram, Facebook, seasonal campaigns |
| Seeding | UGC-style authentic photos | Reviews, flat lays, organic marketing |
- Multi-Industry Templates - Fashion, Beauty, Food & Beverage, Mother & Baby (60+ AI prompts)
- Community - Public image sharing, likes, comments, user following
- Points System - Credit-based pricing with Starter, Pro, Business & Enterprise tiers
- VN Payments - Bank transfer with QR code via SePay
- Affiliate Program - Referral codes, commission tracking, automated payouts
- Admin Dashboard - Real-time analytics, user management, content moderation
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| UI Components | Shadcn/UI (Radix UI + Tailwind CSS) |
| Styling | Tailwind CSS |
| Database | PostgreSQL via Supabase |
| Auth | Supabase Auth |
| Serverless | Supabase Edge Functions (Deno) |
| Storage | Supabase Storage |
| AI Engine | Google Gemini |
| Payments | SePay (Vietnam bank transfer + QR) |
| Hosting | Vercel |
src/
├── app/
│ ├── (site)/ # Marketing website (homepage, features, FAQ, blog, contact)
│ ├── dashboard/ # User dashboard (projects, analytics, billing, settings)
│ ├── admin/ # Admin panel (users, orders, analytics, moderation)
│ ├── community/ # Community features (shared images, profiles)
│ └── auth/ # Authentication routes
├── components/
│ ├── ui/ # Shadcn/UI base components
│ ├── admin/ # Admin-specific components
│ ├── dashboard/ # Dashboard components
│ └── layout/ # Layout components (header, footer, sidebar)
├── hooks/ # Custom React hooks
├── lib/ # Utilities (image generator, payment client, metadata)
└── integrations/
└── supabase/ # Supabase client configuration
supabase/
├── functions/ # 14 Edge Functions (image gen, payments, analytics)
└── migrations/ # 142 database migrations
git clone https://github.com/ungden/snapstudio.git
cd snapstudio
pnpm installpnpm devOpen http://localhost:3000. The app runs with mock data out of the box - no Supabase, no API keys required. You can explore the full UI, dashboard, community pages, and admin panel with demo user data.
Demo mode is active when
NEXT_PUBLIC_SUPABASE_URLandNEXT_PUBLIC_SUPABASE_ANON_KEYare not set (or still have placeholder values from.env.example).
To enable real authentication, database, AI generation, and payments, follow these steps:
- Go to supabase.com and create a new project
- Go to Settings > API and copy:
- Project URL (
https://xxxxx.supabase.co) - anon public key
- service_role secret key
- Project URL (
cp .env.example .env.localEdit .env.local with your real values:
# Supabase (required for auth & database)
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
# AI Image Generation (required for generating images)
GEMINI_API_KEY=your-gemini-api-key
# Payment - SePay (optional, for VN bank transfer payments)
SEPAY_WEBHOOK_API_KEY=your-sepay-webhook-keynpx supabase link --project-ref your-project-ref
npx supabase db pushNote: Migration files contain placeholder emails (
your-admin@example.com). Update with your actual admin email before running.
npx supabase functions deploy generate-images
npx supabase functions deploy generate-solo-image
npx supabase functions deploy process-batch-generation
npx supabase functions deploy create-order
npx supabase functions deploy confirm-payment
# ... deploy other functions as needed (see Edge Functions table below)Set secrets for Edge Functions:
npx supabase secrets set GEMINI_API_KEY=your-gemini-api-key
npx supabase secrets set SEPAY_WEBHOOK_API_KEY=your-sepay-webhook-keypnpm devOpen http://localhost:3000.
- Import the repo on vercel.com
- Add all environment variables from
.env.localto Settings > Environment Variables - Deploy. Vercel will auto-detect Next.js and build.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
Key tables with Row-Level Security (RLS):
| Table | Purpose |
|---|---|
profiles |
User accounts, subscription plans, points balance |
projects |
AI generation projects per user |
generated_images |
Output images with styles, prompts, watermarks |
prompt_templates |
60+ AI prompts by category and industry |
points_ledger |
Credit transaction history |
orders |
Purchase orders and payment tracking |
community_likes / community_comments |
Social engagement |
user_follows |
Creator following system |
affiliates / affiliate_commissions |
Referral program |
| Function | Purpose |
|---|---|
generate-images |
Batch AI image generation (12 images) |
generate-solo-image |
Single image generation |
process-batch-generation |
Batch processing orchestrator |
create-thumbnail |
Thumbnail generation |
add-watermark |
Image watermarking |
create-order |
Order creation |
confirm-payment |
Payment confirmation |
get-order-payment-info |
Payment QR code & info |
sepay-webhook |
Payment webhook handler |
monthly-points-allocation |
Monthly credits for subscribers |
admin-analytics |
Admin dashboard data |
admin-profitability |
Revenue & cost reports |
custom-claims |
JWT custom claims for roles |
create-affiliate-account |
Affiliate account setup |
Optimized for Vercel. Configure all environment variables in your Vercel project settings.
Built with Next.js, Supabase, and AI.
![@vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=64&v=4){kind=small}