PocketStarter Tech Stack Documentation

Overview

PocketStarter is built with a bunch of modern web tools to make your life easier. Here's a quick look at the tech stack so you know exactly what's under the hood.

Frontend

Next.js

Next.js is one of the most popular React frameworks. We use it for the PocketStarter frontend and utilize its App Router architecture with route groups, server-side rendering (SSR), static site generation (SSG), and built-in API routes. The development server runs with Turbopack for faster builds.

TypeScript

TypeScript adds type checking to the code, which means it helps spot errors before you even run the app. It also gives us better code suggestions and makes the development process smoother and more reliable.

Zustand

Zustand is a lightweight state management library used for authentication state management and client-side state synchronization with PocketBase. It provides a simple API and is super scalable.

Tailwind CSS 4

Tailwind CSS 4 is a utility-first CSS framework used for easy styling. The v4 version includes CSS variables and OKLCH color space, along with a custom design system that supports dark mode and a few basic key utilities (PostCSS for processing, clsx, tailwind-merge, and tw-animate-css).

Radix UI (shadcn/ui)

shadcn/ui is a component library built on top of Radix UI, which provides headless UI primitives used as the foundation for all components. We utilize various Radix components including alert dialogs, avatars, modals, dropdown menus, labels, separators, slots for component composition, and toggle switches.

Lucide Icons

Lucide is a great icon library, providing beautiful and customizable icons that are configured as the default icon library

class-variance-authority 0.7.1

class-variance-authority 0.7.1 helps us manage component variants in a type-safe way.

Backend / Database

PocketBase

PocketBase is the open-source backend-as-a-service that is used. It provides a built-in authentication system, real-time subscriptions, RESTful API, admin dashboard, file storage, and database migrations all in one package.

pocketbase-typegen

pocketbase-typegen automatically generates TypeScript types from the PocketBase schema, ensuring type safety across the entire application and providing excellent developer experience.

Payment processing

Stripe

Stripe is the integrated payment processing platform, handling subscription management, checkout sessions, customer portal access, webhook processing, and trial period support. It is integrated with custom hooks in PocketBase for seamless payment processing and user management.

Email & Marketing

Brevo

Brevo (formerly Sendinblue) is the optional email marketing platform, providing contact management, marketing automation, and email blacklisting based on user preferences. It's integrated with PocketBase hooks for automatic user management and contact synchronization.

Development Tools

pnpm

pnpm is the package manager of choice, providing fast installations and efficient disk space usage.

ESLint 9

ESLint 9 handles code quality with Next.js-specific configurations, TypeScript support, and a modern flat config format that ensures consistent code style across the project. It goes without saying PocketStarter comes without any linting errors.

SEO & Analytics

next-sitemap

next-sitemap automatically generates XML sitemaps and robots.txt files for better SEO, with configurable exclusions to control which pages are indexed by search engines.

Google Analytics

Google Analytics provides web analytics through a custom component. After adding your account ID to the environment variables, Google Analytics automatically loads on production servers only.