Pocket SaaS

Pocket SaaS is a GitHub template that gives you a ready-made React and Tailwind CSS frontend starter for building SaaS applications on a PocketBase backend.

What is Pocket SaaS?

Pocket SaaS is a frontend starter template for SaaS projects that pairs React with PocketBase, a serverless database with built-in authentication and authorization. It provides a pre-configured Vite project using TypeScript, Tanstack Router, Tailwind CSS, and shadcn/ui components, plus a Dockerfile for deployment. The template is published by GitHub user lucafaggianelli and is designed to be used via the "Use this template" button.

Key Features

• File-based routing — pages placed in src/pages/ are automatically registered with Tanstack Router; files named .lazy.tsx are code-split and loaded lazily.
• Built-in authentication — PocketBase handles sign-in and sign-up, the /signin route automatically lists enabled OAuth providers and email/password, and email verification is sent after sign-up.
• Protected routes — a protectPage helper and a protected route group in src/pages/_app/ let you restrict pages to authenticated users; unauthenticated visitors are redirected to /signin.
• Type-safe PocketBase — optional pocketbase-typegen integration generates TypeScript types when you run pnpm run pb:typegen after schema changes.
• UI component kit — pre-wired Tailwind CSS and shadcn/ui components with icons from Radix UI, so you can build interfaces quickly.
• Menu configuration — navigation entries live in src/config/menu.ts for easy editing.
• PocketBase setup scripts — pnpm pb:download fetches the platform-specific PocketBase binary and pnpm pb:server starts it.
• Docker support — the included Dockerfile lets you host the app anywhere, including Fly.io following the official PocketBase discussion guide.

Who is it for?

• SaaS founders who need a fast frontend scaffold with authentication and routing already solved.
• PocketBase developers building admin panels or customer-facing apps and wanting a type-safe React frontend.
• React developers who want a minimal yet structured starter with Tailwind, shadcn/ui, and Tanstack Router rather than setting up the tooling themselves.

What can you do with Pocket SaaS?

• Launch a SaaS frontend quickly: start from the template, add your own pages and components, and have a working auth flow immediately.
• Protect dashboards and members-only areas: wrap any route with the protectPage helper or place pages under the protected group so only signed-in users can access them.
• Generate type-safe API bindings: run the typegen command after changing your PocketBase schema to keep frontend code in sync.

How does Pocket SaaS work?

The workflow described in the template starts with creating a new repository from the GitHub template or cloning it. You then install dependencies with pnpm, download the PocketBase binary using pnpm pb:download, start the backend with pnpm pb:server, and run the frontend with pnpm dev. For a type-safe connection, run pnpm run pb:typegen after modifying collections.

FAQ

Is Pocket SaaS free?

The repository is available as a public GitHub template, so you can copy it and use it for your own projects without paying a license fee. No pricing or payment information is mentioned in the template documentation.

How do I add a new page?

Create a new file under src/pages/, for example hello.tsx, and Tanstack Router will expose it at /hello automatically. Name the file something.lazy.tsx to load it lazily instead of including it in the main bundle.

How do I protect a page from unauthenticated users?

Use the protectPage helper in the beforeLoad option of your route definition, or place the page inside the pre-built protected route group at src/pages/_app/. Unauthenticated users are redirected to /signin.

How do I set up PocketBase?

The template includes package scripts: run pnpm pb:download to get the PocketBase binary for your platform, then pnpm pb:server to launch the server. If the download script fails, you can manually download the binary from the PocketBase GitHub releases and put it in the pocketbase folder.