Coding a Free AI Starter Kit (Next.js/Supabase) & Strategy Tips

Show Notes

Parker dives back into Turbo Kit, shares quick AI/product strategy notes, and starts refactoring a free Next.js/Supabase AI starter with Google and GitHub sign-in. concise, action-oriented, and straight to the plan.

Turbo Kit refinements and plan

• Finishing touches on the free Turbo Kit template to make it easier to use.
• Move toward a single, clear CTA: “Get started” with minimal fluff.
• Remove extraneous sections (docs, multiple CTAs, gradients) to accelerate onboarding.
• Plan to publish refinements on the main channel while keeping the daily cadence in mind.

Strategy: PRD and GTM stance

• PRD is essential: treat it as the foundation, both at feature and product levels.
• Start from a real problem, not a feature idea. The solution should directly address pains.
• B2B vs B2C go-to-market:
  • B2C: consumer behavior drives adoption, but can be messier to scale.
  • B2B: bottoms-up often works better if you have strong product-led value; look for a champion in the org.
• Bottom-up example: Figma-style adoption where one advocate drives enterprise adoption after initial success.

UX research tips for product design

• When testing interfaces, watch users’ facial cues to gauge what stands out (call-to-action focus).
• Do feedback sessions during peak pain moments (e.g., busiest restaurant times) to capture real friction.
• Use rapid, in-person interviews to validate concepts before heavy engineering lift.

Plan for the Free AI Starter Kit (Next.js + Supabase)

• Rebuild approach to be approachable “out of the box” with a single, clear funnel.
• Key tasks:
  • Strip down the UI to a clean Get Started page.
  • Add essential OAuth providers (Google and GitHub) via Supabase UI blocks.
  • Remove unneeded pages and navigation to reduce decision fatigue.
  • Implement a streamlined header with a GitHub link and a sign-in flow.
  • Prepare for a PRD-driven README with setup steps (OAuth client IDs, secrets, redirect URIs).
  • Configure a dev tunnel (local host:54321 or equivalent) for OAuth callbacks during local development.

Auth flow and provider setup (Google + GitHub)

• Google sign-in:
  • Create a Google Cloud project, set up OAuth 2.0 credentials, and obtain client ID/secret.
  • Configure the redirect URI to match the dev tunnel (for local testing).
• GitHub sign-in:
  • Create an OAuth App in GitHub Developer settings, obtain client ID/secret, and set the redirect URL accordingly.
• Implementation notes:
  • Use Supabase UI blocks for sign-in components.
  • Centralize auth instantiation (singleton pattern) for reuse across pages.
  • Remove optional sign-up flows you don’t need to keep the focus on getting started.

Code and architecture notes (practical refactor plan)

• Move to modular components: separate Sign-in buttons, header, and footer into dedicated files.
• Replace hard-coded prompts with props (e.g., a dynamic prompt badge that accepts a prompt string).
• Clean up environment handling and move sensitive config into a secure pattern (env vars, server/client separation).
• Start with a minimal homepage and a single “Get started” button; de-emphasize secondary sections.
• Prepare for future Rag (Retriever-Augmented Generator) integration with Supabase Edge Functions.

PRD and documentation workflow

• Use Taskmaster to parse the PRD and help generate a README outlining:
  • OAuth setup steps (Google + GitHub)
  • Local dev setup with a config tunnel
  • How to run and test the starter kit
• The README should be approachable for users with minimal development experience:
  • Step-by-step Google sign-in setup
  • Step-by-step GitHub sign-in setup
  • Local testing workflow and how to deploy if needed

Next steps and long-term plan

• Add Rag-based flows and Edge Functions for a batteries-included AI app.
• Use a templated, repeatable pattern to rapidly spin up ais with vector stores and embeddings (e.g., using OpenAI or alternatives).
• Keep the daily cadence: one focused build + practical strategy tips.

Takeaways

• Start from the problem, not the feature; PRD clarity accelerates AI product work.
• Bottom-up B2B can win if you ship a compelling, lovable product with a champion in the org.
• For starter kits, a clean funnel and easy sign-in flow dramatically reduce friction for new users.
• Plan for onboarding docs and a repeatable setup flow so others can replicate quickly.

Links

• Supabase (authentication, UI blocks, and edge capabilities)
• Google OAuth 2.0 Setup (setup and redirect URI guidance)
• GitHub OAuth Apps (setup and redirect guidance)
• Taskmaster AI (AI-assisted PRD parsing and document generation)
• Supabase Edge Functions (for scalable, batteries-included AI workflows)
• Next.js (React framework for the starter kit)