Portfolio Monorepo ― This Website

A Modern Monorepo 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/jobs - Background job utilities
• @mcdougald/content-collections - MDX content management
• @mcdougald/mdx-plugins - Custom MDX processing

Key Features

Frontend Excellence

• Next.js 15 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.

See more