Architecture Overview
Overview of the Odysee.ai frontend architecture and monorepo structure
Architecture Topics
Monorepo Structure
Turborepo setup, workspace management, and build orchestration
Applications
Deep dive into Web, Storybook, and Docs applications
Shared Packages
UI components, utilities, and shared configurations
Data Fetching
Server Components, Server Actions, and React Query patterns
Routing
Next.js App Router, dynamic routes, and route groups
Styling
Emotion, Material-UI theming, and styling patterns
Authentication
Multi-provider auth with Clerk, Auth0, and Cognito
Deployment
CI/CD pipelines and deployment strategies
Quick Overview
Tech Stack
| Technology | Purpose |
|---|---|
| Next.js 15.1 | React framework with App Router |
| React 19 | UI library |
| TypeScript 5.7 | Type safety |
| Material-UI 7.2 | UI component library |
| Turborepo 2.x | Monorepo build system |
| pnpm 9.1.0 | Package manager |
Project Structure
turbo.json
package.json
pnpm-workspace.yaml
Key Architectural Decisions
Why Monorepo?
- Code Sharing: Share components, utilities, and configurations across applications
- Atomic Changes: Update multiple packages in a single commit
- Consistent Tooling: Unified linting, formatting, and testing
- Faster Builds: Turborepo's caching dramatically speeds up builds
- Type Safety: End-to-end type safety across all packages
Why Next.js 15?
- App Router: Modern routing with React Server Components
- Performance: Built-in optimizations for images, fonts, and code splitting
- Developer Experience: Fast Refresh, TypeScript support, and great tooling
- Deployment: Seamless integration with Vercel
Why Material-UI?
- Comprehensive: Large library of pre-built components
- Customizable: Powerful theming system
- Accessible: WCAG 2.1 compliant components
- Production Ready: Battle-tested in enterprise applications
Getting Started
New to the architecture? Start here:
- Monorepo Structure: Understand the workspace setup
- Applications: Learn about each app
- Shared Packages: Explore reusable code
- Data Fetching: Master data patterns
Ready to dive deeper? Choose a topic from the cards above.