Constellation Postcards
Create short “postcards” by placing stars on a canvas, connecting them into a constellation, and attaching a title + a 1–3 sentence message. The app generates a shareable-looking card view (with a random sky gradient, subtle twinkle animation, and optional date/location tag) and lets users save multiple postcards to localStorage, duplicate/edit them, and export as PNG. Components are cleanly separable: starfield canvas editor, connection/label tools, postcard preview, saved gallery, and export/settings panel.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure Tailwind content paths and add @tailwind directives + basic CSS variables in src/index.css.
by system
Implement src/App.tsx with a responsive two-pane layout (editor left, preview/gallery right).
by system
Create src/types/postcard.ts defining Star, Connection, Postcard, and Settings TypeScript types.
by system
Create src/lib/storage.ts with load/save functions for postcards and app settings.
by system
Create src/lib/utils.ts with uid(), clamp(), and random gradient palette helpers.
by system
Create src/hooks/usePostcards.ts to manage CRUD, duplicate, select, and persistence to localStorage.
by system
Create src/hooks/useSettings.ts to manage default gradient/twinkle/date-location toggles with persistence.
by system
Create src/components/editor/EditorToolbar.tsx with shadcn buttons for Select/Add Star/Connect/Label/Erase.
by system
Create src/components/editor/StarfieldEditor.tsx containing the canvas element and wiring to editor state props.
by system
Create src/components/editor/draw.ts to render gradient sky background, stars, connections, and labels on a 2D canvas.
by system
Create src/components/editor/handlers/addStar.ts to add a star at pointer position with default radius/brightness.
by system
Create src/components/editor/handlers/selectDrag.ts to hit-test stars and drag to reposition with snapping/clamp.
by system
Create src/components/editor/handlers/connect.ts to create/remove connections by clicking two stars in sequence.
by system
Create src/components/editor/handlers/erase.ts to delete a star and cascade-remove its connections and labels.
by system
Create src/components/editor/handlers/label.ts to attach/edit a short label near a star or at a free point.
by system
Create src/components/editor/editorState.ts with a reducer for tool mode, selection, hover, and pointer state.
by system
Create src/components/settings/GradientPicker.tsx to choose randomize/lock gradient options for the postcard.
by system
Create src/components/settings/TwinkleToggle.tsx to enable/disable subtle twinkle animation in preview.
by system
Create src/components/settings/TagInputs.tsx for optional date and location fields plus a show/hide toggle.
by system
Create src/components/editor/PostcardTextForm.tsx with title input and 1–3 sentence message textarea + counter.
by system
Create src/components/preview/PostcardPreview.tsx rendering the shareable card view with text + tag overlay.
by system
Create src/components/preview/TwinkleOverlay.tsx using CSS keyframes to animate subtle star twinkles over the card.
by system
Create src/components/preview/renderToCanvas.ts to draw the postcard scene to an offscreen canvas for export.
by system
Create src/components/export/ExportPanel.tsx with a button that exports the current postcard preview as PNG.
by system
Create src/components/gallery/SavedGallery.tsx to display saved postcards with thumbnail, title, and timestamps.
by system
Create src/components/gallery/GalleryItem.tsx showing a small preview and actions (select, duplicate, delete).
by system
Create src/components/gallery/NewPostcardButton.tsx to create a blank postcard with random gradient and select it.
by system
Create src/components/gallery/DeleteDialog.tsx using shadcn Dialog to confirm postcard deletion.
by system
Update src/App.tsx to connect hooks to Editor/Preview/Gallery/Settings/Export components with minimal prop drilling.
by system