Skip to main content

7.4 Deploy & Launch: Let the World See It

The code is written, the design is polished. Now comes the most exciting step — putting it on the internet so everyone can use it.

Step 1: Push to GitHub​

Before deploying, save your code to GitHub.

1.1 Create a GitHub Repository​

  1. Go to github.com and log in
  2. Click the "+" in the top-right corner → "New repository"
  3. Name the repo daily-focus
  4. Choose Public (if you want others to see your code)
  5. Do NOT check "Add a README" (we already have one)
  6. Click "Create repository"

1.2 Initialize Git and Push​

Run in your project directory:

git init
git add .
git commit -m "feat: AI Daily Focus Helper MVP complete"
git branch -M main
git remote add origin https://github.com/yourusername/daily-focus.git
git push -u origin main

Important: Make sure .env.local was NOT committed! Check that .gitignore includes .env.local. Next.js adds it by default, but double-check. Leaking API keys can lead to your account being stolen.

If .env.local was accidentally committed:

# Remove from git history
git rm --cached .env.local
git commit -m "remove env file"
git push

Then immediately go to the OpenAI and Supabase dashboards and regenerate your keys.

Step 2: Deploy with Vercel​

Vercel is Next.js's parent company — deploying a Next.js project takes just a few clicks.

2.1 Sign Up for Vercel​

  1. Go to vercel.com
  2. Click "Sign Up" and choose to log in with your GitHub account
  3. Authorize Vercel to access your GitHub repositories

2.2 Import the Project​

  1. In the Vercel dashboard, click "Add New..." → "Project"
  2. Find the daily-focus repository and click "Import"
  3. Vercel automatically recognizes this as a Next.js project — no settings changes needed
  4. Don't click Deploy yet — we need to set up environment variables first

2.3 Set Up Environment Variables​

On the same page, expand the "Environment Variables" section and add:

NameValue
NEXT_PUBLIC_SUPABASE_URLYour Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEYYour Supabase anon key
OPENAI_API_KEYYour OpenAI API Key

Click "Add" after each variable. Make sure all three are added.

Now click "Deploy." Wait 1-2 minutes and you'll see a green ✅ with the message: "Congratulations!"

Your app is live.

Vercel gives you a domain like daily-focus-xxx.vercel.app. Click it and your app opens.

2.4 Auto-Deploy on Every Update​

From now on, just git push and Vercel automatically detects code changes and redeploys. This is CI/CD (Continuous Integration/Continuous Deployment) — no extra setup needed.

Step 3: Custom Domain (Optional)​

The daily-focus-xxx.vercel.app domain isn't easy to remember. If you have your own domain, you can connect it.

3.1 Buy a Domain​

Recommended: Namesilo or Cloudflare. A .com domain costs around $8-10/year.

3.2 Connect in Vercel​

  1. Go to your Vercel project → Settings → Domains
  2. Enter your domain (e.g., dailyfocus.app)
  3. Click "Add"
  4. Vercel tells you which DNS records to configure

3.3 Configure DNS​

Go to where you bought your domain, find DNS management, and add the records Vercel specified (usually a CNAME record pointing to cname.vercel-dns.com).

Wait 5-30 minutes for DNS propagation, and you can access it via your custom domain.

Vercel automatically configures HTTPS (SSL certificate) — you don't need to worry about it.

Step 4: Add Analytics​

Your app is live and you want to know if anyone's using it. Add some simple visit tracking.

Option 1: Vercel Analytics (Easiest)​

  1. In your Vercel project → Analytics → click "Enable"
  2. Install the dependency: npm install @vercel/analytics
  3. Add to src/app/layout.tsx:
import { Analytics } from "@vercel/analytics/react";

// Inside the body tag, below children:
<Analytics />
  1. Push the code, wait for auto-deploy to finish
  2. Go back to the Vercel Analytics page and you'll see your visit counts

Option 2: Plausible (Privacy-Focused)​

If you care about privacy, use Plausible. It doesn't track personal information — only aggregate data. Just add a script tag in the <head> of layout.tsx.

Step 5: Share with Your First Users​

Your app is online. Now find people to use it.

Sharing Channels​

  1. WeChat Moments / Group Chats — most direct, post a message with a screenshot

    "Spent a weekend building a small tool with AI — set your 3 most important tasks every morning with AI motivation. Try it: your-domain.com"

  2. V2EX / SSPai / Jike — developer community users are more willing to try new products Title should clearly state "what it is + why you built it + tech stack," with a link

  3. Twitter/X — posting in English can reach more people

    "Built a simple focus tool in a weekend with AI coding. Set 3 daily priorities, get AI motivation. Try it: your-domain.com"

  4. Xiaohongshu — works well if the screenshots look good

Tips for Sharing​

  • Always include screenshots or screen recordings — nobody reads pure text
  • Explain "what problem this solves," not "what technology I used"
  • Don't expect lots of users — getting 10-20 people to try it is already great

Step 6: Collect Feedback​

Your first users are here. Listen to what they say.

Ask these questions:

  1. Can you tell what this page is for? (Test comprehension)
  2. Can you complete the "set tasks → save → get encouragement" flow smoothly? (Test usability)
  3. Anything confusing or inconvenient? (Find pain points)
  4. Would you open and use it every day? Why? (Test retention)

Tools:

  • Simplest: just ask via WeChat chat
  • More formal: use Typeform or Tencent Survey to create a short questionnaire
  • Advanced: add a feedback button at the bottom of the page, collect via Formspree

Step 7: Iterate Based on Feedback​

After collecting feedback, prioritize into three tiers:

PriorityApproachExample
Urgent BugFix immediatelySave button doesn't work, page shows blank
High-frequency requestsAdd this week"Can you add reminders?" "Want to see weekly stats"
Nice to haveNote it for later"Can you add a Pomodoro timer?" "Want background music"

Don't just do whatever users say. Observe first: if 3 out of 5 people mention the same thing, that's a real need.

🎉 Celebration Moment​

Stop and say this to yourself seriously:

"I built a product. It's running live. People are using it."

No matter how many shortcomings you have, no matter how many bugs you wrote, no matter how "ugly" your code is —

You did it. From an idea to a working product.

Many people who've studied programming for three years haven't done this. And you did it in one weekend.

Chapter Summary​

StepExplanation
Push to GitHubVersion control — don't leak .env.local
Vercel deployOne-click deployment, set env vars, auto-generate domain
Custom domainOptional, but more professional
AnalyticsVercel Analytics is the easiest — one line of code
Share & promoteWeChat + tech communities + social media
Collect feedbackAsk the right questions to find real needs
IterateFix bugs first, then high-frequency requests, nice-to-haves last

You didn't just build a product — you went through the complete "building a product" process. This experience is worth more than any tutorial.