🚀 Create Bodnar App

A modern, production-ready Vue 3 starter template with TypeScript, comprehensive tooling, and best practices built-in.

✨ Features

🎨 Modern UI Stack

• Vue 3 with Composition API and <script setup> syntax
• TypeScript with strict typing and comprehensive type safety
• TailwindCSS v4 + UnoCSS dual CSS framework setup
• shadcn-vue (Reka UI) + DaisyUI component libraries
• Lucide Vue Next for beautiful icons

🛠️ Developer Experience

• Vite with Rolldown bundler for lightning-fast builds
• Vue DevTools for seamless debugging
• Hot Module Replacement for instant feedback
• TypeScript strict mode with comprehensive type checking
• EditorConfig for consistent code formatting

🔧 Code Quality & Tooling

• Biome.js for ultra-fast linting and formatting
• Lefthook for efficient git hooks
• lint-staged for pre-commit code quality
• Conventional Commits with automated validation
• Renovate with UnJS config for dependency management

🧪 Testing Suite

• Vitest for lightning-fast unit testing
• Playwright for reliable end-to-end testing
• jsdom environment for component testing
• Vue Test Utils for Vue-specific testing utilities

🗄️ Data & State Management

• Pinia with composable store pattern
• VueUse composition utilities
• DuckDB and PGLite for local database support
• pgvector for vector operations
• Zod for runtime schema validation

🌐 Advanced Features

• Vue Router with typed routing support
• Server-Side Rendering ready
• PWA capabilities with workbox
• Image optimization with built-in meta extraction
• PDF processing and document handling
• UnJS ecosystem integration

🚀 Quick Start

Prerequisites

• Bun >= 1.0 (recommended) or Node.js >= 20
• Git for version control

Installation

# Clone the repository
git clone https://github.com/danielbodnar/create-bodnar-app.git my-app
cd my-app

# Install dependencies
bun install

# Set up git hooks
bunx lefthook install

# Start development server
bun dev

Open http://localhost:5173 to view your app! 🎉

📚 Available Scripts

Development

bun dev                 # Start development server with hot reload
bun run build          # Build for production with type checking
bun run preview         # Preview production build locally

Testing

bun test:unit           # Run unit tests with Vitest
bun test:e2e            # Run e2e tests with Playwright
bun test:e2e --ui       # Run e2e tests with UI
bun test:e2e --debug    # Debug e2e tests

Code Quality

bun run lint           # Lint code with Biome
bun run format         # Format code with Biome
bun run type-check     # Type check with vue-tsc

Git Workflow

git add .
git commit             # Conventional commits enforced
git push               # Runs type-check and tests

🏗️ Project Structure

src/
├── components/
│   ├── ui/              # shadcn-vue components
│   └── icons/           # Custom icon components
├── views/               # Route-level components
├── stores/              # Pinia stores
├── router/              # Vue Router configuration
├── lib/                 # Shared utilities
└── assets/              # Static assets

e2e/                     # Playwright tests
public/                  # Public assets

🎨 Styling System

This template features a dual CSS framework approach:

• TailwindCSS v4 with CSS variables for design tokens
• UnoCSS with multiple presets (icons, typography, web fonts)
• shadcn-vue components with "new-york" style
• DaisyUI components for rapid prototyping

All styles are unified through the cn() utility function using clsx and tailwind-merge.

🔄 State Management

Uses Pinia with the modern composable store pattern:

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

🛣️ Routing

Vue Router with typed routing support:

import { typedRouter } from '@/router'

// Fully typed navigation
await typedRouter.push({ name: 'home' })

📊 Database Integration

Ready-to-use database support:

• DuckDB for analytics workloads
• PGLite for PostgreSQL compatibility
• pgvector for vector operations
• db0 as database abstraction layer

🧪 Testing Strategy

Unit Testing with Vitest

# Run all unit tests
bun test:unit

# Run tests in watch mode
bun test:unit --watch

# Run tests with coverage
bun test:unit --coverage

E2E Testing with Playwright

# Run all browsers
bun test:e2e

# Run specific browser
bun test:e2e --project=chromium

# Run specific test file
bun test:e2e tests/example.spec.ts

# Debug mode
bun test:e2e --debug

🔧 Configuration Files

• biome.json - Biome linting and formatting
• lefthook.yml - Git hooks configuration
• .lintstagedrc.json - Pre-commit linting
• renovate.json - Dependency updates
• components.json - shadcn-vue configuration
• vite.config.ts - Vite build configuration
• vitest.config.ts - Vitest test configuration
• playwright.config.ts - Playwright e2e configuration

🚀 Deployment

This template is ready for deployment on modern platforms:

• Vercel - Zero configuration deployment
• Netlify - Git-based deployments
• Railway - Full-stack deployments
• Docker - Containerized deployments

Build command: bun run build
Output directory: dist

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with love using these amazing tools:

• Vue.js - The Progressive JavaScript Framework
• Vite - Next Generation Frontend Tooling
• TypeScript - JavaScript with syntax for types
• TailwindCSS - A utility-first CSS framework
• shadcn-vue - Beautifully designed components
• Biome - One toolchain for your web project
• UnJS - Unified JavaScript Tools

---

Made with ❤️ by Daniel Bodnar

⭐ Star this repo if you find it helpful!