Write the landing page, switch to live payments, and launch

Write the landing page copy before touching code

Write every word of your landing page in your notes first. Founders who write copy before designing ship better pages.

• HEADLINE: "Grade your landing page copy in 30 seconds" — keeps this exact timeframe. It is specific and creates a clear expectation.
• SUBHEADLINE: "Paste your headline, subheadline, CTA, and feature bullets. Get a score out of 10 and a specific rewrite suggestion for each — instantly. Built for non-developer founders who just shipped something and want real feedback, not compliments."
• HOW IT WORKS — 3 steps: (1) "Paste your copy into four fields." (2) "Get a score and a specific rewrite for each element." (3) "Fix what is broken. Ship copy that actually converts."
• FREE TIER HOOK: "3 free grades. No credit card. See if your copy is working before you launch."
• PRICING — two tiers: Free (3 grades, all four elements graded, specific rewrites) and Pro at $15/month (unlimited grades, full history, public shareable links).
• FAQ — write answers to these three questions before building: (1) "What exactly does it grade?" (2) "Is this just AI being nice?" — answer: it is calibrated to be honest, not encouraging. Low scores are normal for first drafts. (3) "Can I cancel anytime?" — yes, from the Stripe portal.
• Write all of this in your notes now. Do not open a code file until you have the full copy written.

Build the marketing landing page with Claude Code

Use Claude Code to build the full marketing page that shows when users are not signed in.

• Open Claude Code and paste: "Update app/page.tsx so that: when the user is NOT signed in, it shows a full marketing landing page instead of the grading form; when the user IS signed in, it shows the grading tool as before. The landing page should include: (1) A sticky top navigation with the product name 'Copy Grader' on the left and 'Sign in' (ghost button) and 'Grade free →' (emerald filled button) on the right. (2) A hero section centred with the headline, subheadline, a 'Start grading — free' CTA button, and below it the text '3 free grades. No credit card.'. (3) A 'How it works' section with three numbered steps. (4) A pricing section with two cards side by side: a Free tier card with a grey border and a Pro tier card with an emerald border and a 'Most popular' badge. (5) A FAQ section with three questions in an accordion (click to expand/collapse). (6) A footer with the product name and 'Built with Claude Code, Supabase, and Stripe.'"
• After Claude Code finishes, review the page at localhost:3000 while not signed in.
• Check: is the layout clean? Is the CTA obvious? Is the pricing clear?
• Do not spend more than 15 minutes on visual polish today. A working launch beats a perfect page.
• If the page is very long, add scroll-smooth behaviour and make sure the CTA in the hero is visible above the fold on a laptop screen.

Add a results preview to the hero section

Show a static example of what a grade looks like — directly in the hero so visitors see the value instantly.

• Open Claude Code and paste: "Add a static grade result preview component to the hero section. It should look like a real result card set and contain: a small label 'Example result' in grey above it, then four mini cards in a 2x2 grid showing: Headline 4/10 with a red badge and the text 'Describes a feature, not a benefit', Subheadline 6/10 amber badge 'Who it is for is clear, but the outcome is vague', CTA 3/10 red badge 'Submit is the worst possible CTA button text', Bullets 5/10 amber badge 'Lists features, not outcomes'. Below the grid, an Overall row: 5/10 — Top fix: Change your headline to name what the user gets, not what the product does. Style it as a floating white card with a subtle shadow. On desktop, place it to the right of the hero text. On mobile, place it below the CTA button."
• The example scores (4, 6, 3, 5) are intentionally realistic and low.
• Low example scores make the product feel honest — if you showed 9/10 on everything, visitors would not believe the feedback is real.
• The specific feedback snippets ("Describes a feature, not a benefit") show exactly the kind of value the product delivers.
• Test on mobile by narrowing your browser window — the preview should stack below the text, not overflow sideways.

Switch Stripe to live mode

Enable real payments by completing your Stripe business details and switching to live keys.

• Before switching, confirm the entire checkout flow works in test mode on the live Vercel URL.
• In Stripe, go to Settings → Business Details. Complete your business name, physical address, and phone number.
• Go to Settings → Payouts. Add your bank account (sort code and account number on UK, routing + account number in the US). Stripe will verify the account.
• Once the business details are complete, toggle from Test mode to Live mode in the top-right corner.
• In Live mode, go to Developers → API Keys. Copy the live Publishable Key (pk_live_) and live Secret Key (sk_live_).
• Create your product in Live mode: Products → Add Product → same name, same $15/month price. Copy the live Price ID (price_live_...).
• Create a live webhook: Developers → Webhooks → Add Endpoint → your Vercel URL /api/webhook → select checkout.session.completed. Copy the live Signing Secret.
• Update Vercel environment variables: replace all four Stripe variables with the live versions (pk_live_, sk_live_, live price ID, live webhook secret).
• Trigger a Vercel redeploy after updating the environment variables.
• IMPORTANT: After switching to live mode, real cards will be charged real money. Test with a very small real card if you want to confirm it works — then refund it immediately from the Stripe dashboard.

Write and publish your launch post

Write a real launch post and publish it to the community you identified on Day 1.

• Use this template for r/SideProject or r/indiehackers:
• "I built a landing page copy grader for non-developer founders in 7 days."
• "Problem: I kept seeing non-dev founders ship apps with landing pages that described features, not benefits. Nobody was converting."
• "What I built: a tool that grades your headline, subheadline, CTA, and feature bullets out of 10 and gives specific rewrites. Takes 30 seconds."
• "Stack: Next.js, Claude API, Supabase, Stripe. No coding experience when I started this week."
• "3 free grades. $15/month after that. [YOUR LINK]"
• "Happy to grade anyone's landing page copy in the comments for free — just paste your headline and I'll give you an honest take."
• That last line is the most important. Offering free manual grades in the comments gets real engagement and drives real sign-ups.
• Post the same content (shortened) on Twitter/X with your link.
• If you followed this challenge on NonDevApps.com, tag @NonDevApps in your tweet.
• Do not overthink the post. A simple honest post ships faster and gets more engagement than a polished marketing post.

Write your Day 7 build log

Document what you built this week and publish it as content — for your own site, LinkedIn, or NonDevApps.

• Write a build log post using this structure (keep it under 300 words):
• WHAT I BUILT: One sentence. "A landing page copy grader for non-developer founders. You paste your headline, subheadline, CTA, and bullets. You get a score and a rewrite suggestion for each."
• THE STACK: Claude API, Next.js, Supabase, Stripe. Deployed to Vercel.
• THE HARDEST MOMENT: Pick one. The Stripe webhook? The auth flow? The first time the grade results appeared on screen?
• THE THING I ALMOST QUIT AT: Be honest. There was a moment. What was it?
• WHAT I WOULD DO DIFFERENTLY: One thing. Not a list — one thing.
• THE LINK: Your live URL.
• Honest build logs with specific hard moments get more readers than polished success stories.
• If you wrote this on your own site, share the link in the NonDevApps community.
• If you want to be featured as a real example on NonDevApps.com, email the link to the NonDevApps team.

Set your 30-day targets and first weekly action

Close the challenge by writing three specific numbers and one weekly action you will take for the next four weeks.

• Write these three numbers in your notes:
• 30-day signup goal: ___ (realistic for a new product: 20–50 signups)
• 30-day active user goal: ___ (users who grade at least once: 10–30)
• 30-day paid subscriber goal: ___ (1–5 is realistic and meaningful)
• Write this weekly action: every week for the next 4 weeks, I will [do one specific thing to grow this]. Good examples: post one launch update in r/SideProject, DM one founder whose landing page could use grading, share one real grade result (with permission) as content.
• Check Vercel Analytics (enable it in the Vercel dashboard if you have not) every Monday.
• Check Supabase grades table every Monday — how many new grades ran last week?
• Check Stripe dashboard every Monday — any new subscribers?
• Do not tune your product more until you have 10 real users giving you feedback. Everything before 10 users is a guess.
• The product is built. The work of growing it starts now.