📌 Project Overview
The SaaS Landing Page + App template is a complete boilerplate for software products that need both a compelling marketing site and a fully functional application layer. From the public-facing landing page with pricing tiers to authenticated dashboards with analytics charts, this template covers the entire SaaS lifecycle — including Stripe subscriptions, multi-tenant organization support, and transactional email.
Built for founders and development teams who want to skip the infrastructure setup and ship faster, this template includes everything needed to go from zero to a paying customer pipeline in days rather than weeks.
🧩 Core Features
1. Marketing + App Split Architecture
The landing, features, and pricing pages are statically generated (SSG) for instant load and SEO. Post-login, users enter an SSR-powered app shell with a sidebar nav and protected routes — cleanly separated via Next.js route groups.
2. Stripe Subscriptions & Billing Portal
Monthly/annual pricing toggle maps to Stripe Price IDs. Checkout sessions, customer creation on signup, and a Stripe Billing Portal redirect are all wired up. Stripe webhooks sync subscription status to Supabase in real time.
3. Multi-Tenant Organization Model
Users belong to organizations. Supabase RLS scopes all data by org_id so each tenant's data is completely isolated — ready for B2B SaaS use cases with team invites and role management.
4. Analytics Dashboard with Recharts
The protected Dashboard features Recharts-powered analytics widgets (bar charts, line charts, KPI cards) and a collapsible sidebar nav — giving users a clear view of their product usage data.
5. Full Auth Flow
Email/password registration, login, and password reset are all implemented via Supabase Auth. Middleware protects all app routes and redirects unauthenticated users to login.
6. Settings & Account Management
A Settings page allows users to update their profile, change their password, and delete their account. A danger zone section handles permanent data removal with confirmation guards.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Marketing SSG + app SSR |
| Styling & UI | Tailwind CSS + shadcn/ui + Radix UI | Consistent design system |
| Charts | Recharts | Analytics dashboard widgets |
| Forms | React Hook Form + Zod | Onboarding & settings forms |
| Payments | Stripe API + Subscriptions | Billing & subscription management |
| Database | Supabase (PostgreSQL) | Users, teams, feature flags, audit logs |
| Auth & Access | Supabase Auth + RLS | Multi-tenant access control |
| Webhooks | Stripe Webhooks | Subscription status sync |
| Resend / Postmark | Welcome & invoice emails | |
| Backend Logic | Supabase Edge Functions | Usage metering & webhooks |
| Hosting | Vercel / Railway | Full-stack deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Landing | Hero, feature grid, social proof, and primary CTA |
| Features | Detailed feature breakdown with icons and descriptions |
| Pricing | Monthly/annual toggle linked to Stripe Price IDs |
| Login / Register | Supabase Auth flows with email/password |
| Dashboard | Analytics charts, KPI cards, sidebar nav |
| Settings | Profile edit, password change, account deletion |
| Billing | Stripe subscription status and portal redirect |
| Docs | Static documentation pages with code examples |
🔒 Key Technical Highlights
- Stripe webhook handler for subscription lifecycle events
- Middleware enforcing protected app routes and login redirects
- Multi-tenant RLS: all data scoped by org_id across every table
- Supabase schema: users, organizations, memberships, subscriptions, feature_flags, audit_logs
- Full .env.local.example and package.json for rapid project bootstrapping