Technology Stack
Next.js, TypeScript, Tailwind CSS, shadcn/ui, Hono, PostgreSQL, Drizzle ORM, Auth.js, OpenAI, Replicate, Cloudinary, Polar, Zod, React Hook Form, Vercel
Overview
Duration: 5/2024 - ongoing
SketchPad AI closes the gap between a rough idea and a presentable asset. A marketer, creator, or product team member sketches a layout the way they would on a whiteboard, and the platform returns a finished graphic — no design software, no design skills, no waiting on a designer for a thumbnail that has to ship today.
The product bet is that most "design work" in a content pipeline is not creative direction, it is execution on an idea the person already has in their head. Sketching is the fastest way to get that idea out; everything after it can be automated.
The Generation Pipeline
- Sketch to image — the core transformation, running hand-drawn input through diffusion models hosted on Replicate
- Style application — the same sketch rendered against different visual directions, so a user compares outputs instead of committing to the first result
- Structure recognition — detecting the common shapes a sketch implies (panels, cards, headings, iconography) so the output respects the intended layout rather than reinterpreting it
- Prompt assistance — language-model support for turning a user's short description into a fuller generation prompt
- Background isolation and replacement — separating the subject so it can be placed on a chosen background
- Multi-format export — raster and vector output at controllable resolution, sized for the platforms the asset is actually going to
Editor & Workflow
- A browser canvas editor with the drawing, selection, and layer controls needed to prepare and adjust a sketch before generation
- Generation history — every result kept and retrievable, so a user can go back to an earlier direction instead of regenerating and hoping
- Project organisation — work grouped into projects rather than dumped into a single library
- Asset reuse — generated graphics saved and reusable across projects
- Templates — starting points for the most common output formats
Technical Implementation
- A Hono API layer — lightweight, fully typed, running the generation orchestration and the CRUD surface with end-to-end type inference into the client
- Postgres with Drizzle ORM — a type-safe schema where a migration and the query layer cannot silently disagree
- Auth.js for session management and access control
- Cloudinary for image storage, transformation, and CDN delivery, keeping generated assets off the application's own bandwidth
- Polar for subscription billing and plan entitlements
- Async generation handling — generation is slow and failure-prone by nature, so requests are tracked with explicit state and surfaced to the user with real progress rather than a spinner that might mean anything
- Zod validation on every boundary, shared between client and server
User Experience
- Progressive disclosure — the interface starts as a canvas and reveals controls as they become relevant, rather than opening on a toolbar of forty icons
- Responsive across devices, so a sketch can be captured on a tablet and finished on a desktop
- Keyboard shortcuts for the editor actions used most
- Light and dark themes
- Clear credit visibility — users always know what a generation costs them before they run it
This project sits at the intersection of a genuinely useful AI capability and the unglamorous product engineering that makes it shippable: type safety from database to component, billing and entitlements that actually gate usage, and an async pipeline that stays honest with the user when a model is slow or a generation fails.