Next.js SaaS Dashboard Starter - TypeScript, Tailwind & SQLite

A complete starting point for a subscription web app, written from scratch: a Next.js 16 (App Router, React Server Components, server actions) project in strict TypeScript with Tailwind CSS 4 design tokens and a built-in SQLite database. It runs locally with npm install and npm run dev: no Docker, no database server, no external service, no API keys.

What is inside

• A designed public landing page with hero, feature grid, pricing with a monthly/yearly switch, FAQ and footer
• Sign-up and sign-in with scrypt password hashing, signed httpOnly session cookies stored as hashes in the database, constant-time comparison, and rate limiting on sign-in (5 attempts per email in 15 minutes) and on sign-up. Per-IP limits (30 sign-in attempts per 15 minutes, 10 sign-ups per hour) apply only when you set TRUST_PROXY=true behind one trusted reverse proxy that appends the client address to X-Forwarded-For; without it forwarded headers are ignored and all callers share one much larger bucket, so the per-email limit is the main protection
• Signed-in dashboard with a collapsible icon rail, workspace switcher, and light and dark themes (warm paper and graphite, one teal accent, system fonts, no web fonts)
• Overview page with monthly recurring revenue, growth against last month, active customers, net new customers, churn and average revenue per customer, plus hand-drawn SVG charts (area, grouped bars, donut, sparkline) with a screen-reader data table behind the area and bar charts and no chart library
• Customers table with search, status tabs, plan filter, sortable columns and pagination, plus a customer page with revenue history and create, edit and delete
• Projects with plan-based limits, archive and restore, and edit and delete
• Multiple workspaces per account, with team members, invitation links (no email is sent; you copy the link), seat limits per plan and removal of members
• Owner, admin and member roles checked on the server for every action and for the restricted pages, not only hidden in the menu
• Billing against a simulated payment provider with test card numbers: immediate upgrades with proration, downgrades scheduled for the end of the period, cancel and resume, failed-payment handling with retry after the card is replaced, and an invoice list
• Audit log with filters for sign-ins, projects, customers, team, billing and workspace events
• Settings for profile, password change (signs out other sessions), workspace rename, leaving and deleting a workspace
• Small hand-written SQLite data layer on the Node.js built-in node:sqlite module with versioned migrations (no native add-ons), Zod validation for every form, and a clock you can freeze for tests and demos
• Seed command that builds a demo workspace (fictional company, 3 demo users, 40 customers, 12 months of revenue, projects, invoices, an open invitation and an audit trail) and can be run again safely: the data is generated relative to the day you run it, running it again on the same day gives the same content, and the ids of workspaces, customers, projects and invoices stay the same (audit log, revenue rows and the invitation are rebuilt, and anything you added inside the two demo workspaces is removed). Set APP_FIXED_NOW (for example 2026-10-26T15:30:00Z) to reproduce the screenshots exactly
• 88 automated Vitest tests covering the data layer, authentication, rate limiting, roles, billing and proration, the seed, validators and every server action, including hostile-input checks, plus a smoke script that requests every route as a signed-out visitor and as each demo role against a running server, with hostile query strings, unusual HTTP methods and bad ids

Demo accounts

After npm run seed three fictional accounts exist in the Fernhill Studio workspace: maya.okafor@example.com (owner), daniel.reyes@example.com (admin) and priya.nair@example.com (member). The seed command prints the shared demo password, and also prints a demo invitation link you can open to try joining a workspace.

Requirements

• Node.js 22.18 or newer (the project uses the built-in node:sqlite module and runs TypeScript scripts directly) and npm. It was tested on Node.js 24.18 on Windows 11 only; Node.js 22.18 is the documented minimum and was not tested here
• Works offline after npm install. The database file is created in a local .data folder on first run
• npm may print a notice that the install script of unrs-resolver was not run; linting works without it

How to start

• npm install
• npm run seed (optional demo data)
• npm run dev and open http://localhost:3000
• For a production build: npm run build then npm start
• Checks: npm run typecheck, npm run lint, npm test, and npm run smoke while a server is running

Design

A calm ledger look: warm off-white and graphite, a single teal accent, soft 1px borders instead of shadows, tabular numerals in tables, and sentence-case labels. Dark mode uses warm charcoal rather than blue-black. The layout adapts down to phone width with a slide-in menu that moves focus into the menu, keeps it there, closes on Escape and returns focus to the Menu button. Icons are drawn inline as SVG.

Not included

• No real payment provider: billing is a simulation and nothing is ever charged. Swap in a provider SDK in one module when you are ready
• No email sending, email verification, password reset, social sign-in or two-factor authentication
• No ownership transfer, file uploads, translations or API for third parties
• No HTTPS, reverse proxy or deployment configuration. SQLite is a single local file, so plan for a single server
• No documentation files, Docker files or CI configuration

Download: one .zip with the source code only (Next.js app, components, data layer, migrations, seed and smoke scripts, tests and the configuration files needed to run them). Personal and Commercial licenses are explained on the store's license page.