Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lucafaggianelli/pocket-saas

A PocketBase frontend template to launch a SaaS in minutes. Based on React and Tailwind
https://github.com/lucafaggianelli/pocket-saas

pocketbase react saas-boilerplate saas-template shadcn-ui tailwindcss typescript

Last synced: 2 months ago
JSON representation

A PocketBase frontend template to launch a SaaS in minutes. Based on React and Tailwind

Awesome Lists containing this project

README 

        
# Pocket SaaS



This template provides a minimal setup to get started with PocketBase.



## 🥞 Tech stack



- [PocketBase](https://pocketbase.io/) - A serverless database with authentication and authorization

- [React](https://reactjs.org/) - A JavaScript library for building user interfaces

- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework

- [shadcn/ui](https://ui.shadcn.com/) - A collection of UI components

- [Tanstack Router](https://tanstack.com/router/latest/docs/framework/react/overview) - A router for React

- [TypeScript](https://www.typescriptlang.org/) - A typed superset of JavaScript

- [PocketBase Typegen](https://github.com/patmood/pocketbase-typegen) - A tool to generate TypeScript types for PocketBase

- [Vite](https://vitejs.dev/) - A fast frontend build tool

- [pnpm](https://pnpm.io/) - A fast, disk space efficient package manager



## 🚀 Getting Started



To use this template click on the **Use this template** button on the top of the repository

and click on **Create a new repository**, or go directly to

[this link](https://github.com/new?template_name=pocket-saas&template_owner=lucafaggianelli).



If you don't want to create a new repository, you can clone this repository or download the code

as a zip file and start from there.



### Setup the frontend



Install the dependencies



> Note: we use `pnpm` as package manager, check how to install it [here](https://pnpm.io/installation).



```bash

pnpm install

```



Run the frontend server, this will start the development server and automatically refresh

the browser when you make changes:



```bash

pnpm dev

```



### Setup PocketBase



Download PocketBase binary:



> 🙋 Why PocketBase binary is not included into the template? Because its binary

> is platform-specific and must be downloaded directly from Github.



```bash

pnpm pb:download

```



The above script should work on most platforms, if it doesn't work for you, you can download the binary manually from [Github](https://github.com/pocketbase/pocketbase/releases) and place it in the folder `/pocketbase/`



Run PocketBase:



```bash

pnpm pb:server

```



### PocketBase typings



This template is setup to use the typings generated by the `pocketbase-typegen`, it's not required

but it's recommended to have them as it makes your frontend code more type-safe.



To generate the typings run the following command after changing the PocketBase schema (adding collections, fields, etc):



```bash

pnpm run pb:typegen

```



## 📖 How to use this template



### Pages



The pages are defined in `src/pages/` folder, you can add new pages and they will be automatically

added to the router without any manual configuration.

A new file in `src/pages/hello.tsx` will be available at `/hello`.



Page files named `something.lazy.tsx` are loaded lazily and not included in the main bundle to save space.



The router is based on [Tanstack Router](https://tanstack.com/router/latest/docs/framework/react/overview)

so check the documentation for more information.



### Auth-only pages



To protect a page so that only authenticated users can access it, you can use the `protectPage` helper

in the page declaration.



By default this template ships with a protected router group

located in `src/pages/_app/`, all the pages inside this folder are

protected (and they also share a `Layout` component),

though the `/_app` path will not show in the URL, this is

a feature of the router, check the `src/pages/_app.tsx` file for more information.



If you want to protect a single page, you can use the `protectPage` helper like in the example below:



> Note: protected pages or any other page that requires a check before loading (i.e. using `beforeLoad` function)

> can't be lazy loaded.



```tsx

import { createFileRoute } from "@tanstack/react-router";



import { protectPage } from "@/lib/auth";



export const Route = createFileRoute("/protected")({

  component: () => 
Hello /protected!
,

  beforeLoad: ({ location }) => {

    protectPage(location);

  },

});

```



If a user tries to access a protected page without being authenticated, they will be redirected to the `/signin` page.



### Menu



The menu entries are defined in `src/config/menu.ts`. You can add new entries or remove existing ones.



### UI Components



The UI components are based on Tailwind CSS and [shadcn/ui](https://ui.shadcn.com/).

Icons are provided by https://www.radix-ui.com/icons.



### Authentication



Authentication is handled by PocketBase and this template is automatically configured to use it.



The page `/signin` is automatically populated with all the authentications methods enabled in PocketBase,

both the OAuth providers and the email/password authentication.



After signing up an email is sent to the user for email verification.



After a successful sign in, the user is redirected to the `/` page or to the page they were trying to access before

signing in (see Auth-only pages section).



## Hosting



This template includes a Dockerfile to host the application anywhere.



### Fly.io



To host on Fly.io, you can use the provided Dockerfile, then just follow the instructions from

https://github.com/pocketbase/pocketbase/discussions/537