Qualified from Round 1 to Finals | Solo Project
A powerful, fast, and easy-to-use online image editor runs in your browser.
🌐 Live Demo: https://vibe-editor-ten.vercel.app
A complete production-ready SaaS built solo from scratch in 2 weeks.
| Aspect | What I Built |
|---|---|
| 🎨 Frontend | Real-time Canvas editing with Konva.js, 10+ filters, keyboard shortcuts, responsive UI |
| 🔐 Auth | OAuth (Google) + Email/Password, multi-session support, Supabase Auth |
| 💳 Payments | Full Stripe integration: checkout, subscriptions, webhooks, billing portal |
| 📦 Backend | Server Actions, PostgreSQL database, file storage, API routes |
| 🚀 DevOps | CI/CD with Vercel, environment management, production deployment |
| 🎯 Product | Freemium model, project limits, usage tracking, onboarding flow |
Key Achievements:
- ✅ Built a complete SaaS product - not just a demo or proof-of-concept
- ✅ Implemented real business logic - subscriptions, trials, billing management
- ✅ 100% client-side image processing - zero server load for editing operations
- ✅ Modern stack: Next.js 16 + React 19 + TypeScript (latest versions)
- ✅ Drag & Drop Upload - Drop images directly into the editor
- ✅ Real-time Adjustments - Brightness, Contrast, Saturation, Hue, Blur controls
- ✅ Transform Tools - Flip, Rotate, Scale, Zoom
- ✅ 10 Professional Filters - Instagram-style presets (Vintage, Vibrant, B&W, Sepia...)
- ✅ Keyboard Shortcuts - Ctrl+S (Save), Ctrl+E (Export), Ctrl+R (Reset), Esc (Close)
- ✅ High-Quality Export - PNG, JPEG, WebP with quality control
- ✅ Auto-save - Automatically saves project after 3 seconds
- ✅ Dashboard - Manage all projects in one place
- ✅ Thumbnail Generation - Auto-generated previews for each project
- ✅ Project Limits - Free: 5 projects, Pro: Unlimited
- ✅ Stats Cards - Overview of projects, last updated
- ✅ Email/Password - Traditional signup and login
- ✅ OAuth Google - Quick sign-in with Google
- ✅ Multi-Session - Manage multiple accounts, easy switching
- ✅ User Profiles - Avatar, name, email management
- ✅ Stripe Integration - Checkout flow for Pro plans
- ✅ Monthly/Yearly Plans - Flexible billing options
- ✅ 3-day Free Trial - Try Pro for free
- ✅ Billing Portal - Cancel, update payment methods
- ✅ Webhook Automation - Auto-sync subscription status
- ✅ Responsive Design - Works on all devices
- ✅ Dark Mode - Follows system preference
- ✅ Loading States - Skeleton loaders everywhere
- ✅ Error Boundaries - Graceful error handling
- ✅ Toast Notifications - Real-time feedback
- ✅ Pro Gate Modal - Lock features for Free users
- Node.js 18+
- npm/yarn/pnpm
- Supabase account
- Stripe account
# Clone repository
git clone https://github.com/kiettt23/vibe-editor.git
cd vibe-editor
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env
# Setup environment variables (see below)
# Edit .env file with your keys
# Run development server
npm run devOpen http://localhost:3000 in your browser.
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx...
SUPABASE_SERVICE_ROLE_KEY=eyJxxx...
# Stripe (Test Mode for development)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
NEXT_PUBLIC_STRIPE_PRICE_MONTHLY=price_xxx
NEXT_PUBLIC_STRIPE_PRICE_YEARLY=price_xxx
# Site URL
NEXT_PUBLIC_SITE_URL=http://localhost:3000Quick links:
- Supabase: Supabase Dashboard
- Stripe: Stripe Dashboard
- Google OAuth: Google Cloud Console
- Framework: Next.js 16.0 (App Router)
- UI Library: React 19.2
- Styling: Tailwind CSS 4
- Component Library: shadcn/ui + Radix UI
- Canvas: Konva.js + React-Konva
- State Management: Zustand
- Forms: React Hook Form + Zod
- Database: Supabase PostgreSQL
- Authentication: Supabase Auth
- Storage: Supabase Storage
- API: Next.js Server Actions
- Payments: Stripe v20
- Hosting: Vercel
- CI/CD: Vercel Git Integration
- Monitoring: Vercel Analytics
vibe-editor/
├── app/ # Next.js App Router
│ ├── (auth)/ # Auth routes (login, signup)
│ ├── (marketing)/ # Public pages (landing, features, pricing)
│ ├── dashboard/ # User dashboard
│ ├── editor/ # Image editor workspace
│ ├── payment/ # Payment success/cancel pages
│ ├── actions/ # Server actions (auth, projects, subscription)
│ └── api/ # API routes (Stripe webhook)
├── components/
│ ├── editor/ # Editor components (Canvas, Toolbar, Panels)
│ ├── marketing/ # Marketing sections (Hero, Features, Pricing)
│ ├── shared/ # Shared components (Header, Footer, Logo)
│ └── ui/ # shadcn/ui components
├── hooks/ # Custom React hooks
├── lib/ # Utilities
│ ├── editor/ # Editor utilities (filters, export)
│ ├── stripe/ # Stripe helpers
│ ├── subscription/ # Subscription logic
│ └── supabase/ # Supabase clients
├── store/ # Zustand stores
├── types/ # TypeScript types
├── supabase/
│ └── migrations/ # Database migrations
├── docs/ # Documentation
│ ├── DEPLOYMENT_GUIDE.md # Production deployment guide
│ ├── ROADMAP.md # Feature roadmap
│ └── STRIPE_SETUP_GUIDE.md
└── public/ # Static assets
- Text Tool with custom fonts
- Shape Tools (Rectangle, Circle, Polygon)
- Layer System
- Advanced Filters (Curves, Levels)
- AI Background Removal
- AI Image Upscale
- AI Object Removal
- AI Auto-Enhance
- Team Workspaces
- Real-time Collaboration
- Comments & Annotations
- Batch Processing
- Preset Management
- Animation Export
- AI-Generated Images
Contributions are welcome!
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'feat: add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
Guidelines:
- Follow existing code style
- Write meaningful commit messages
- Add tests for new features (if applicable)
- Update documentation
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React Framework
- Supabase - Open Source Firebase Alternative
- Stripe - Payment Infrastructure
- shadcn/ui - Beautiful UI Components
- Konva.js - Canvas Library
- Vercel - Deployment Platform
- Author: Kiet Tran (@kiettt23)
- Email: kiettt23@gmail.com
- GitHub: https://github.com/kiettt23/vibe-editor
- Issues: https://github.com/kiettt23/vibe-editor/issues
Made by Kiet