Modern Intranet Build — SPFx Web Parts & Branded Experience

The Challenge

A 100-person professional services firm had a SharePoint intranet that nobody used. It was a default-styled site with inconsistent navigation, no company branding, and nothing on the homepage that gave employees a reason to open it. HR was still sending birthday emails manually. Company news lived in a shared inbox. New starters had no single place to orient themselves.

Leadership wanted the intranet to become the digital front door — the first thing people opened in the morning. That required building something people would actually want to use, not just something that technically existed.

What We Built

Custom Application Customizer — Branding & Themes

The first thing we tackled was consistency. The old intranet looked different on every site — some had the company logo, most didn't, and colours were all over the place.

We built a Custom Application Customizer deployed via the SharePoint App Catalog that injects a branded header and footer across every site in the tenant:

• Company logo and primary navigation rendered via SPFx extension (not editable by site owners — stays consistent)
• Theme tokens pulled from a central configuration list, so a brand update touches one place and propagates everywhere
• Dark/light mode support tied to the user's M365 theme preference
• Mobile-responsive layout that collapses to a hamburger nav on smaller screens

Welcome Banner Web Part

A dynamic hero banner for the intranet homepage that personalises the greeting based on the logged-in user:

• "Good morning, [First Name]" with time-of-day awareness
• Quick-link tiles configured by admins via a SharePoint list (no code changes required to update)
• Rotating spotlight feature for announcements or featured content
• Fully responsive with brand-consistent gradient and typography

News Posts Web Part

A custom news carousel that pulls from the company's News pages library:

• Card-style layout with thumbnail, category tag, author, and date
• Editors publish once to the News library — the web part surfaces content automatically across the homepage and department hubs
• Filter by category (All / HR / Operations / Leadership) without page reload
• Smooth keyboard-navigable carousel with accessible markup

Birthdays Web Part

One of the most immediately loved additions. Pulls from the HR data list (synced from their HR system via Power Automate) and displays upcoming birthdays in a rolling 7-day window:

• Shows name, team, and a celebratory icon
• Configurable lead time (admins can show 3, 7, or 14 days ahead)
• Eliminated ~20 manual birthday emails per month from HR
• Falls back gracefully when no birthdays are upcoming ("No upcoming birthdays this week")

Work Anniversaries Web Part

Same data source as Birthdays, but surfacing work milestones (1 year, 5 years, 10 years, etc.):

• Milestone badges (🎖 1 Year, ⭐ 5 Years, 🏆 10+ Years) with configurable thresholds
• Auto-posts a Teams notification on the day via Power Automate trigger
• Configurable display window (upcoming 30 days default)
• Eliminated ~20 manual anniversary emails per month from HR

Weather Widget Web Part

A live weather widget that detects or is configured per office location:

• Current conditions, temperature (C/F toggle), and a 3-day forecast
• Location configured via web part property pane — no user interaction required
• Data pulled from a weather API on a 30-minute cache to avoid rate limits
• Compact design that sits comfortably in a sidebar column without dominating the layout

Smart Document Finder Web Part

A search-as-you-type component connected to SharePoint Search with pre-applied managed property filters:

• Results surface in under 300ms with document type, department, and last-modified metadata
• Quick-view pane allows file preview without leaving the homepage
• Reduced average document retrieval time from 8 minutes to under 90 seconds

Key Technical Decisions

Application Customizer over site themes alone: Site themes only control colours. The Application Customizer let us inject real structural elements — logo, nav, footer — that remain consistent even if a site owner changes the theme. Brand integrity is non-negotiable.

SPFx over Script Editor web parts: The legacy intranet used injected JavaScript via Script Editor — a classic anti-pattern that broke with every M365 update. SPFx components are versioned, deployed through the App Catalog, and survive tenant upgrades without manual intervention.

SharePoint list as config source: Rather than hardcoding values in web part properties, we used SharePoint lists as the configuration layer for Quick Links, Birthday/Anniversary display settings, and News categories. This means admins make changes in a familiar UI without touching the codebase.

Power Automate for HR data sync: The HR system doesn't have a native SharePoint connector. We built a scheduled Power Automate flow that pulls employee data via REST API and upserts it into the SharePoint HR list — keeping Birthday and Anniversary data fresh without manual exports.

Stack

• SharePoint Online (Microsoft 365)
• SPFx 1.18 with React + TypeScript
• SharePoint Application Customizer (SPFx Extension)
• SharePoint Search API (managed properties)
• Power Automate (HR data sync, Teams notifications)
• PnP.js for REST abstraction
• Azure DevOps CI/CD pipeline (App Catalog deployment)
• Weather API (cached via Azure Function)