pocketwatcher - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #llm #android #machine-learning #linux #java #awesome-list #ios #mcp #openai #open-source

pocketwatcher

(★ 96)

🚀 Production-ready Next.js template with PocketBase and shadcn/ui. Includes authentication, beautiful UI components, and one-command deployment. Deploy to Fly.io on one machine

File Explorer

Download Latest Version (.zip)

- file.svg
- globe.svg
- next.svg
- vercel.svg
- window.svg
- - actions.ts
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- - DemoCounter.tsx
- - pocketbase.ts
  - utils.ts
- middleware.ts
.cursorrules
.dockerignore
.gitignore
components.json
create-admin.sh
docker-compose.yml
Dockerfile
eslint.config.mjs
fly.toml
next.config.ts
package.json
pocketbase-schema.json
postcss.config.mjs
README.md
start.sh
supervisor.conf
tailwind.config.ts
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/nicholasoxford/pocketwatcher

Downloads the entire project code from GitHub to your computer.

cd pocketwatcher

Moves into the project folder you just downloaded.

2. Official Install Script

Easy Recommended

curl -L https://fly.io/install.sh | sh

Downloads and runs the official install script in one line — this handles the full setup automatically.

✅ After installing, open a new terminal and run the program's version command (e.g. --version) to confirm it worked.

Pulled directly from this repo's README.

3. Docker

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

└── Dockerfile # Production Docker configuration

Type this command into your terminal and run it.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

Pulled directly from this repo's README.

4. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# PocketWatcher

[![Next.js](https://img.shields.io/badge/Next.js-15%2B-black)](https://nextjs.org/)
[![PocketBase](https://img.shields.io/badge/PocketBase-0.23-blue)](https://pocketbase.io/)
[![shadcn/ui](https://img.shields.io/badge/shadcn%2Fui-latest-purple)](https://ui.shadcn.com/)
[![Bun](https://img.shields.io/badge/Bun-1.0%2B-black)](https://bun.sh/)
[![License](https://img.shields.io/badge/license-MIT-green)](https://raw.githubusercontent.com/nicholasoxford/pocketwatcher/main/LICENSE)

## Overview

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.

## Features

- 🚀 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

## Getting Started

### Prerequisites

- Bun runtime
- Fly.io CLI (for deployment)

### Local Development

1. Clone the repository:

```bash
git clone https://github.com/yourusername/pocketwatcher.git
cd pocketwatcher
```

2. Install dependencies:

```bash
bun install
```

3. Start the development servers:

In one terminal, start PocketBase:

```bash
./pocketbase serve
```

In another terminal, start the Next.js development server:

```bash
bun run dev
```

4. Access the applications:
   - Next.js: http://localhost:3000
   - PocketBase Admin: http://localhost:8090/\_/

## Deployment

1. Install the Fly.io CLI:

```bash
curl -L https://fly.io/install.sh | sh
fly auth login
```

2. Deploy the application:

```bash
bun run launch
```

You can either accept the defaults by selecting "No" when asked to tweak settings, or customize them according to your needs.

3. 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`

4. After deployment, find your PocketBase admin setup URL:

```bash
fly logs | grep pbinstal
```

5. Access the admin setup URL by replacing:
   - Change `http://0.0.0.0:8090` to `https://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/_/

### Authentication Features

- 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

## Project Structure

```
├── 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
```

## Authentication Flow

1. User enters credentials on login/register page
2. Form data is processed by server actions
3. PocketBase validates credentials
4. On success:
   - Auth token is stored in HTTP-only cookie
   - User is redirected to dashboard
5. On error:
   - User receives feedback message
   - Form remains interactive

## Security Features

- 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

## Configuration Files

### fly.toml

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.conf

Supervisor manages both services in production:

- Next.js application
- PocketBase server
- Process monitoring and automatic restarts
- Log management

### Dockerfile

Multi-stage build process that:

- Builds the Next.js application
- Sets up PocketBase
- Configures the production environment
- Handles service orchestration

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT