Welcome to Skateboard

A React starter with auth, Stripe, shadcn/ui, and SQLite — ship your app in minutes

🚀 Getting Started
Scaffold Skateboard and run frontend + backend in minutes
⚙️ Configuration
Set up constants.json, backend config.json, and environment variables
🎨 Components
Shadcn/ui components from skateboard-ui, with semantic design tokens
🔐 Authentication
Native HS256 JWT in HttpOnly cookies, CSRF protection, and scrypt hashing
💳 Stripe Integration
Checkout, customer portal, and signature-verified webhooks
🚀 Deployment
Deploy to Vercel, Render, Netlify + Railway, or Docker
📚 API Reference
Backend endpoints, env vars, and the database adapter layer
💡 Examples
Patterns for views, data fetching, and usage-gated features

What is Skateboard?

Skateboard is a production-ready React starter built on an Application Shell Architecture: the shell (@stevederico/skateboard-ui) owns routing, auth, layout, and build utilities, so your app code is just routes, views, and config. Everything you need to ship a modern web app is included:

  • ⚡ React 19 with Vite 8 for fast development (SWC, no Babel)
  • 🟦 TypeScript end-to-end (frontend and backend) — strict typecheck (tsc --noEmit) gates builds and tests, with no separate build step (Vite/esbuild transpiles)
  • 🎨 Tailwind CSS v4 with Shadcn/ui components from skateboard-ui
  • 🔐 Authentication — native HS256 JWT in HttpOnly cookies, CSRF protection, scrypt password hashing (zero external auth deps)
  • 💳 Stripe integration for checkout, the customer portal, and webhooks
  • 🗄️ Multi-database backend on Hono — SQLite by default, with PostgreSQL and MongoDB adapters
  • 📱 Responsive layout with a mobile-ready sidebar and TabBar
  • 🌙 Dark mode with system detection
  • 🛡️ Protected routes, account lockout, and usage tracking for free-tier limits

Quick Start

npx create-skateboard-app

That’s it — your app is now running at http://localhost:5173 with the frontend, a complete authentication system, Stripe integration, and beautiful UI components.

To run the frontend and backend together during development:

npm run start          # Frontend (Vite :5173) + backend (Hono :8000)
npm run front          # Frontend only
npm run server         # Backend only

Why Skateboard?

⏰ Save Time — Skip the boilerplate and focus on your unique features

🛡️ Battle-tested — Built with security and best practices in mind

🎨 Beautiful — Modern design system with dark mode, driven by semantic tokens

📱 Mobile-first — Responsive design that works on every device

🔧 Customizable — Convention over configuration, with escape hatches everywhere

Updating the Boilerplate

Skateboard ships an update script that syncs only boilerplate-owned files (backend/server.ts, backend/adapters/*, vite.config.ts, Dockerfile, and more) and never touches your constants.json, components, or env:

node scripts/update-skateboard.js          # interactive — diff per file
node scripts/update-skateboard.js --yes    # apply all without prompts

Community