Project Architecture & Tech Stack
Tech Stack
- •Framework: Next.js 15 (App Router)
- •Language: TypeScript
- •Styling: Tailwind CSS v4, CSS Modules (for specific components)
- •Docs/Content: Docusaurus (in
textbook/directory) - •Auth: Better Auth (
better-auth) - •Database: PostgreSQL (NeonDB)
- •ORM: Drizzle ORM
- •UI Components: Lucide React icons, Custom components
Directory Structure
- •
/app: Next.js App Router pages and layouts. - •
/components: Reusable UI components.- •
/auth: Authentication related components (forms, etc.).
- •
- •
/lib: Utility functions and shared logic.- •
auth-client.ts: Better Auth client configuration. - •
auth.ts: Better Auth server configuration.
- •
- •
/db: Database schema and connection logic. - •
/drizzle: Migrations. - •
/textbook: Docusaurus instance for documentation/content.- •
/src: Docusaurus source files.
- •
Key Patterns
- •Hybrid App: Combines a Next.js web app (marketing, auth, dashboard) with a Docusaurus documentation site.
- •Auth Integration: Shared authentication state between Next.js and Docusaurus via cookies/sessions (handled by
AuthBar). - •Styling: Global Tailwind styles in
app/globals.css. Docusaurus has its own theme intextbook/src/css/custom.css.
Development
- •Run root app:
npm run dev:root - •Run docs app:
npm run dev:docs - •Run both:
npm run dev