Malec Family Wiki

Project Overview

The Malec Family Wiki is a sophisticated multi-subdomain portfolio platform that enables family members to maintain their professional portfolios, project histories, and personal pages under a unified domain structure. Built with modern web technologies and hosted on Azure App Service, the platform showcases an elegant solution to subdomain routing and content management.

Tech Stack

The Problem

Managing multiple portfolio websites for family members presented several challenges:

• Cost Inefficiency: Each person maintaining a separate website meant multiple hosting costs, SSL certificates, and domain registrations
• Maintenance Overhead: Updates to design or functionality required changing multiple sites individually
• Inconsistent Branding: Separate sites led to fragmented family brand identity
• Complex SSL Management: Managing SSL certificates for multiple domains was time-consuming and error-prone
• Difficult Onboarding: Adding a new family member required hours of setup work

The Solution

A unified platform with intelligent subdomain routing that provides:

Subdomain Architecture

Each person can have multiple subdomain variations that all route to their personalized page:

• brian.m.malec.malec.wiki
• brian.malec.malec.wiki
• bmalec.malec.wiki
• brian.malec.wiki

All these variations automatically route to the same portfolio while preserving SEO benefits.

Configuration-Driven Content

Person-to-subdomain mappings are managed through a simple JSON configuration:

Easy Expansion

Adding a new family member takes just 5 minutes:

1. Add configuration entry in config/people.json
2. Create directory: public/people/{personId}/
3. Copy and customize an HTML template
4. Commit and push - automatic deployment via CI/CD

Key Features

• Intelligent Subdomain Routing: Express middleware parses subdomains and routes to the correct person's content automatically
• Multiple Subdomain Aliases: Each person can have unlimited subdomain variations pointing to their page
• Responsive Templates: Mobile-first HTML5 templates that work beautifully on all devices
• Automated CI/CD: Azure DevOps pipeline handles build, test, and deployment automatically on git push
• SSL Certificate Management: Azure App Service handles SSL for all subdomains with automatic renewal
• Project Pages: Each person can have unlimited project detail pages with consistent navigation
• Health Monitoring: Built-in health check endpoint for Azure monitoring
• Debug API: Subdomain info endpoint for troubleshooting routing issues

Technical Highlights

Middleware-Based Routing

The subdomain routing logic uses Express middleware to parse and match subdomains before handling requests. This approach ensures routing decisions happen early in the request lifecycle:

1. Extract hostname from request headers
2. Parse subdomain by removing base domain
3. Look up person ID from configuration
4. Attach person ID to request object for downstream handlers
5. Route to appropriate HTML template

Middleware Ordering Bug Fix

An interesting challenge emerged during development: the static file middleware was serving the main landing page before the subdomain routing logic could execute. The solution was to reorder middleware so dynamic routes are processed before static file serving.

Azure DevOps Integration

Complete CI/CD pipeline with:

• Automated builds on push to master branch
• Node.js 24 environment setup
• Dependency installation and artifact creation
• Automatic deployment to Azure App Service
• Zero-downtime deployments

Architecture

Project Structure

Request Flow

1. Request arrives at Azure App Service load balancer
2. Express receives request with full hostname
3. Subdomain middleware parses hostname and extracts subdomain
4. Configuration lookup matches subdomain to person ID
5. Request object augmented with person information
6. Route handler serves appropriate HTML template
7. Static assets (CSS, JS) served via Express static middleware

Challenges & Solutions

Challenge 1: Middleware Ordering

Problem: Subdomains were showing the default landing page instead of person-specific content.

Solution: Discovered that Express static middleware was matching before the routing logic. Reordered middleware to process dynamic routes first, then fall back to static files.

Challenge 2: Azure Domain Configuration

Problem: Azure App Service requires Basic tier or higher for custom domains, and wildcard domains need Standard tier.

Solution: Created comprehensive documentation (AZURE_DOMAIN_SETUP.md) with step-by-step instructions for both individual and wildcard domain approaches.

Challenge 3: Project Documentation Workflow

Problem: Creating detailed project pages was time-consuming and required remembering all project details.

Solution: Built a cross-session prompt system where Claude Code can analyze a project in one session, generate structured data, which is then used in the wiki session to auto-generate project pages.

Future Enhancements

• CMS Integration: Add a simple content management system for non-technical family members to update their pages
• Blog Functionality: Enable blog posts with RSS feeds for each person
• Photo Galleries: Add support for project image galleries and portfolios
• Contact Forms: Integrate contact form functionality with email notifications
• Analytics Dashboard: Track page views and popular projects per person
• Dark Mode: Add theme toggle for dark/light mode preference
• Search Functionality: Cross-portfolio search for skills, projects, or content

Lessons Learned

• Middleware Order Matters: In Express, the order middleware is registered directly impacts request handling. Always consider the execution order carefully.
• Configuration Over Code: Using JSON configuration for person mappings makes the system flexible without code changes.
• Documentation is Critical: Comprehensive setup guides (like AZURE_DOMAIN_SETUP.md) save hours of troubleshooting later.
• Start Simple: Beginning with individual subdomain configuration allowed for incremental learning before tackling wildcard domains.
• Automation Pays Off: The time invested in CI/CD setup pays dividends with every deployment.