Astro + Shadcn + PocketBase Starter

Overview

This is a starter template combining Astro, React, Shadcn UI (with Tailwind CSS), and PocketBase for rapid web application development.

Prerequisites

• Bun (recommended)
• Node.js (alternative)

Features

• ⚡ Astro framework
• 🎨 Shadcn UI components
• 💾 PocketBase v0.23.5 as backend (Please replace depending on your OS type)
• 🦾 TypeScript support for both frontend and backend
• 🚀 TailwindCSS for styling

Getting Started

Installation

1. Scaffolding

npm create astro@latest my-astro-project -- --template syahmirafsan/astro-shadcn-pocketbase-starter
cd my-astro-project

2. Install dependencies

bun install

Development

Run development server with PocketBase:

bun run dev

This will start both the Astro development server and PocketBase.

Build

Build for production:

bun run build

Preview

Preview production build:

bun run preview

Type Generation

Generate types from PocketBase database:

bun run typegen

Scripts

• dev: Start Astro and PocketBase concurrently
• build: Build Astro project
• preview: Preview production build
• pb: Start PocketBase server
• typegen: Generate TypeScript types from PocketBase DB
• server: To run server (optional)

Technologies

• Astro
• React
• Shadcn UI
• PocketBase
• TailwindCSS

Configuration

Customize your project by modifying:

• astro.config.mjs
• tailwind.config.mjs
• src/styles/globals.css

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request