Startup BuildFeatured
Cardly Studio
A content tool that stamps out card news in one go using 13 trend presets and AI prompts instead of designing each one by hand.
PersonalContribution 100%
★Key Metric: 13 trend presets · AI prompts · PNG/ZIP export
Engineering Role
FullstackFrontend
Startup Build
Cardly Studio
AI
#Web#Frontend#AI#Product
Overview
A content tool for managing project → card set → slide workflows on top of 13 card-news presets. It includes CopyVersion history, AI copy/image prompt building, PNG/ZIP export, background compositing, Vitest, and Playwright E2E.
My Work
- ▸Next.js 16 App Router + Supabase RLS + debounced autosave sync
- ▸Zustand state management plus real-time sync logic
- ▸Designed 13 card templates plus a real-time 3D render preview based on Three.js
- ▸Image library plus Supabase Storage (`cardnews-images`) integration
- ▸Client-side PNG/ZIP compositing pipeline with html-to-image + jszip
- ▸AI prompt builder on the Anthropic SDK plus MCP server integration (`src/lib/mcp`)
Features
- 13 design templates (Magazine / Aurora / Risograph / Brutalism / Y2K)
- Three-level hierarchy: project → card set (scenario/angle) → slide
- Unlimited CopyVersion history (label / restore)
- Per-card background image with overlay/blur plus library reuse
- AI prompt builder (copy plus image in 4 styles)
- PNG / ZIP export (bundled with metadata plus README)
Highlights
- 13 design presets (2026 trends)
- Project → card set → slide plus unlimited copy versions
- AI copy and image prompt builder
- PNG / ZIP export (with background compositing)
- Vitest + Playwright E2E coverage
Timeline
Role: Solo full-stack developer
Contribution: 100%
Collaboration: Personal
Tech Stack
</>Next.js 16, Supabase RLS, Three.js, MCP, 13 presets
Next.js 16TurbopackReact 19TypeScriptSupabasePostgreSQL (RLS)Tailwind CSS 4Three.jsZustandhtml-to-imagejszipAnthropic SDKMCPVitestPlaywrightVercel