2 min read
Step 6: Deploying
Put your mood board tool on the internet.
Choose a Host
For simple static sites, Vercel and Netlify are free and easy.
Help me deploy this to Vercel.
Walk me through the steps.Or:
Help me deploy this to Netlify.The Deployment Process
Claude will guide you through:
- Creating an account (if needed)
- Connecting your project
- Deploying
For simple HTML/CSS/JS, deployment is usually just dragging and dropping files.
Get Your URL
After deployment, you’ll have a public URL like:
moodboard.vercel.appmoodboard.netlify.app
Test it in your browser. Add some items, refresh, and confirm localStorage works on the live site.
Optional: Custom Domain
If you own a domain:
Help me connect my custom domain to this deployment.Checkpoint
- Site deployed
- Public URL works
- Adding items and saving works on the live site
- You can share it with others
What You Learned
- Deploying static sites is fast and free
- Vercel/Netlify handle hosting for you
- localStorage works on deployed sites the same as locally
Congratulations
You built a real design tool from scratch. No frameworks, no libraries — just HTML, CSS, and JavaScript.
You used DOM manipulation to create elements dynamically, the drag-and-drop API for reordering, CSS Grid for layout, and localStorage for persistence. These are foundational web skills that transfer to any project.
Ideas for Extending
- Export the board as a PNG image using html2canvas
- Add a notes card type for freeform text
- Import colors from an image (extract dominant palette)
- Add board templates with preset layouts
- Support pasting images directly from clipboard