PocketGoat is a starter stack

Built with PocketBase, Go, Alpine.js, and Tailwindcss for rapid web development

Prerequisites

Install mise

mise is a polyglot tool version manager that ensures consistent development environments.

Use mise to install Go v1.24 or higher.

# Install mise (if not already installed)
curl https://mise.run | sh

# Trust the pre-existing configuration
mise trust

# Install all required tools
mise install

Install air

Air is a tool for automatically rebuilding and restarting go applications in development when changes are made to certain files.

# Install air
go install github.com/air-verse/air@latest

Initial Setup

1. Install Application Dependencies

# Install Go dependencies
go mod tidy

2. Run the Application

# Development mode with hot reloading
mise dev

The application will be available at http://127.0.0.1:8090

3. Create PocketBase Superuser

On first run, PocketBase will prompt you to create a superuser account. This account will have full access to the PocketBase admin panel at http://127.0.0.1:8090/_/

4. Configure Google OAuth

After creating your superuser account:

1. Log in to the PocketBase admin panel
2. Navigate to Settings → Auth providers
3. Enable Google OAuth provider
4. Configure with your Google OAuth credentials:
   • Client ID: Your Google OAuth client ID
   • Client Secret: Your Google OAuth client secret

To obtain Google OAuth credentials:

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: http://127.0.0.1:8090/api/oauth2-redirect

5. Configure Transactional Email Provider

To enable email functionality (password resets, verification emails, etc.):

1. In the PocketBase admin panel, go to Settings → Mail settings
2. Configure your SMTP settings:
   • SMTP server: Your email provider's SMTP server
   • Port: Usually 587 for TLS or 465 for SSL
   • Username: Your SMTP username
   • Password: Your SMTP password
   • Use TLS: Enable for secure connection

Popular transactional email providers:

• SendGrid
• Mailgun
• Postmark

6. Configure File Storage (S3)

To enable integration with S3 compatible storage:

1. In the PocketBase admin panel, go to Settings → File storage
2. Enable Use S3 Storage
3. Configurate your S3 storage settings:
   • Endpoint: The host url
   • Bucket: The bucket name
   • Region: The region the storage is hosted
   • Access key: Access key from provider
   • Secret: Secret value from provider

Popular S3 File Storage providers

• AWS S3, of course
• Cloudflare R2
• Digital Ocean Spaces
• Backblaze B2
• Wasabi

7. Configure Payment Provider

Consider Stripe No-Code integration

Project Structure

├── main.go             # Main application entry point
├── go.mod              # Go packages
├── tailwind.css        # Source file for Tailwindcss related assets
├── .air.toml           # Air Configuration
├── mise.toml           # Mise configuration
├── package.json        # Node packages (pnpm)
├── templates/          # Templ templates
│   ├── components      # Reusable UI fragments
│   ├── icons           # SVG icons
│   ├── layout          # Layouts for global elements
│   └── pages           # Content served per route in main.go
├── pb_data/            # PocketBase data (gitignored)
├── pb_migrations/      # PocketBase migrations
├── pb_public/          # Static files served by PocketBase
│   ├── css/main.css    # Generated by Tailwind CLI
│   └── images/         # Graphical assets
└── tmp/                # Temporary build files

Development

While mise dev is running any changes to .go, .templ, or other watched files (see .air.toml) will automatically rebuild and restart the application.

Template files (.templ) are automatically transpiled to Go code before building.

UI Architecture

The application uses Tailwindcss and DaisyUI styling, providing:

• Full control over styling from template files
• Responsive design with modern CSS features
• No additional JS dependencies
• Clean, semantic, and accessibility compliant HTML structure

UI interactivity is handled by Alpine.js, providing:

• Reactive data binding
• Component state management
• Seamless integration with server-rendered templates

A note about icons:

In order to maintain a minimal pageload footprint while still providing a DRY solution for icon usage, SVGs are copied directly from lucide.dev and svgl.app and pasted into their own templ component as needed.

Production Deployment

Consider PocketHost.

License

MIT