Objective
Your mission
Deploy your capstone project, test the full flow on the live URL, and share with real users. Output: deployment_sharing_notes.md.
You need: A project that passed the full checklist (Lesson 03).
Time: 45 minutes.
Step 1: deploy to vercel or netlify (10 min)
The moment of truth
Deploying is the moment of truth. Everything you've built — the planning, the review habits, the checklists, the security audit — comes together here. If you did the work, the deployment is smooth. If you skipped steps, the deployment reveals it: blank pages (missing env vars), data leaks (missing RLS), crashes (swallowed errors). The deployment doesn't create problems — it reveals them.
- Push your code to GitHub (if not already):
git add .
git commit -m "Ready to deploy"
git push origin main
- Go to Vercel.com or Netlify.com
- Import your GitHub repo
- Configure build settings (auto-detected for most frameworks)
- Add ALL environment variables — this is the #1 deployment failure
- Click Deploy
- Wait 1-2 minutes for the build to complete
- Visit the live URL
Write in your file:
## Deployment
Platform: [Vercel/Netlify]
Build succeeded: [yes/no]
Live URL: [paste URL]
Step 2: set environment variables (5 min)
Critical step. The platform doesn't have your local .env file.
- Open your
.env file - Go to platform Settings → Environment Variables
- Add each variable (name + value)
- Select environment (Production, Preview, Development)
- Redeploy
Write in your file:
## Environment Variables
Variables added: [list all, e.g., VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY]
Redeployed after adding: [yes/no]
App works after env vars set: [yes/no]
Step 3: test the full flow on the live URL (10 min)
Don't assume the deployed app works the same as local. Test everything:
- Signup — create a new account
- Login — log in with the new account
- Core feature — [e.g., create a habit, mark it complete, view the list]
- Logout — log out
- Protected route — try to access the dashboard without logging in → should redirect to login
- Mobile — open the live URL on your phone or DevTools 375px
If anything breaks: Check the browser console for errors. Check Supabase logs. Fix and redeploy.
Write in your file:
## Live URL Testing
1. Signup: [works/broken — details]
2. Login: [works/broken — details]
3. Core feature: [works/broken — details]
4. Logout: [works/broken — details]
5. Protected route redirect: [works/broken — details]
6. Mobile: [works/broken — details]
Issues found: [list or "none"]
Fixes applied: [list or "none"]
Step 4: share your project (10 min)
Your project is live. Now share it.
Share with friends and family
- Send the URL with a brief description: "I built a [app name]. You can [what it does]. Try it: [URL]"
- Ask for specific feedback: "Does the signup work? Can you [core action]? Does it look OK on your phone?"
Share on social media
- Write a short post: "Just shipped my first vibe-coded app — [app name] built with [tools]. [URL]"
- Include a screenshot or screen recording
- Mention what you used: "Built with [tool], React, Tailwind, and Supabase"
Share in communities
- Reddit: r/webdev, r/SideProject
- Product Hunt (for polished projects)
- Discord/Slack communities you're part of
Write in your file:
## Sharing
Shared with friends/family: [yes/no — how many?]
Shared on social media: [yes/no — where?]
Shared in communities: [yes/no — where?]
People who tried it: [number]
Step 5: collect and prioritize feedback (10 min)
When users try your app, they'll find things you missed.
- Add a feedback mechanism — a "Report a bug" link, a feedback form, or ask them to message you
- Watch for patterns — if multiple people report the same issue, it's high priority
- Prioritize: - Critical: app crashes, data loss, auth broken → fix immediately - High: core feature broken for some users → fix within 24h - Medium: non-core feature broken, workaround exists → fix within a week - Low: UI polish, nice-to-have → fix when time allows
- Respond to feedback — thank users for reporting, tell them when it's fixed
Write in your file:
## Feedback
Feedback received: [list each item]
Priority assigned: [Critical/High/Medium/Low for each]
Critical/High issues fixed: [list or "none"]
The deployed capstone shows a blank page, though it worked locally. What does the lesson say deployment is doing?
Deployment reveals problems rather than creating them. A blank page usually means env vars weren't set on the platform.