Sketchy is an ai-powered web application that converts hand-drawn wireframes into functional websites using AI. Users draw interface mockups on a canvas, and the application generates production-ready HTML, CSS, and JavaScript code.
- Standard email/password authentication with bcrypt hashing
- GitHub OAuth integration
- Persistent user sessions with MongoDB storage
- Interactive drawing canvas powered by tldraw
- Freehand wireframe creation with drawing tools
- Real-time canvas state persistence
- Auto-save functionality to prevent data loss
- Converts canvas drawings to website code using Google Gemini API
- Supports multiple design styles: minimal, modern, playful, professional, glassmorphism, brutalist
- Generates complete HTML, CSS, and JavaScript files
- Live preview of generated websites in split-pane view
- Regeneration capability with style customization
- Create and manage multiple projects per user
- Project dashboard with recent work view
- Project search and filtering
- Automatic project naming and renaming
- Project metadata tracking (creation date, last modified)
- Automatic version snapshots on each generation
- Version history browser with timestamps
- Preview previous versions before restoring
- Restore functionality to revert to earlier states
- Download generated websites as ZIP archives
- One-click deployment to GitHub repository and Vercel
- Automatic repository creation and configuration
- Public URL generation for deployed sites
- Responsive dashboard with project gallery
- Collapsible sidebar navigation
- Dark mode support
- Real-time loading states and progress indicators
- Split-pane layout for canvas and preview
- Frontend: Next.js, React, TypeScript
- Canvas: tldraw
- AI: Google Gemini API
- Database: MongoDB Atlas with Mongoose
- Authentication: bcryptjs, GitHub OAuth
- Styling: CSS Modules
- Icons: Lucide React
npm installnpm run devnpm run build
npm start