Portfolio Monorepo ― This Website
A comprehensive monorepo portfolio showcasing modern web development practices with Next.js, TypeScript, and a custom UI component library.
Published
Updated
Views
Likes
Trev's Monorepo for Projects & Portfolio
This project represents a comprehensive monorepo architecture built with modern web development practices. It showcases a full-stack TypeScript application with a custom UI component library, internationalization, and advanced development tooling.
Architecture Overview
Monorepo Structure
Built with Turborepo and pnpm workspaces, this project demonstrates scalable monorepo patterns:
- @mcdougald/portfolio-website - Main Next.js application
- @mcdougald/ui - Custom component library (281+ components)
- @mcdougald/core - Shared utilities and constants
- @mcdougald/db - Database schemas and Drizzle ORM
- @mcdougald/i18n - Internationalization support
- @mcdougald/env - Type-safe environment configuration
- @mcdougald/auth - Authentication utilities
- @mcdougald/api - External API integrations
- @mcdougald/emails - React Email templates
- @mcdougald/kv - Redis-based caching
- @mcdougald/content-collections - MDX content management
- @mcdougald/mdx-plugins - Custom MDX processing
Key Features
Frontend Excellence
- Next.js 16 with App Router and React 19
- TypeScript throughout with strict type checking
- Tailwind CSS with custom design system
- Radix UI primitives for accessibility
- Framer Motion for smooth animations
- MDX for rich content authoring
- Content Collections for type-safe content management
Backend & Database
- PostgreSQL with Neon for serverless database
- Drizzle ORM for type-safe database operations
- oRPC for end-to-end type safety
- Better Auth for authentication
- Upstash Redis for caching and rate limiting
Development Experience
- Turborepo for fast, cached builds
- Biome for linting and formatting
- Playwright for end-to-end testing
- Vitest for unit testing
- TypeScript strict mode
- ESLint with custom configurations
- Husky for git hooks
Deployment & Infrastructure
- Vercel for hosting and deployments
- SST for infrastructure as code
- Umami for privacy-focused analytics
- React Email for transactional emails
- i18n support for multiple languages
Component Library
The @mcdougald/ui package contains 281+ React components organized into:
- UI Components (47) - Core UI elements with Radix primitives
- Animated Components (67) - Interactive and animated elements
- Specialized Components (50+) - Domain-specific complex components
- Library Integrations (15+) - Third-party library wrappers
- Custom Hooks (105) - Utility hooks for common patterns
Content Management
- MDX for rich, interactive content
- Content Collections for type-safe content processing
- Shiki for syntax highlighting
- Custom MDX plugins for enhanced functionality
- Internationalization with next-intl
Development Workflow
- Monorepo with workspace dependencies
- Type-safe end-to-end with TypeScript
- Automated testing with Playwright and Vitest
- Code quality with Biome and ESLint
- Git hooks for consistent commits
- CI/CD with Vercel and GitHub Actions
This project demonstrates modern web development practices, from monorepo architecture to type-safe APIs, showcasing the evolution of web development tooling and best practices.