Nairametrics Platform Evolution - Roadmap Proposal

Nairametrics Website Evolution Roadmap

💡 Quick Reference: For a single-page overview of this roadmap, see Roadmap Overview

Executive Summary

This roadmap outlines Nairametrics’ phased migration from a traditional WordPress site to a modern, scalable Laravel-based platform. The journey is divided into three strategic phases, each with its own detailed documentation.

Elevator pitch: A three-phase path (Theme → Headless → Full Laravel) that delivers immediate UX gains, de-risks architecture change, and preserves editorial continuity while building toward a fully owned, scalable platform.

Table of Contents

Phase Documents

📄 Phase A: Custom WordPress Theme Redesign (IMMINENT)
→ 2-3 months | LOW risk | Ready to start

📄 Phase B: Headless CMS + Cross-Platform Frontend (NEXT)
→ 6-9 months | MEDIUM risk | Pending Phase A completion

📄 Phase C: Complete Laravel Migration (FUTURE)
→ 12-18 months | HIGH risk | Business case validation required

📖 Technical Documentation: For detailed technical architecture, implementation guides, service providers, Blade templating, HMR setup, and development workflows, see the Architecture Documentation.

Strategic Overview

Why This Three-Phase Approach?

Incremental Risk: Each phase delivers value independently while building toward the final architecture.

Business Continuity: Editorial team continues using familiar WordPress tools throughout Phases A and B.

Testing Ground: Phase B validates headless architecture before full migration in Phase C.

Data Preservation: Content remains in WordPress until Phase C ensures complete feature parity.

Go/No-Go Decisions: Can pause or pivot after each phase based on results.

Phase Comparison

Phase Scope Duration Risk Est. Cost (one-time) Key KPIs
A Custom WordPress theme redesign (Sage + Acorn + Blade + TailwindCSS), perf/SEO uplift 2-3 months LOW [Budget TBD] PSI ≥ 90 (mobile), LCP < 2.5s, CLS < 0.1
B Headless: Laravel API + Turborepo (Next.js web + Expo mobile) with shared TS packages 6-9 months MEDIUM [Budget TBD] API p95 < 200ms, Web LCP < 2s, Mobile TTI < 3s, ≥ 70% code reuse
C Full Laravel migration + Filament admin; content and features fully migrated 12-18 months HIGH [Budget TBD] Zero data loss, API p95 < 150ms, 99.95% uptime, SEO preserved

Current Architecture (Baseline - 2025)

Technology Stack (Current)

  • WordPress @latest (Monolith)
  • PHP @latest
  • MYSQL
  • Theme: Sage
  • Hosting: WPEngine
  • CDN: Cloudflare

Current Architecture Diagram

[Current State]
┌─────────────────────────────────────────────────┐
│  FRONTEND (WordPress Theme)                     │
│  - Server-side rendering (PHP)                  │
│  - Theme: JNews (WP Bakery)                     │
│  - Frontend: Blade + TailwindCSS + Alpine.js    │
└─────────────┬───────────────────────────────────┘
              │
┌─────────────▼───────────────────────────────────┐
│  WORDPRESS CORE                                 │
│  - Content management                           │
│  - User & media management                      │
│  - REST API (wp-json)                           │
└─────────────┬───────────────────────────────────┘
              │
┌─────────────▼───────────────────────────────────┐
│  DATA LAYER                                     │
│  - MYSQL                                        │
│  - Filesystem (uploads)                         │
└─────────────────────────────────────────────────┘

Performance Baselines (To Capture Before Phase A)

  • PageSpeed (Mobile/Desktop): Baseline, target +15-25%
  • Core Web Vitals: LCP, INP, CLS
  • TTFB, server response time
  • WP REST API latency (p95)
  • DB query time (avg, p95)

Third-Party Integrations (To Catalogue)

  • List all plugins and their purpose
  • External APIs/services (analytics, ads, search, etc.)
  • Auth providers, SSO, email

Architecture Principles & Constraints

Principles

  • Incremental value delivery (each phase stands alone)
  • Minimize editorial disruption in Phases A/B
  • Favor stateless services and cache-first design
  • Type-safe shared code (TS) across platforms in Phase B/C
  • Observability and measurable KPIs at each phase

Constraints

  • SEO preservation is non-negotiable
  • Backward-compatible URLs across migrations
  • Budget phases with explicit go/no-go gates
  • Prefer managed services over self-hosting when cost-effective

Non-Functional Requirements (NFRs)

Category Phase A Phase B Phase C
Availability 99.5% 99.9% 99.95%
Performance Mobile 90+ PSI API p95 < 200ms API p95 < 150ms
Security Hardening + CSP AuthN/Z + rate limit RBAC + encryption
Scalability N/A Horizontal scale API Full horizontal scaling
Observability Basic metrics APM + tracing SLOs + error budgets

Architecture Diagram Legend

  • 📦 Application/Service
  • 🗄️ Database/Data Store
  • ☁️ External Service/API
  • 🔄 Data Flow
  • 🔐 Authentication Required
  • ⚡ Cache Layer

Technology Decision Framework

Criteria

  • Team expertise and hiring market
  • Community and ecosystem maturity
  • Performance and scalability characteristics
  • Total cost of ownership (hosting, licenses, dev time)
  • SEO and UX impact (web)
  • Code reuse potential (web + mobile)

Summary Decisions

  • Web: Next.js 14+ (SSR/SSG/ISR) → SEO + ecosystem
  • Mobile: Expo + React Native → OTA updates + code reuse
  • API: Laravel 11 (Acorn integration where helpful) → PHP team synergy
  • Cache: Redis; Search: Algolia/Elasticsearch (Phase C)

For detailed matrices and rationale, see tech-choices/.

Glossary

  • SSR: Server-Side Rendering (HTML rendered on server per request)
  • SSG: Static Site Generation (HTML built at deploy time)
  • ISR: Incremental Static Regeneration (rebuild static pages on a timer)
  • PWA: Progressive Web App (installable web app)
  • EAS: Expo Application Services (builds and OTA updates)
  • APM: Application Performance Monitoring (e.g., New Relic, Datadog)
  • CSP: Content Security Policy (security header)
  • RBAC: Role-Based Access Control
  • SLO/SLA: Service Level Objective/Agreement
  • TTFB: Time To First Byte
  • LCP/INP/CLS: Core Web Vitals (Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift)

Architecture Evolution

CURRENT STATE
┌─────────────────────────────────┐
│    WordPress Monolith           │
│  - Content + Presentation       │
│  - Traditional Theme            │
│  - Server-Side Rendering        │
└─────────────────────────────────┘

↓ PHASE A (2-3 months)

┌─────────────────────────────────┐
│    WordPress + Custom Theme     │
│  - Modern UI/UX                 │
│  - Better Performance           │
│  - Improved SEO                 │
│  - Foundation for Phase B       │
└─────────────────────────────────┘

↓ PHASE B (6-9 months)

┌──────────────────────┐      ┌────────────────────────┐
│   WordPress CMS      │───▶  │   Laravel APIs         │
│  (Content Only)      │      │  - Business Logic      │
└──────────────────────┘      │  - Analytics           │
                              │  - Caching             │
                              └───────┬────────────────┘
                                      │
        ┌─────────────────────────────┼─────────────────────────┐
        │                                                       │
┌───────▼─────────────────────┐      ┌──────────────────────────▼──┐
│  TURBOREPO MONOREPO         │      │  Shared Code                │
│                             │      │  - packages/global          │
│  apps/web (Next.js 14+)     │◀────│  - packages/auth            │
│  - SSR/SSG for SEO          │      │  - packages/blog            │
│  - TailwindCSS              │      │  - packages/media           │
│  - Deploy to Vercel         │      │                             │
│                             │      │                             │
│  apps/mobile (Expo)         │◀────┤  70-80% Code Reuse          │
│  - iOS native app           │      │  TypeScript Everywhere      │
│  - Android native app       │      │  Tailwind + NativeWind      │
│  - PWA (mobile web)         │      │                             │
│  - Deploy via EAS           │      │                             │
└─────────────────────────────┘      └─────────────────────────────┘

↓ PHASE C (12-18 months)

┌─────────────────────────────────────────────────┐
│           Full Laravel Platform                 │
│                                                 │
│  ┌──────────────┐  ┌─────────────────────────┐  │
│  │   Filament   │  │   Laravel Backend       │  │
│  │ Admin Panel  │  │  - Content Management   │  │
│  │              │  │  - Business Logic       │  │
│  └──────────────┘  │  - All Features         │  │
│                    └───────────┬─────────────┘  │
└────────────────────────────────┼────────────────┘
                                 │
        ┌────────────────────────┼────────────────────────┐
        │                                                 │
┌───────▼─────────────────────┐       ┌───────────────────▼──┐
│  TURBOREPO MONOREPO         │       │  Shared Code         │
│  (Unchanged from Phase B)   │       │  (Unchanged)         │
│                             │       │                      │
│  apps/web (Next.js)         │◀─────│  All packages        │
│  - SSR/SSG for SEO          │       │  updated to use      │
│  - Tailwind CSS             │       │  Laravel APIs        │
│                             │       │                      │
│  apps/mobile (Expo)         │◀─────┤  Same TypeScript     │
│  - iOS, Android, PWA        │       │  Same components     │
│  - Same codebase            │       │  Same utilities      │
└─────────────────────────────┘       └──────────────────────┘

Phase A: Custom WordPress Theme (IMMINENT)

Status: Ready to start
Timeline: 2-3 months
Risk Level: 🟢 LOW

Goal

Modernize the user experience while maintaining WordPress’s full functionality. This phase lays the groundwork for future decoupling without disrupting current operations.

What Changes

  • ✨ Frontend UI/UX redesign
  • ⚡ Performance optimization
  • 📱 Mobile responsiveness
  • ♿ Accessibility improvements
  • 🎨 Modern theme architecture (Sage)

What Stays the Same

  • WordPress as CMS
  • Editorial workflow
  • Admin interface
  • Existing content structure
  • Hosting setup

Key Deliverables

  • Production-ready WordPress theme
  • Complete design system
  • Performance benchmarks (90+ PageSpeed)
  • SEO improvements maintained

Success Metrics

  • PageSpeed Score: 90+ (mobile), 95+ (desktop)
  • Bounce Rate: < 60%
  • Time on Site: > 2 minutes
  • SEO rankings maintained or improved

📄 Full Phase A Documentation →

Phase B: Headless CMS + Unified Frontend Architecture (NEXT)

Status: Pending Phase A completion
Timeline: 6-9 months
Risk Level: 🟡 MEDIUM

Goal

Decouple frontend from WordPress while keeping WordPress as the content management system. Build a Turborepo monorepo with Next.js (web with SEO) and Expo (native mobile) sharing TypeScript packages.

Architecture Highlights

  • 📦 Turborepo Monorepo: Single repository for all frontend code
  • 🌐 Next.js 14+: Web app with SSR/SSG for optimal SEO
  • 📱 Expo + React Native: Native iOS & Android apps + PWA
  • 🔄 70-80% Code Reuse: Shared API client, types, utilities, UI components
  • 💎 TypeScript Everywhere: Type-safe across all platforms
  • 🎨 TailwindCSS: Consistent styling (web) + NativeWind (mobile)

What Changes

  • 🚀 Turborepo Monorepo Structure:
    • apps/web/ - Next.js app with App Router (SSR/ISR for SEO)
    • apps/mobile/ - Expo app (iOS, Android, PWA)
    • packages/api-client/ - Shared API + React Query hooks
    • packages/types/ - TypeScript type definitions
    • packages/ui/ - Cross-platform components
    • packages/utils/ - Shared utility functions
    • packages/config/ - Shared configuration
  • 🔌 Laravel API layer
  • 📊 Advanced analytics
  • 🔔 Push notifications (mobile)
  • 💾 Offline support (mobile)

What Stays the Same

  • WordPress admin interface
  • Editorial workflow
  • Content structure
  • Content in WordPress database

Key Deliverables

  • Turborepo monorepo setup
  • Laravel REST API
  • Next.js web app (SEO-optimized)
  • Expo mobile app (iOS, Android, PWA)
  • Shared packages (5 packages)
  • Push notification system
  • Analytics dashboard
  • OTA update capability (mobile)

Success Metrics

  • API Response Time: < 200ms (p95)
  • App Launch Time: < 3s
  • Mobile App Downloads: Track growth
  • User Engagement: > 3 min sessions

📄 Full Phase B Documentation →

Phase C: Complete Laravel Migration (FUTURE)

Status: Future phase, requires business case validation
Timeline: 12-18 months
Risk Level: 🔴 HIGH

Goal

Completely migrate away from WordPress to a full Laravel-based platform with custom admin interface (Filament).

What Changes

  • 🔄 Complete WordPress replacement
  • 🎛️ Custom admin panel (Filament)
  • 📦 All content migrated to Laravel
  • 🆕 New editorial interface
  • 🎯 Complete control over features

What’s Challenging

  • Content migration (all posts, media, users)
  • Editorial team training on new system
  • Custom admin panel development
  • Ensuring feature parity
  • Zero downtime migration
  • SEO preservation

Key Deliverables

  • Full Laravel CMS
  • Custom admin panel (Filament)
  • Content migration completed
  • Editorial team trained
  • URL redirects in place

Success Metrics

  • Zero data loss during migration
  • SEO rankings maintained
  • Editorial workflow faster or same speed
  • Team satisfaction: 80%+ positive

📄 Full Phase C Documentation →

Timeline Summary

Total Duration: 20-30 months (1.5-2.5 years)

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  PHASE A: Theme Redesign                                    │
│  ████████░░ (2-3 months)                                    │
│  ↓                                                          │
│  PHASE B: Headless CMS                                      │
│  ████████████████████████░░░░ (6-9 months)                  │
│  ↓                                                          │
│  PHASE C: Laravel Migration                                 │
│  ████████████████████████████████████████ (12-18 months)    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Phases can overlap if resources allow
Each phase can be paused/evaluated before proceeding

Technology Stack Evolution

Phase A

  • Frontend: Sage, Blade, TailwindCSS, Alpine.js
  • Backend: WordPress, PHP @latest
  • Build: Bud.js
  • Hosting: VPS Hosting Setup

Phase B

Monorepo (Turborepo):

  • apps/web: Next.js 14+, React 18+, TailwindCSS
  • apps/mobile: Expo SDK 50+, React Native, NativeWind
  • packages: Shared TypeScript packages with feature/module based organization (global, auth, blog, media)

Backend:

  • API: Laravel 11+, WordPress REST API
  • Push: Expo Notifications (mobile)
  • Cache: Redis
  • Deployment: Vercel (web), EAS (mobile)

Phase C

  • CMS: Laravel 11+ with Filament admin
  • Database: Postgres
  • Frontend: Turborepo monorepo (unchanged from Phase B)
    • Next.js for web (unchanged)
    • Expo for mobile (unchanged)
    • All shared packages updated to use Laravel APIs
  • Search: Elasticsearch or Algolia
  • Queue: Laravel Horizon
  • Cache: Redis

Resource Requirements

Team Composition

Role Phase A Phase B Phase C
Backend Developer 0.5 1-2 1-2
Frontend Developer 1 1-2 1
Designer 1 (weeks 1-5) 0.5 0.5
DevOps Engineer 0.25 0.5 0.5
QA Engineer 0.25 0.5 0.5
Project Manager 0.25 0.5 0.5

Budget Estimates

Category Phase A Phase B Phase C
Development [Budget TBD] [Budget TBD] [Budget TBD]
Infrastructure Current [Client-specific infrastructure cost]/mo [Client-specific infrastructure cost]/mo
Third-Party Services Current [Client-specific third-party cost]/mo [Client-specific third-party cost]/mo
Contingency (20%) [Client-specific contingency] [Client-specific contingency] [Client-specific contingency]

Estimates based on freelance/contract rates. Adjust for in-house team.

Risk Management

Phase A Risks

Risk Likelihood Impact Mitigation
Design delays Medium Low Buffer time in schedule
Browser compatibility issues Low Low Test early and often
Performance regression Low Medium Baseline metrics, monitoring

Phase B Risks

Risk Likelihood Impact Mitigation
WordPress API performance Medium Medium Aggressive caching, CDN
Mobile dev complexity Medium Medium Start simple, iterate
Editorial confusion Low Medium No workflow changes
SEO impact Low High Proper SSR/SSG, testing

Phase C Risks

Risk Likelihood Impact Mitigation
Data loss Low Critical Testing, backups, parallel running
Editorial resistance Medium High Early involvement, training
SEO rankings drop Medium High URL redirects, gradual rollout
Feature parity gaps Medium High Thorough requirements, UAT
Budget overruns Medium Medium Phase-based approach, MVP focus

Decision Points

Before Starting Phase A

  • Budget approved?
  • Design requirements gathered?
  • Stakeholder buy-in?
  • Development resources available?

Before Starting Phase B

  • Phase A successful for 2+ months?
  • Budget approved (larger investment)?
  • Team resources available (backend + mobile)?
  • Business case validated?

Before Starting Phase C

  • Phase B successful for 6+ months?
  • Editorial team on board with major change?
  • Budget approved (significant investment)?
  • ROI projections justify cost?
  • Team comfortable with risk level?
  • Backup/rollback plan in place?

Success Metrics Overview

Technical KPIs

Metric Phase A Target Phase B Target Phase C Target
Page Load Time (LCP) < 2.5s < 2s < 1.5s
API Response Time N/A < 200ms < 150ms
Error Rate < 1% < 0.5% < 0.1%
Uptime 99.5% 99.9% 99.95%
PageSpeed Score 90+ 90+ 95+

Business KPIs

Metric Phase A Target Phase B Target Phase C Target
Traffic Growth Maintain +10-20% +20-30%
Session Duration +10% +20% +30%
Bounce Rate -10% -15% -20%
Mobile Traffic Track +30% +50%
Ad Revenue Maintain Maintain+ +10-20%

FAQ

Why not skip directly to Phase C?

Answer: Too risky. Phase B validates the headless architecture with minimal disruption. It gives the editorial team time to adapt and proves the technical approach works before full WordPress replacement.

Why Turborepo monorepo instead of single Expo app?

Answer: The Turborepo approach with separate Next.js and Expo apps provides:

  • Best SEO: Next.js SSR/SSG for optimal Google rankings
  • Native Performance: Full Expo power without web compromises
  • Maximum Code Reuse: 70-80% shared via TypeScript packages
  • Independent Optimization: Each platform optimized separately
  • Team Scalability: Web and mobile teams can work independently
  • Future-Proof: Easy to evolve each platform independently

What if Phase A or B fails?

Answer: Each phase is independently valuable:

  • Phase A fails: You have a better theme, stop there
  • Phase B fails: Revert to Phase A theme, APIs still useful
  • Phase C fails: Stay on Phase B (headless WordPress)

How long until we see ROI?

Answer:

  • Phase A: Immediate (better UX, SEO)
  • Phase B: 6-12 months (app downloads, engagement)
  • Phase C: 12-24 months (reduced technical debt, flexibility)

Can we change the timeline?

Answer: Yes! Timeline is flexible. You can:

  • Slow down if needed
  • Skip features (marked as LOW priority)
  • Overlap phases if resources allow
  • Pause between phases to evaluate

Getting Started

Immediate Next Steps

  1. Review this roadmap with key stakeholders
  2. Read Phase A Documentation in detail
  3. Create project team (at minimum: 1 developer, 1 designer)
  4. Set up project tracking (Jira, Linear, Asana, etc.)
  5. Begin Phase A Discovery (see Phase A doc)

Communication Plan

  • Weekly: Team standups
  • Bi-weekly: Stakeholder updates
  • Monthly: Phase review meetings
  • Quarterly: Strategic roadmap review

Document Updates

Date Version Changes Author
2025-10-09 2.1 Updated Phase B to Turborepo monorepo with Next.js + Expo shared packages AI Assistant
2025-10-09 2.0 Reorganized into separate phase documents, updated Phase B to use Expo AI Assistant
2025-10-09 1.0 Initial comprehensive roadmap AI Assistant

Additional Resources

Questions? Review the detailed phase documents or consult with your development team.

Last Updated: 2025-10-09

Weight: 3