MuseMVP Docs

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.

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

src/app/(landing-page)/[locale]
src/app/(saas-page)/app
src/app/api/[[...rest]]/route.ts
src/backend/api/app.ts
PathResponsibility
src/app/(landing-page)/[locale]Landing pages, blog, docs, and other marketing/CMS routes
src/app/(saas-page)/appAuthenticated app dashboard and user-facing console
src/app/api/[[...rest]]/route.tsNext.js → Hono API bridge entry point
src/backend/api/app.tsHono router registration and middleware composition

Module Boundaries

src/modules/*
src/backend/*
src/config/index.ts
content/docs
DirectoryResponsibility
src/modules/*Feature-scoped business modules (UI + logic)
src/backend/*Hono routes, API client, and database query layer
src/config/index.tsGlobal configuration and feature switches
content/docs / content/postsMDX 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