First Roofing Company
Seamless migration of a decade-old corporate portal to a modern tech stack.
Role
Lead Developer, Full-Stack Developer, SEO Specialist
Year
2023
Stack
Next.js App RouterReactTypeScriptStrapiPostgreSQLDockerDokployDocker HubZodReact Hook Form
The task
The decade-old PHP portal was slow and fragile. The business needed a modern platform—without losing its accumulated SEO weight, hundreds of content pages, and with zero days of downtime.
Stages
Implementation Logic & Workflow
🔍 1. Legacy Audit & Database Architecture:
- Analyzed the 10-year-old PHP codebase, identifying and eliminating critical vulnerabilities (including hardcoded sensitive data).
- Mapped and preserved the entire legacy URL structure to completely prevent any drops in organic SEO traffic during migration.
- Architected a new relational data model: established deep entity relations within Strapi CMS and configured PostgreSQL so service pages dynamically display the specific portfolio objects where those services were applied.
UI/UX Refactoring & Content Upgrade
- Eliminated the chaotic clutter of intrusive third-party chats, pop-ups, and outdated loaders from the old site.
- Developed a clean, fully responsive interface focused on mobile conversion and a streamlined Customer Journey Map (CJM).
- Structured the historical archive of completed properties and executed a complete rewrite of descriptions for all portfolio use cases.
Frontend Engineering & Runtime Optimization
- Migrated the client-side to Next.js App Router, prioritizing Server Components for instant marketing page rendering.
- Optimized load performance using Dynamic Imports for heavy interactive features, such as the custom project map with dynamic clustering.
- Secured and streamlined form handling by pairing React Hook Form with strict data validation via Zod.
Marketing Automation & Local SEO
- Built a centralized price management module: changing a base service price in the CMS admin panel automatically updates the entire site.
- Developed an automated YML feed generation script to sync up-to-date pricing with local business directories (Yandex, 2GIS), significantly boosting local SEO and behavioral ranking factors.
Containerization & Modern DevOps
- Fully isolated the application environment by packing all services into Docker containers.
- Deployed Dokploy as a self-hosted management control panel for seamless infrastructure orchestration.
- Configured a robust CI/CD pipeline: code pushes trigger automated production image builds on Docker Hub, deploying updates with zero downtime.
The process
Rebirthing a Legacy Portal
Migrating a decade-old website is like performing a heart transplant while the patient is running a marathon.
The old PHP portal was slow and fragile, yet it steadily brought in real leads from search engines. The business required a modern platform with zero days of downtime and absolutely no risk of losing accumulated SEO positions.
1. Strategy and Architecture Redesign
We started with a deep content audit. The legacy structure was carefully preserved and mapped into new, logical entities within the Headless CMS Strapi, backed by a robust PostgreSQL database.
To improve behavioral factors crucial for organic search rankings, I engineered a dynamic pricing table system:
- Centralized Management: Base prices are set once in the admin panel and automatically cascade to the corresponding service pages.
- Automated Synchronization: This same data dynamically generates a YML feed, updating price lists across external platforms (2GIS, Yandex Business, and Yandex Services).
2. Uncompromising Performance
The new platform was built with a primary focus on loading speed and interface responsiveness. The frontend is architected on Next.js using Server Components.
To minimize the initial payload as much as possible:
- Dynamic Imports are applied to heavy client-side components.
- The catalog relies entirely on server routes and Next.js Streaming.
Result: The grueling 4.2-second loading times are gone for good.
3. New UI/UX and Complex Functionality
Based on the client's business goals and a competitive market analysis, we developed a fresh color scheme, defined modern graphics, and completely overhauled the Customer Journey Map (CJM).
A key highlight became the interactive map of completed projects featuring dynamic object clustering depending on the zoom scale.
The Magic Under the Hood: I configured deep relational links between entities at the Strapi level. Now, when a user visits a specific service page, the backend automatically compiles, returns, and displays exactly the objects that were built using that specific service.
The results
Overall portal loading time was reduced by nearly 3 seconds.
Exceptional Largest Contentful Paint metric on mobile devices (Lighthouse). Desktop scores are near zero.
Achieved zero Total Blocking Time and zero Cumulative Layout Shift on mobile.
Thanks to the radical upgrade in technical performance and faster response times on Lighthouse, the website's organic search rankings saw a significant rise.