PocketWatcher is a modern full-stack template built with Next.js, PocketBase, and shadcn/ui. It is designed to help developers quickly build production-ready web applications with authentication, dynamic server-side rendering, and a beautiful UI.
The template integrates a powerful Next.js 15+ App Router, a simple PocketBase backend for user authentication, and a set of well-designed UI components from shadcn/ui. With these tools, developers can get started quickly, handle authentication out of the box, and deploy production-ready apps with minimal configuration.
Features
🚀 Latest Next.js with App Router: Stay on the forefront of web development with the newest Next.js features and routing system.
🎨 Elegant UI Components from shadcn/ui: Implement pre-designed components for a professional look without the design headaches.
🔄 Form Handling with React Server Actions: Manage forms directly on the server for improved security.
🐳 Docker Ready: Benefit from a Docker setup that simplifies deployment and ensures consistency across environments.
🛡️ TypeScript Support: Develop with type safety to catch errors early.
📦 Integrated PocketBase Backend: Get a backend ready to go with authentication already set up.
🌐 Server-Side Rendering and Client-Side Interactivity: Enjoy the benefits of fast initial page loads and smooth user interactions.
🔐 Complete Authentication System: Implement secure user authentication with full email/password functionality.
☁️ Single-Command Deployment to Fly.io: Launch your app quickly without complex server configurations.
🔒 Secure Cookie-Based Authentication: User sessions are managed safely using HTTP-only cookies.
Use Cases
- Rapid Prototyping: When you need to quickly validate an idea, PocketWatcher’s pre-built features let you create a functional prototype in record time. You can demonstrate core features and user flows to stakeholders without spending weeks on foundational code.
- SaaS Application Development: If you’re building a Software as a Service product, this template provides the groundwork for user management, secure authentication, and a responsive UI. You can focus on building your unique value proposition, such as subscription management or specialized features.
- E-commerce Platforms: Create online stores quickly, leveraging PocketBase for product management and user accounts. The shadcn/ui components provide a clean base for building product pages, shopping carts, and checkout processes.
- Community or Social Platforms: Use the built-in authentication system to manage user profiles and interactions. You can focus on developing community-specific features like forums, messaging, or content sharing.
- Internal Tools and Dashboards: If your company needs a custom internal tool, PocketWatcher’s structure allows you to create secure, data-driven dashboards. Employees can access relevant information and perform actions based on their roles.
Installation
Prerequisites
- Bun runtime: A fast and modern JavaScript runtime.
- Fly.io CLI: For one-command deployment to Fly.io.
Local Development
1. Clone the repository from GitHub:
git clone https://github.com/yourusername/pocketwatcher.git
cd pocketwatcher2. Install dependencies:
bun install3. Start the development servers: In one terminal, start PocketBase:
./pocketbase serveIn another terminal, start the Next.js development server:
bun run dev4. Access the applications:
- Next.js: http://localhost:3000
- PocketBase Admin: http://localhost:8090/_/
Usage
To deploy the app on Fly.io, follow these steps:
1. Install the Fly.io CLI:
curl -L https://fly.io/install.sh | sh
fly auth login2. Deploy the application:
bun run launch3. During deployment, you’ll be prompted to tweak settings:
- 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
4. After deployment, retrieve the PocketBase admin setup URL:
fly logs | grep pbinstal5. Access the admin setup URL by replacing:
http://0.0.0.0:8090withhttps://your-app-name.fly.dev:8091- Keep the rest of the URL path and token
Your app will be available at:
- App: https://your-app-name.fly.dev
- Admin: https://your-app-name.fly.dev:8091/_/
Related Resources
- Next.js Documentation: The official documentation provides in-depth information about Next.js features, routing, data fetching, and more. [https://nextjs.org/docs]
- PocketBase Documentation: Learn about PocketBase’s features, API usage, and real-time capabilities. [https://pocketbase.io/docs]
- shadcn/ui Documentation: Explore the available UI components, customization options, and theming capabilities. [https://ui.shadcn.com/]
- Fly.io Documentation: For help with deployment, scaling, and managing your application on Fly.io. [https://fly.io/docs/]
FAQs
Q: Can I use a different database with PocketWatcher?
A: PocketWatcher is designed to work with PocketBase out of the box. You can, however, modify the template to use a different database, such as PostgreSQL or MySQL. This would require significant changes to the backend code and data handling logic.
Q: Is PocketWatcher suitable for large-scale applications?
A: While PocketWatcher is a good starting point for many projects, you might need to make architectural adjustments for very large-scale applications. These adjustments might include implementing more advanced caching, database sharding, or a microservices approach. The template, however, provides a solid base to build upon.
Q: How do I customize the UI components?
A: The shadcn/ui components are built using Tailwind CSS. You can customize them by modifying the Tailwind CSS classes or by creating your own CSS styles. The shadcn/ui documentation provides guidance on theming and customization options.
Q: What type of authentication does PocketWatcher use?
A: PocketWatcher uses secure, cookie-based authentication. It utilizes HTTP-only cookies to store authentication tokens, which helps protect against cross-site scripting (XSS) attacks.
Q: What are the advantages of using Bun with PocketWatcher?
A: Bun is a fast JavaScript runtime. You gain faster package installation times and quicker script execution, which improves the overall development experience.
Q: Does PocketWatcher support Docker?
A: Yes, PocketWatcher includes a Dockerfile that allows you to containerize and deploy your app in production.
