A modern full-stack template that combines the power of Next.js, the simplicity of PocketBase, and the beauty of shadcn/ui. Perfect for quickly bootstrapping production-ready web applications with authentication and a polished UI.
- 🚀 Next.js 15+ App Router
- 📦 PocketBase backend with built-in authentication
- 🎨 Beautiful UI components from shadcn/ui
- 🌐 Server-side rendering and client-side interactivity
- 🔄 Form handling with React Server Actions
- 🔐 Complete authentication system with email/password
- 🐳 Production-ready Docker setup
- ☁️ One-command deployment to Fly.io
- 🔒 Secure cookie-based authentication
- 🛡️ Type-safe development with TypeScript
- ⚡ Bun for fast package management and running scripts
- Bun runtime
- Fly.io CLI (for deployment)
- Clone the repository:
git clone https://github.com/yourusername/pocketwatcher.git
cd pocketwatcher- Install dependencies:
bun install- Start the development servers:
In one terminal, start PocketBase:
./pocketbase serveIn another terminal, start the Next.js development server:
bun run dev- Access the applications:
- Next.js: http://localhost:3000
- PocketBase Admin: http://localhost:8090/\_/
- Install the Fly.io CLI:
curl -L https://fly.io/install.sh | sh
fly auth login- Deploy the application:
bun run launchYou can either accept the defaults by selecting "No" when asked to tweak settings, or customize them according to your needs.
-
During deployment, you'll be prompted twice:
- When asked "Do you want to tweak these settings before proceeding?" → Type
No - When asked "Would you like to allocate dedicated ipv4 and ipv6 addresses now?" → Type
Yes
- When asked "Do you want to tweak these settings before proceeding?" → Type
-
After deployment, find your PocketBase admin setup URL:
fly logs | grep pbinstal- Access the admin setup URL by replacing:
- Change
http://0.0.0.0:8090tohttps://your-app-name.fly.dev:8091 - Keep the rest of the URL path and token
- Change
Your app will be available at:
- Secure login system with email/password
- User registration with password confirmation
- Server-side form validation
- Protected routes and authenticated sessions
- Secure cookie handling
- Automatic redirects after authentication
- Error handling and user feedback
- Type-safe authentication actions
├── src/
│ ├── app/ # Next.js application
│ │ ├── actions/ # Server actions
│ │ ├── api/ # API routes
│ │ ├── auth/ # Authentication pages
│ │ └── page.tsx # Home page
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ └── auth/ # Authentication components
│ └── lib/ # Utility functions and configs
├── public/ # Static assets
├── pb_data/ # PocketBase data directory
└── Dockerfile # Production Docker configuration
- User enters credentials on login/register page
- Form data is processed by server actions
- PocketBase validates credentials
- On success:
- Auth token is stored in HTTP-only cookie
- User is redirected to dashboard
- On error:
- User receives feedback message
- Form remains interactive
- HTTP-only cookies for token storage
- Server-side validation
- Password confirmation on registration
- Secure password handling
- Protected API routes
- Type-safe authentication flow
- CSRF protection with Next.js
- Secure session management
The fly.toml configuration file sets up:
- App name and organization
- Region configuration
- Machine specifications (shared-cpu-1x, 1GB RAM)
- Service ports for PocketBase (8090/8091) and Next.js (3000)
- Volume mounts for persistent PocketBase data
Supervisor manages both services in production:
- Next.js application
- PocketBase server
- Process monitoring and automatic restarts
- Log management
Multi-stage build process that:
- Builds the Next.js application
- Sets up PocketBase
- Configures the production environment
- Handles service orchestration
Contributions are welcome! Please feel free to submit a Pull Request.
MIT