# Create a new project (one line)
npx create-tanstack-hono-start@latest my-app && cd my-app && npm install && npm run dev
# Frontend: http://localhost:3000
# Backend: http://localhost:8000This will scaffold a working fullstack app you can open immediately. If you prefer a faster demo, check the demo.gif at the repo root.
Get started with a tiny contribution in 3 steps:
- Pick a task from
GOOD_FIRST_ISSUES.mdor open an issue describing your idea. - Fork, create a branch
fix/your-issue, implement and runnpm run test. - Open a PR, reference the issue, and add the
good first issuelabel if applicable.
We welcome all improvements — documentation, tests, or small bug fixes are perfect first PRs.
⚡ The fastest way to bootstrap modern fullstack applications with React 19, TanStack Router, Hono OpenAPI, and Mastra AI
Create a modern fullstack app in seconds with React 19, TanStack Router, Hono OpenAPI, and AI integration!
- 🎯 Type-Safe: End-to-end TypeScript from frontend to backend
- ⚡ Lightning Fast: Powered by Vite and Hono for optimal performance
- 🧪 Test Ready: Vitest setup with modern testing practices
- 🎨 Beautiful: Tailwind CSS with responsive design
- 🔧 Developer Experience: Hot reloading, ESLint, Prettier
- 🚀 Production Ready: CI/CD with GitHub Actions, Docker support
- 📦 Monorepo: Clean workspace organization
# Create a new project (recommended)
npx create-tanstack-hono-start@latest my-awesome-app
# Or with npm
npm create tanstack-hono-start@latest my-awesome-app
# Or with yarn
yarn create tanstack-hono-start@latest my-awesome-app- 🆕 React 19 - Latest React with improved performance and features
- 🔗 Hono OpenAPI - Auto-generated API documentation with Swagger UI
- 🤖 Mastra AI - Built-in AI assistant capabilities
- 🔒 End-to-End Type Safety - Shared Zod schemas between frontend/backend
- ⚡ React Query - Advanced server state management
- 🎨 Modern UI - Beautiful Tailwind components out of the box
- ⚛️ React 19 - Latest features and performance improvements
- 🛣️ TanStack Router - Type-safe routing with file-based structure
- ⚡ Vite - Lightning-fast development and build
- 🎨 Tailwind CSS - Beautiful, responsive UI components
- 🔄 React Query - Advanced data fetching and caching
- 🧪 Vitest - Modern testing framework
- 🔥 Hono - Ultra-fast web framework
- 📚 OpenAPI/Swagger - Auto-generated API documentation
- 🛡️ Zod Schemas - Runtime validation and type safety
- 🤖 Mastra AI - Built-in AI assistant endpoints
- 🔍 Logging & Error Handling - Production-ready setup
- 📝 Full TypeScript - End-to-end type safety
GET /api/users- User management with type validationPOST /api/users- Create users with Zod schema validationPOST /api/ai/chat- AI assistant with Mastra integrationGET /ui- Interactive Swagger UI documentationGET /doc- OpenAPI JSON specification
npx create-tanstack-hono-start my-app --template basicPerfect for:
- 🎓 Learning React and fullstack development
- 🚀 Small to medium projects
- 📚 Understanding each piece as you add it
What's included:
- React 19 + TanStack Router frontend
- Hono API with OpenAPI/Swagger
- TypeScript end-to-end
- Choose your features: Vitest, Tailwind, Auth, Database, ESLint, CI/CD, Docker
npx create-tanstack-hono-start my-app --template advancedPerfect for:
- 💼 Production-ready applications
- ⚡ Experienced developers who want everything
- 🎯 Getting started immediately without setup
What's included (ALL features):
- ✅ React 19 + TanStack Router + Auth
- ✅ Hono API + Database (PostgreSQL + Drizzle ORM)
- ✅ User authentication system (register/login)
- ✅ Testing setup (Vitest + React Testing Library)
- ✅ Code quality (ESLint + Prettier)
- ✅ CI/CD (GitHub Actions)
- ✅ Docker containerization
- ✅ Tailwind CSS styling
# Interactive mode (recommended)
npx create-tanstack-hono-start
# Skip prompts with defaults
npx create-tanstack-hono-start my-app --yes
# Specify template
npx create-tanstack-hono-start my-app --template basic
# List available templates
npx create-tanstack-hono-start listWhen you run npx create-tanstack-hono-start my-app, you'll get:
my-app/ # ← Your new project
├── apps/
│ ├── web/ # React app with TanStack Router
│ └── api/ # Hono API server
├── packages/ # Shared packages
├── package.json # Workspace configuration
└── README.md
$ npx create-tanstack-hono-start my-app
? Which template would you like to use? basic
? Select additional features:
◯ 🧪 Vitest Testing
◯ 🎨 Tailwind CSS
◯ 🔒 Authentication (Auth.js)
◯ 🗃️ Database (Drizzle ORM)
◯ 🔧 ESLint + Prettier
◯ 🚀 GitHub Actions CI/CD
◯ 🐳 Docker$ npx create-tanstack-hono-start my-app
? Which template would you like to use? advanced
# 👆 Feature selection is SKIPPED - all features included automatically!
🏗️ Creating project...
✅ Project created successfully!# Interactive mode (recommended for beginners)
npx create-tanstack-hono-start
# Skip all prompts with basic template
npx create-tanstack-hono-start my-project --template basic --yes
# Get everything with advanced template
npx create-tanstack-hono-start my-project --template advanced
# List available templates and features
npx create-tanstack-hono-start list- 🔥 Performance: Hono is one of the fastest web frameworks
- 🔒 Type Safety: End-to-end TypeScript support
- 🎯 Developer Experience: Excellent tooling and debugging
- 🌐 Edge Ready: Deploy anywhere with minimal configuration
- 📱 Modern: Built for the latest web standards
- React - UI library
- TanStack Router - Type-safe routing
- TypeScript - Type safety
- Vite - Build tool
- Hono - Web framework
- TypeScript - Type safety
- Node.js - Runtime
We welcome contributions! Please see our Contributing Guide for details.
# Clone the repository
git clone https://github.com/Kroro1208/tanstack-hono-starter.git
# Install dependencies
cd tanstack-hono-starter
npm install
# Start development
npm run devMIT License - see the LICENSE file for details.
If this project helped you, please consider giving it a ⭐ on GitHub!
Happy coding! 🎉 Built with ❤️ for the modern web development community.