Tech Stack
A deep dive into the technologies powering MuseMVP and why we chose them.
This page covers every core technology used in MuseMVP, along with the reasoning behind each choice. Every entry links to its official documentation so you can dive deeper whenever needed.
Next.js & React
Next.js 16 is one of the most mature React full-stack frameworks available, offering App Router, Server Components, and streaming rendering. We use Next.js to serve both the frontend and the backend API entry point (via a Hono bridge route). React 19 brings improved Server Actions and concurrency features that further reduce client-side JavaScript bundle size.
Hono & TanStack Query
Hono is a lightweight, ultra-fast, edge-friendly web framework. Its built-in RPC client enables end-to-end type-safe function calls from the frontend. We mount the Hono app inside Next.js's app/api/[[...rest]] route, letting the frontend and backend coexist in the same repository.
TanStack Query handles data fetching, caching, and state synchronization on the client side. Paired with the Hono RPC client, it dramatically simplifies async data management logic.
Better Auth
Better Auth is a modern authentication library built for full-stack apps. It exposes ready-to-use auth flows and a plugin-based extension system. MuseMVP activates multiple plugins on top of Better Auth to cover everything from basic login to advanced security:
- Email + password login / Email OTP verification code login
- Google & GitHub OAuth social login
- WebAuthn passwordless login
- TOTP-based two-factor authentication (2FA)
- Admin role plugin
- Cloudflare Turnstile bot protection
Drizzle ORM & PostgreSQL
Drizzle ORM is a type-safe TypeScript ORM where schema definitions, query building, and database migrations all benefit from full type inference—without any code generation step. We default to PostgreSQL, but Drizzle's flexible adapter layer makes it straightforward to switch to MySQL or SQLite.
Tailwind CSS & UI Components
Tailwind CSS v4 is a utility-first CSS framework that forms the foundation of our design system. We pair it with shadcn/ui (accessible headless components built on Radix Primitives) and Framer Motion for animations.
All theme colors are managed through CSS variables, so switching themes or updating brand colors requires no changes to component code.
Tailwind CSS v4
tailwindcss.com
shadcn/ui
ui.shadcn.com
Radix Primitives
radix-ui.com
Framer Motion
framer.com
Forms & Validation
React Hook Form provides performance-first uncontrolled form management. Zod handles schema declaration and runtime data validation. The two are deeply integrated across MuseMVP, ensuring all user input is validated on both the client and server side with full type safety.
Payments: Stripe & Creem
Stripe is the most widely adopted SaaS payment solution globally. Creem is a developer-friendly alternative that doesn't require a US entity—ideal for indie makers. MuseMVP ships webhook and callback handling for both gateways. The unified Muse Billing module abstracts the pricing strategy layer so you can swap payment providers without touching business logic.
AI: Vercel AI SDK
The Vercel AI SDK is the go-to toolkit for building AI-powered features, natively supporting streaming text, tool calling, and streaming React component rendering (Generative UI). MuseMVP builds on it to deliver a ready-to-use AI chat interface with conversation history persisted to the database.
CMS: Fumadocs & Content Collections
Fumadocs powers the documentation system you're reading right now. It provides professional content organization, full-text search, and MDX rendering—extended in MuseMVP with a paid content gating (Pro Content) mechanism. Content Collections handles type-safe data sourcing for blog posts and changelogs.
Internationalization: next-intl
next-intl provides a complete i18n solution for the Next.js App Router, covering routing, message translation, and locale-aware formatting. Every surface in MuseMVP—landing pages, dashboards, docs, and blogs—supports seamless multi-language switching.
Email: Resend & React Email
Resend is a modern email delivery service built for developers. React Email lets you write beautiful HTML email templates using familiar React components. MuseMVP ships pre-built templates for OTP codes, password resets, welcome emails, and system notifications.
Object Storage (S3-compatible)
MuseMVP wraps a standard S3-protocol file upload interface, compatible with AWS S3, Cloudflare R2, or self-hosted MinIO out of the box. Switching storage providers requires only environment variable changes.
Analytics
MuseMVP simultaneously integrates Google Analytics (GA4) and Baidu Tongji, connected through a unified useAnalytics hook that sends custom tracking events to both platforms in a single call. Ideal for products targeting both international and Chinese markets.
Route Layers
| Path | Responsibility |
|---|---|
src/app/(landing-page)/[locale] | Landing pages, blog, docs, and other marketing/CMS routes |
src/app/(saas-page)/app | Authenticated app dashboard and user-facing console |
src/app/api/[[...rest]]/route.ts | Next.js → Hono API bridge entry point |
src/backend/api/app.ts | Hono router registration and middleware composition |
Module Boundaries
| Directory | Responsibility |
|---|---|
src/modules/* | Feature-scoped business modules (UI + logic) |
src/backend/* | Hono routes, API client, and database query layer |
src/config/index.ts | Global configuration and feature switches |
content/docs / content/posts | MDX content sources (docs and blog) |
Data & Request Flow
UI components in src/modules trigger a user action
React Query hooks in src/backend/api-client issue a Hono RPC call
The request enters the corresponding Hono router in src/backend/api/routes
The service layer (e.g. muse-billing/lib/orchestrator.ts) or query layer (src/backend/database/queries) handles business logic
The response returns, React Query updates its cache, and the UI re-renders automatically
Quick Reference
| Technology | Docs |
|---|---|
| Next.js | nextjs.org/docs |
| React | react.dev |
| Hono | hono.dev/docs |
| TanStack Query | tanstack.com/query/latest/docs |
| Better Auth | better-auth.com/docs |
| Drizzle ORM | orm.drizzle.team/docs |
| PostgreSQL | postgresql.org/docs |
| Tailwind CSS | tailwindcss.com/docs |
| shadcn/ui | ui.shadcn.com/docs |
| Radix UI | radix-ui.com/primitives/docs |
| Zod | zod.dev |
| React Hook Form | react-hook-form.com/docs |
| Stripe | stripe.com/docs |
| Creem | creem.io/docs |
| Vercel AI SDK | ai-sdk.dev/docs |
| Fumadocs | fumadocs.dev/docs |
| Content Collections | content-collections.dev/docs |
| next-intl | next-intl.dev/docs |
| Resend | resend.com/docs |
| React Email | react.email/docs |
| Framer Motion | framer.com/motion |