Day 7 — Ship It

⏱️ Time needed: 20–30 minutes

🎯 Goal: Deploy your palette generator to the internet so anyone with the link can use it.

📍 What’s Happening Today

Your tool is done. It works, it looks good, and it’s sitting on your computer. Today you put it on the internet.

This is called deploying — taking something that runs locally (on your machine) and making it available at a real URL (Uniform Resource Locator — a web address) that anyone can visit.

It’s easier than you think. Seriously, about 10 minutes.

🧠 The Concept

Right now your project lives in a folder on your computer. Deploying means uploading it to a service that hosts it for you — like posting a design to Dribbble, except it’s a live, working thing.

Option A: Deploy with Vercel (Recommended)

Vercel is a hosting platform that makes deployment almost embarrassingly easy.

Ask your AI assistant:

Help me deploy my palette generator project to Vercel. Walk me through the steps:
1. What do I need to sign up for?
2. How do I connect my project?
3. What commands do I run?

Keep it simple — this is a static HTML/CSS/JS project with no build step.

The general flow:

Create a free Vercel account (you can sign up with GitHub, GitLab, or email)
Install the Vercel CLI (Command Line Interface — a way to run tools by typing commands) or use their drag-and-drop upload
Point it at your project folder
It gives you a live URL

That’s it. Your tool is on the internet.

Option B: Deploy with Netlify

Netlify is another great option with a drag-and-drop interface:

Go to app.netlify.com/drop
Drag your project folder onto the page
Done. You get a live URL.

No account needed for the first deploy (though you’ll want one to keep it).

Option C: Deploy from Replit

If you’ve been using Replit, you’re already hosted:

How do I get a shareable public URL for my Replit project? I want anyone to be able to visit it.

Replit projects are already live — you just need to grab the URL.

After Deploying

Once you have your URL, try these:

Open it on your phone. Does the responsive layout work?
Send it to a friend. Watch them use something you built.
Post it somewhere. Twitter, LinkedIn, a design community. “I built this in a week with vibe coding” is a great conversation starter.

Custom Domain (Optional)

If you want a nicer URL than palette-generator-abc123.vercel.app:

How do I add a custom domain to my Vercel deployment? I want to use something like mypalettes.design or [yourname].dev.

This usually costs $10–15/year for a domain name. Totally optional, but it makes sharing feel more professional.

Take a Moment

You just:

Built a working web application from scratch
Used AI as your coding partner
Designed, iterated, and shipped — in one week
Put something real on the internet that anyone can use

A week ago you hadn’t written a line of code. Now you have a live tool with a URL.

That’s not a small thing. That’s a real thing.

💡 What You Learned Today

How to deploy a project to the internet
What hosting platforms are and how they work
That shipping is the easiest part (once you’ve built the thing)
That you are, in fact, someone who can build things for the web

⏭️ What’s Next

Phase 2 starts whenever you’re ready. You’ll build a landing page for your palette generator — a polished marketing page that presents your tool to the world. It’ll teach you layout, responsive design at a deeper level, and how to build multi-section pages.

The best part? You already have the content. You already have the product. You just need to present it.

→ Continue to Phase 2: Product Landing Page

🎯 Checkpoint: You should have a live URL that you can share with anyone. Open it on your phone and a different browser to make sure it works everywhere. If deployment feels confusing, try the Netlify drag-and-drop option — it’s the lowest-friction path.

🏆 Phase 1 Complete

What you built: A color palette generator with randomization, click-to-copy, lock/unlock, save/load, responsive design, and live deployment.

What you proved: You can build real, functional things for the web using your design instincts and an AI partner.

Skills unlocked:

Describing interfaces in natural language
The prompt → review → refine loop
Working with interactivity and user feedback
Saving data in the browser
Deploying to the internet

Onward. 🚀