Portfolio Monorepo ― This Website

    A comprehensive monorepo portfolio showcasing modern web development practices with Next.js, TypeScript, and a custom UI component library.

    Visit Projectmcdougald/Portfolio Monorepo ― This Website

    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.

    See more

    Howdy!👋🏻
    I'm Trevor McDougald
    |
    GitHub
    LinkedIn
    Email
    6+ years experience in
    Node
    Python
    Java
    Golang