A production-ready frontend boilerplate built by Texagon for modern web apps using Bun, Vite, React (TypeScript), TanStack Router + Table + Form, Zustand, and TailwindCSS.
This template provides a clean folder structure, routing system, data-table integration, form handling, and pre-configured developer tooling — ready for scalable projects.
| Layer | Technology | Purpose |
|---|---|---|
| Runtime | Bun 1.2+ | Fast JS runtime & package manager |
| Framework | Vite 7 + React 19 (TypeScript) | Modern frontend toolchain |
| UI | TailwindCSS 4 | Utility-first styling |
| State | Zustand 5 | Lightweight global state |
| Routing | TanStack Router 1.x | File-based routing |
| Data | TanStack Table 8.x, TanStack Form 5.x | Declarative tables & forms |
| Validation | Zod 4.x | Schema validation |
| HTTP | Axios 1.x | API communication |
| Quality | ESLint + Prettier + Husky + lint-staged | Code quality automation |
| Containerization | Docker + Compose | Deployment ready |
git clone https://github.com/texagon/vitejs_bunjs_template.git
cd vitejs_bunjs_templatebun installbun run devDefault port: 5173
Access: http://localhost:5173
bun run buildbun run previewsrc/
├─ assets/ # Static images, SVGs
├─ components/ # Shared reusable UI components
├─ pages/ # Route-based pages (TanStack Router)
│ ├─ index.tsx # Root page
│ ├─ env/ # Example sub-route
│ └─ dynamic/ # Route params (e.g. $userId.tsx)
├─ services/ # API clients (Axios + Zod)
│ ├─ env/Env.ts # Example service
│ └─ user/ # User service
├─ store/ # Zustand stores
│ ├─ index.tsx
│ └─ appstore/ # Example app store
├─ utils/ # Helpers, pagination, etc.
├─ types/ # TypeScript interfaces & schemas
├─ index.css # Tailwind entry
└─ main.tsx # React app entry
Example .env file:
API_BASE_URL=https://api.example.com
APP_ENV=developmentMake sure to duplicate .env.example if available:
cp .env.example .envBuild & run using Docker:
docker build -t texagon-template .
docker run -p 5173:5173 texagon-templateOr using Compose:
docker compose up --buildFor detailed container usage → docs/docker_guide.md
Run lint:
bun run lintAuto-fix:
bun run lint:fixPre-commit hooks are powered by Husky + lint-staged to keep code clean.
| Guide | Description |
|---|---|
| Dev Guide | Architecture, adding routes/forms/stores |
| Docker Guide | Running inside containers |
| Troubleshooting | Common issues & solutions |
| Contributing | Team workflow & PR standards |
These conventions ensure maintainability and scalability across Texagon projects:
- Each page = single route folder under
/pages - Components are always reusable and stateless
- Hooks & state belong in
/store(Zustand) - APIs go in
/services— each domain gets its own subfolder - Types & Schemas live in
/typesfor global sharing - Utility functions (pagination, formatting, etc.) go in
/utils - Keep imports absolute using
@/alias (configured intsconfig.json) - Use Zod for validation and data contracts
- Keep React components functional with clear prop typing
- Commit messages follow the format:
feat: add user form validation/fix: router not loading profile
- Tailwind only — avoid inline styles
- Follow consistent spacing and color tokens from
tailwind.config.js - Use responsive design with mobile-first mindset
- Group related UI under
/components/ui/when reusable
- Always run
bun run lint:fixbefore committing - Run local dev with
bun run devand test hot-reloads - Follow branch naming conventions:
feature/,fix/,chore/,refactor/ - Submit PRs with clear description, screenshots (if UI)
- Primary Architect: @mtalhazulf
- Organization: Texagon
- Maintainers: Texagon Engineering Team
Designed to accelerate AI-powered and data-driven projects by Texagon. Use this as a starter for all internal and client-facing frontend builds.
© Texagon — Internal template for commercial and in-house projects. Reproduction or distribution outside Texagon is not permitted without written consent.