Report Bug · Request Feature · Discussions
📸 Screenshots
Table of Contents
About
Magic Room is an AI-powered interior design assistant that helps anyone transform their living spaces. Upload a photo of your room, select a design theme, and get instant professional design suggestions powered by Google's Gemini Vision model. With a transparent credit system, secure authentication, and privacy-first approach, redesigning your space has never been easier.
Features
- Instant AI Design Generation: Upload any room photo and get multiple design variations in seconds
- Multiple Design Themes: Choose from Bohemian, Industrial, Minimalist, Modern, Scandinavian, and Tropical styles
- Credit-Based System: Start with free credits, purchase packs that never expire
- Before/After Comparison: Interactive slider to compare original and redesigned rooms
- Privacy-First: Images processed in-memory only, never stored on servers
- Real-Time Generation: Synchronous processing with live status updates
- Design History: View and revisit all your previous design generations
- Responsive Design: Works seamlessly on desktop and mobile devices
SEO and Performance
- Next.js Metadata API for dynamic Open Graph and Twitter cards
- Core Web Vitals optimization for fast loading
- Optimized images and Tailwind v4 for minimal bundle size
- App Router for improved performance and SEO
Enhanced UX
- Smooth page transitions and loading states
- Drag-and-drop image upload with validation
- Animated buttons and interactive elements
- Accessible forms with keyboard navigation
- Clear progress indicators during AI processing
- Responsive layouts for all screen sizes
Demo
- Run locally with
pnpm dev at http://localhost:3000
- Deploy to Vercel with one-click deployment and configure environment variables
Quick preview: Upload room photo → Select design theme → AI generates variations → Compare with slider → Download results
How It Works
- User uploads a room image via drag-and-drop (converted to base64 client-side)
- User selects room type and design theme, optionally adds custom prompt
- System validates authentication and credit balance
- Image is sent to OpenRouter's Google Gemini Vision model for processing
- AI generates design variations and returns results immediately
- Credits are deducted and generation metadata is stored
- User can compare designs with before/after slider and download results
Built With
| Category | Technology |
|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS v4 + shadcn/ui |
| State Management | Zustand |
| Auth | Clerk |
| Database | Supabase (PostgreSQL) |
| AI Model | Google Gemini 3.1 Flash (via OpenRouter) |
| Rate Limiting | Upstash Redis |
| Payments | Stripe |
| Validation | Zod |
| Logging | Pino |
| Hosting | Vercel |
Getting Started
Prerequisites
- Node.js 20+
- pnpm
- Accounts: Clerk, Supabase, Stripe, OpenRouter, Upstash Redis
Installation
git clone https://github.com/ThanosKa/magic-room.git
cd magic-room
pnpm install
Environment Setup
cp .env.example .env.local
# Fill in the following variables:
# Clerk: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY
# Supabase: NEXT_PUBLIC_SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, SUPABASE_ANON_KEY
# Stripe: STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_PRICE_IDS
# OpenRouter: OPENROUTER_API_KEY
# Upstash Redis: UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN
# App: NEXT_PUBLIC_APP_URL
Database Setup
Run the Supabase migrations:
# Apply migrations from supabase/migrations/
# Or run the SQL files in order through your Supabase dashboard
Run Locally
pnpm dev
# Visit http://localhost:3000
Testing
pnpm lint — ESLint quality checkspnpm type-check — TypeScript compilation checkpnpm test:run — Run Vitest test suitepnpm test:coverage — Run tests with coverage report
Usage
- Sign up or sign in with Clerk authentication
- Upload a photo of your room via drag-and-drop
- Select your room type and preferred design theme
- Optionally add custom design instructions
- Click "Generate Designs" (requires available credits)
- Wait 30-60 seconds for AI processing
- Compare results with the before/after slider
- Download your favorite design variations
- View your design history in your account
Project Structure
magic-room/
├── app/ # Next.js App Router pages and API routes
│ ├── api/ # API endpoints (generate, checkout, webhooks)
│ ├── generate/ # Main generation page
│ └── pricing/ # Pricing page
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ └── ... # Custom components
├── lib/ # Utility libraries and configurations
│ ├── openrouter.ts # AI model integration
│ ├── stripe.ts # Payment processing
│ └── supabase.ts # Database client
├── stores/ # Zustand state management
├── supabase/ # Database migrations and seed data
├── tests/ # Test files
└── .github/ # GitHub configuration
Architecture
- App Router: Next.js 15 App Router for routing and API endpoints
- Authentication: Clerk middleware for session management
- Credit System: Atomic operations in Supabase with non-expiring credits
- AI Processing: Synchronous OpenRouter API calls with Google Gemini Vision
- Privacy: Images processed in-memory only, no persistent storage
- Rate Limiting: Upstash Redis for abuse prevention (100 generations/hour per user)
- State Management: Zustand for client-side state (credits, generation status)
- Validation: Zod schemas for type-safe API validation
- Logging: Structured logging with Pino
Deployment
Deploy to Vercel
The easiest way to deploy Magic Room is with Vercel:
- Push your code to GitHub
- Import the project in Vercel
- Add all environment variables from
.env.local
- Update
NEXT_PUBLIC_APP_URL to your production domain
- Deploy
Manual Deploy
Build locally and run on Node 20+:
pnpm build
pnpm start
Production Checklist
CI
.github/workflows/ci.yml runs automated checks on every push and pull request:
- ESLint for code quality
- TypeScript type checking
- Vitest test suite execution
- Uses Node.js 20 and pnpm for consistency
Contributing
Contributions are welcome! Please read CONTRIBUTING.md and follow our Code of Conduct. Use the issue templates for bugs and features, and the PR template when submitting changes.
Security
Report security vulnerabilities privately as described in SECURITY.md. Do not file public issues for security concerns.
Acknowledgments
Star History
Contact
Support
License
Licensed under Apache License 2.0. See LICENSE.
Back to Top
