Prompt Shape Creator
Next.js 16, TypeScript, React 19, Tailwind CSS v4, nodemailer
Problem
Image-generation workflows often lack a structured way to collect detailed prompt briefings from clients. Requests arrive as scattered messages, missing critical details about scene, characters, style, and technical preferences.
Constraints
Must work as a standalone form without requiring user accounts. Email delivery must be reliable, with a clipboard fallback when the API is unavailable. Form state must be protected against accidental page closure. Must support bilingual content (EN/PT) without server-side rendering for language detection.
Solution
A Next.js 16 App Router application with a structured briefing form split into logical sections (scene, characters, style, technical prefs, references). Uses React 19 useActionState + useTransition for non-blocking submission, nodemailer for SMTP delivery, and a custom autosave hook that persists form state to sessionStorage with beforeunload protection. Client-side language detection auto-switches between English and Portuguese.
Outcome
Streamlined prompt collection with zero lost briefings. Clipboard fallback ensures delivery even when email fails. Autosave prevents data loss from accidental navigation. Accessible, print-friendly, and responsive across devices.