Project Blueprint — What You're Building
The architecture, the stack, and a clear picture of what you'll ship
Written by the RadarTrek editorial team · June 2026
Before writing a single line of code, understand the product and the stack. This lesson maps out everything you'll build and why each piece of technology was chosen.
What you're building
A simple SaaS product: a link-in-bio tool where users sign up, create a public profile page with links, and optionally upgrade to a paid plan for custom domains and analytics. Clean, real, and complete.
- Public profile pages — Any user gets a page at /u/their-username with their links
- User auth — Sign up, log in, log out via Supabase Auth (magic link + password)
- Dashboard — Logged-in users manage their links, bio, and profile picture
- Stripe billing — Free plan (3 links) + Pro plan (unlimited, custom domain, analytics)
- Transactional email — Welcome on signup, payment receipt on upgrade
- Deployed — Live at a custom domain via Vercel, with Supabase as the backend
The stack
- Next.js 15 (App Router) — Full-stack React framework. Handles routing, server components, API routes, and deployment. The only framework you need for a complete SaaS.
- TypeScript — Typed JavaScript. Catches errors before they reach production. Standard in all serious projects.
- Tailwind CSS — Utility-first CSS. Write styles directly in your JSX without creating separate CSS files.
- Supabase — PostgreSQL database + Auth + Storage. Open source Firebase alternative. Free tier is generous enough to start.
- Stripe — Payment processing. Industry standard. Handles subscriptions, webhooks, invoices, and customer management.
- Resend — Transactional email. Simple API, great React Email integration.
- Vercel — Deployment. Push to GitHub, Vercel detects Next.js, deploys automatically. Zero configuration.
Prerequisites check
What you should know before starting
This course assumes you've completed (or are comfortable with) JavaScript Fundamentals, How the Web Works, and React Fundamentals. You should be comfortable with: variables, functions, async/await, fetch, React components, useState, useEffect, and props. SQL for Builders is useful but not required — we'll explain the queries we write.
▶ Environment setup — do this now
Install Node.js 20+ (LTS)
Download from nodejs.org — choose the LTS version
Check Node and npm
node --version npm --version
Result
v20.x.x 10.x.x
Install VS Code
Download from code.visualstudio.com. Install the ESLint and Tailwind CSS IntelliSense extensions.
Create a free Supabase account
supabase.com → Sign up → Create a new project. Save the project URL and anon key.
Create a free Stripe account
stripe.com → Sign up. Keep it in test mode for now.
Try this
Before writing a line of code, draw the architecture. On paper or in a free tool like Excalidraw, sketch: the pages (landing, signup, login, dashboard, profile page), the database tables (profiles, links), and the data flow (who reads what, who writes what). Mark which pages require authentication and which are public. This diagram will save you from structural mistakes once you start coding.