Modernizing Red Ocean Contracting's Website
Taimoor Khan
Red Ocean Contracting
Modernizing a Contracting Business Website with Next.js and Payload CMS
Client: Red Ocean Contracting
Agency: App Corp
Project Type: Website Development, CMS Implementation, Business Website Modernization
Industry: Contracting, Construction & Business Services
Core Technologies: Next.js, TypeScript, Payload CMS, PostgreSQL
Infrastructure: Railway
Website: https://redocceancontracting.com
Redesigned: https://redoceancontracting-website-production.up.railway.app/
⸻
Project Overview
Red Ocean Contracting needed a modern digital presence that reflected its business professionally while establishing a foundation for future digital transformation.
App Corp delivered a modern public-facing website built with Next.js, TypeScript, and Payload CMS. The solution provides a structured content management foundation and a more flexible architecture for maintaining and extending the website as the business evolves.
However, the project was not approached as an isolated website redesign.
Our broader architectural direction was to establish a separation between the company’s public-facing digital presence and its internal business operations. The website would serve prospective customers and visitors, while a separate ERP environment would eventually support internal workflows, operational data, team access, and business automation.
This distinction was important: a contracting business needs more than a website that looks professional. It needs a digital foundation that can evolve alongside its operations without turning every new requirement into a costly redevelopment project.
App Corp approached the engagement with that longer-term perspective.
The result was a modern website powered by a structured CMS, supported by a technology stack that gives the business room to grow and provides a foundation for further integration.
The engagement at a glance
Business objective: Modernize the public-facing website and establish a maintainable digital foundation.
Primary deliverable: A website built with Next.js, TypeScript, and Payload CMS.
Content management: Structured CMS infrastructure for managing website content.
Architecture: Separation of the public website from the planned internal ERP environment.
Future direction: An extensible digital ecosystem supporting business operations, integrations, and AI-powered automation.
⸻
Understanding the Business Challenge
Contracting businesses depend on credibility, clear service communication, and efficient ways for prospective customers to initiate conversations.
Their websites need to communicate what the company does, present its services professionally, and make it straightforward for potential customers to get in touch.
At the same time, a business’s digital requirements rarely stop at its public website.
As a company grows, it may need better ways to manage internal information, coordinate its team, standardize workflows, handle incoming inquiries, and connect operational processes.
These requirements create two related but distinct challenges:
Establishing a professional, maintainable public-facing digital presence.
Creating a technical foundation that does not prevent future operational improvements.
Our work with Red Ocean Contracting focused on addressing the first challenge while making deliberate architectural decisions to support the second.
Challenge 1: Building a modern public-facing experience
A business website must do more than display information.
It needs a coherent structure that helps visitors understand the business, explore relevant services, and find an appropriate next step.
For a contracting business, that means presenting information clearly and providing a straightforward path for prospective customers to make contact or request a quotation.
The website also needs to work across devices, including smartphones, tablets, and desktop computers.
Our approach
App Corp built the public-facing website using Next.js and TypeScript, establishing a modern application foundation for the site’s presentation layer.
The objective was to create a professional digital experience that could be maintained and extended as the company’s needs changed.
Challenge 2: Making website content easier to maintain
A website becomes an operational burden when routine content changes require unnecessary developer involvement.
Business teams need a manageable way to maintain relevant content without treating every update as a software development project.
A content management system provides a structured approach to this problem, but the choice of CMS matters.
We wanted a solution that could support the website’s content requirements while remaining aligned with the broader JavaScript and TypeScript ecosystem.
Our approach
We implemented Payload CMS as the content management foundation.
Payload provides a developer-oriented, code-defined CMS architecture that can be extended alongside the application rather than treated as a completely separate, inflexible publishing system.
This approach gives the website a foundation for structured content management and future enhancements.
Challenge 3: Avoiding an architecture that limits future development
A public website and an internal ERP serve different purposes.
The public website needs to communicate with customers and prospects. An ERP needs to support business processes, operational records, internal access, and potentially integrations with other systems.
Combining every responsibility into a single application without clear boundaries can make future development harder.
It can also create unnecessary coupling between public content, internal business data, and operational workflows.
Our approach
We established a direction in which the public website and internal ERP would operate as separate application environments.
The public website uses Payload CMS for content management, while the planned ERP environment at erp.redoceancontracting.com is intended to support internal business operations.
The architecture also envisages separate PostgreSQL layers for the website CMS and the ERP.
This separation provides a clearer foundation for independent development, access control, data ownership, and future integration.
It is important to distinguish this architectural direction from the website delivery itself: the public-facing website was the primary delivered project, while the broader ERP and AI automation work represents the next stage of the digital transformation roadmap.
⸻
Our Solution
App Corp delivered a modern website architecture centered on three key components.
A. Next.js — The Public Website
We used Next.js to build the public-facing website.
This established a modern web application foundation with flexibility for page composition, routing, reusable interface components, and future enhancements.
For a business website, the frontend needs to balance presentation, usability, maintainability, and the ability to evolve without requiring a complete rebuild.
Our approach focused on providing a foundation that could support the company’s public-facing requirements today while accommodating additional capabilities later.
B. TypeScript — A More Maintainable Codebase
TypeScript was part of the application stack.
Using a typed development approach helps make application structures and interfaces more explicit, improves development tooling, and can help identify certain classes of errors before runtime.
This is particularly useful when a website is expected to evolve beyond a small collection of static pages.
It also aligns the frontend and CMS implementation with a consistent development ecosystem.
C. Payload CMS — Structured Content Management
Payload CMS provides the content management foundation for the website.
Rather than treating content as an inseparable part of the frontend implementation, a CMS-backed architecture provides a clearer distinction between content management and presentation.
This gives the project room to grow as content requirements change.
It also establishes a foundation for introducing additional content structures and integrations without making the public website dependent on a rigid publishing workflow.
The exact editing capabilities available to the client depend on the configured collections, fields, access rules, and administrative interface.
⸻
Scope of Work
The engagement focused on modernizing the public-facing website and implementing its content management foundation.
4.1 Website Development
Technology: Next.js and TypeScript
The website development work established the public-facing application.
The implementation was designed around a maintainable application structure, with the flexibility to support future website enhancements.
Key areas included:
Public-facing website development.
Application architecture and frontend implementation.
Integration with the Payload CMS content layer.
A foundation for future website features and integrations.
A technology stack aligned with modern JavaScript and TypeScript development.
4.2 CMS Implementation
Technology: Payload CMS
The CMS implementation established the content management layer for the website.
The purpose was to provide a structured foundation for managing website content and supporting future content-related requirements.
Key areas included:
Payload CMS integration.
Structured content management architecture.
Integration between the website and CMS.
A foundation for extending content models as requirements evolve.
A code-defined CMS architecture that can be maintained alongside the application.
4.3 Database Architecture
Technology: PostgreSQL
PostgreSQL forms part of the project’s data infrastructure.
The broader architecture calls for a separation between the website’s CMS data layer and the planned ERP data layer.
This is an important design consideration because public website content and internal business records have different access patterns, ownership requirements, and operational responsibilities.
The intention is to avoid treating the public website as the system of record for internal business operations.
4.4 Infrastructure and Deployment Foundation
Platform: Railway
Railway was part of the project’s infrastructure context.
Using a managed application platform can simplify deployment and application operations compared with maintaining every infrastructure component independently.
The final production configuration, backup policies, monitoring arrangements, and service-level commitments should be documented separately where applicable; they are not assumed to be included in this case study as independently verified deliverables.
4.5 Architecture for Future Integration
The website was developed with the broader business technology direction in mind.
The intended architecture separates:
The public-facing website and its content management layer.
The internal ERP and operational data layer.
Future integrations and automation capabilities.
This approach provides a clearer path for future development without suggesting that every planned integration or automation capability was part of the website delivery.
⸻
Technical Architecture
The project uses a modern web application stack designed to support maintainability and future development.
Public Website
Next.js + TypeScript
Responsible for the public-facing website experience.
Content Management
Payload CMS
Responsible for the website’s structured content management layer.
Database
PostgreSQL
Provides the relational database foundation, with separate website CMS and ERP data layers envisaged in the broader architecture.
Application Infrastructure
Railway
Part of the deployment and infrastructure environment.
Broader Business Systems
Planned ERP environment
The ERP at erp.redoceancontracting.com is intended to support internal business processes independently of the public website.
Architecture at a glance
The diagram illustrates the architectural direction rather than a claim that all ERP and automation components have already been implemented.
⸻
Why We Chose Payload CMS
The CMS choice was a significant part of the solution.
A content management system should be evaluated not only by how easily content can be edited, but also by how well it fits the application’s development architecture.
Payload CMS was a strong fit for this project because it supports a code-first approach to content management.
Developer-oriented architecture
Payload allows developers to define content structures and application behavior in code.
This makes the CMS implementation easier to reason about alongside the application itself.
It also provides a path for managing changes through normal software development practices.
Alignment with the JavaScript ecosystem
The project uses Next.js and TypeScript.
Using Payload CMS keeps the website’s core application technologies aligned with the same broader development ecosystem.
This reduces the need to treat the CMS as an entirely separate technology stack.
Flexibility for evolving requirements
Business websites change over time.
New services, pages, content types, and integrations may become necessary as a company grows.
A structured CMS implementation provides a foundation for evolving those requirements without treating every content change as a completely new website project.
A foundation for integration
The website was also considered within the context of a wider business technology ecosystem.
Payload CMS supports a more integrated development approach than a disconnected content publishing workflow, although specific integrations still require their own implementation and testing.
Our decision was based on architectural fit, maintainability, and the ability to extend the platform over time.
⸻
Separating the Website from the ERP
One of the most important architectural decisions in this engagement was the separation of the public website from internal business systems.
This distinction is particularly relevant for businesses moving from a simple digital presence toward more comprehensive operational software.
The public website has a clear responsibility
The website serves the company’s public-facing digital needs.
It presents the business and provides a platform for communicating with prospective customers.
Its CMS supports the management of website content.
The ERP has a different responsibility
The ERP is intended to support internal business operations.
Its requirements may include operational records, internal team access, business workflows, and future automation.
Those responsibilities should not automatically be placed inside the public website’s content management layer.
Why separation matters
A clearer boundary between the two systems can help with:
Security boundaries: Internal operational data can be governed separately from public website content.
Independent development: Website and ERP features can evolve according to their own requirements.
Data ownership: Each system can maintain its own responsibilities and data structures.
Operational flexibility: Changes to one application do not automatically require equivalent changes to the other.
Integration planning: Future connections can be designed around explicit interfaces rather than uncontrolled coupling.
This is not simply a technical preference. It is a way to reduce architectural constraints as the business’s software requirements expand.
⸻
Looking Beyond the Website: The Digital Transformation Roadmap
The website was the first part of a broader digital direction for Red Ocean Contracting.
The wider roadmap envisages an ERP environment and the gradual introduction of AI-powered agents to support business processes.
The goal is to move toward a more connected operating model in which business software and automation can work together.
Phase 1: Public-Facing Digital Foundation
The website and Payload CMS establish the public-facing application and content management layer.
Status: Website delivered.
Phase 2: Internal Business Systems
The planned ERP environment is intended to support internal operations, team access, and business workflows.
Status: Part of the broader roadmap; not represented as a completed component of the website project.
Phase 3: Business Process Automation
The longer-term direction includes identifying operational bottlenecks and introducing automation where it can produce practical value.
Potential areas for automation would be assessed against the company’s actual processes, data availability, and operational requirements.
Status: Future roadmap.
Phase 4: AI-Powered Business Agents
App Corp’s broader strategy includes AI agents designed to work with business systems through controlled interfaces.
For Red Ocean Contracting, the concept is to introduce automation incrementally rather than require the business to transform every process at once.
A phased approach can make it easier to prioritize high-value workflows, assess each implementation, and spread development effort over time.
Status: Strategic direction, distinct from the delivered website scope.
The important principle is that AI should be introduced to solve identifiable operational problems, not added merely as a marketing feature.
⸻
The Engineering Principles Behind the Project
Several engineering principles guided the approach.
Principle 1: Build for maintainability
A website should not become increasingly difficult to maintain as new requirements emerge.
Using Next.js, TypeScript, and Payload CMS creates a modern development foundation with room for continued evolution.
Principle 2: Separate responsibilities
The public website and internal ERP serve different audiences and operational purposes.
Maintaining clear boundaries helps prevent unnecessary coupling and supports more deliberate security and data management decisions.
Principle 3: Avoid unnecessary architectural lock-in
A business should not have to rebuild its entire public website simply because its internal software requirements change.
Separating the website from the ERP gives each application a clearer role and provides flexibility for future development.
Principle 4: Plan for integration without overbuilding
It is possible to make sensible architectural decisions for future integration without implementing every anticipated feature immediately.
This helps keep the current project focused while preserving a practical direction for future development.
Principle 5: Treat AI as an operational capability
The longer-term AI roadmap is centered on business workflows and practical automation.
The objective is to connect AI capabilities to useful business processes through an appropriate application architecture, rather than treating AI as an isolated demonstration.
⸻
Project Outcomes
The principal outcome was a modernized public-facing website built with a contemporary application stack and a structured content management foundation.
The project also established an architectural direction for the company’s broader digital transformation.
A modern website foundation
The website uses Next.js and TypeScript rather than relying exclusively on a traditional server-rendered PHP website architecture.
This gives the project a modern application foundation for continued development.
Structured content management
Payload CMS provides the content management layer and a foundation for extending the website’s content structures over time.
Clearer separation of business systems
The broader architecture distinguishes the public website and CMS from the planned ERP environment.
This supports a more deliberate approach to application responsibilities and future integrations.
A path for continued development
The project creates a foundation upon which additional capabilities can be considered and developed as business requirements evolve.
These include the planned ERP environment, operational workflows, and potential AI-powered automation.
Positive client reception
Red Ocean Contracting was happy with the new public-facing website and the Payload CMS direction.
That feedback supported the decision to consider the website as the beginning of a broader digital transformation rather than an isolated redesign.
Outcomes we do not claim
We have not attributed specific percentage improvements in conversions, search rankings, operational efficiency, or revenue to this project because independently verified before-and-after metrics were not available.
The value of the engagement is therefore presented through the delivered website, the technology foundation, the architectural decisions, and the client’s positive reception.
⸻
Why This Project Matters
This project demonstrates App Corp’s approach to website development for businesses that need more than a visual refresh.
We consider the relationship between the website, content management, infrastructure, data ownership, and future application requirements.
That does not mean every website needs an ERP or an AI layer.
It means that where a client has a broader digital direction, the website should be developed with a sensible understanding of how it fits into that direction.
For Red Ocean Contracting, the immediate need was a modern public-facing website.
Our solution addressed that need while establishing a technical foundation aligned with the company’s longer-term plans.
The work demonstrates our ability to combine:
Modern frontend development.
Structured content management.
TypeScript-based application architecture.
Relational database foundations.
Separation of public and internal application responsibilities.
Long-term thinking about business software and integration.
These capabilities are relevant to contracting companies, professional services firms, and other small and medium-sized businesses seeking a more maintainable digital presence.
⸻
What App Corp Delivered
The primary engagement centered on the public-facing website and its CMS foundation.
Delivered
Public-facing website development.
Next.js application implementation.
TypeScript-based development.
Payload CMS integration.
Website content management foundation.
A modern application architecture intended to support future enhancements.
Broader architectural direction
Separation of the public website and internal ERP responsibilities.
Separate CMS and ERP PostgreSQL layers envisaged in the wider architecture.
A future integration path between business applications.
A longer-term roadmap for operational workflows and AI-powered agents.
The broader architectural direction should not be confused with completed deliverables. The ERP implementation and AI automation roadmap are separate from the public website scope described in this case study.
⸻
The App Corp Approach
At App Corp, we approach software development as a business engineering discipline.
We do not believe every business needs a large, complicated technology stack.
We believe each application should solve its immediate problem while making sensible allowances for what comes next.
For a public-facing business website, that means establishing a maintainable frontend, choosing a suitable content management system, and making deliberate decisions about how the application will evolve.
For a business planning a larger digital transformation, it also means recognizing where the website’s responsibilities end and where internal operational systems should begin.
Red Ocean Contracting was an opportunity to apply that approach to a real contracting-business website and establish a foundation for future development.
⸻
Final Summary
Red Ocean Contracting’s website modernization was about creating a more maintainable public-facing digital foundation.
App Corp built the website using Next.js and TypeScript, integrated Payload CMS for structured content management, and aligned the solution with a broader architectural direction that separates public-facing web content from planned internal business systems.
The project demonstrates a practical approach to modern website engineering: solve the immediate business need, establish a maintainable foundation, and preserve room for future capabilities without overcomplicating the initial delivery.
For businesses looking to modernize their websites and establish a stronger foundation for future software development, this is the approach App Corp brings to the table.
Built by App Corp — Modern websites, business software, and AI-powered solutions.
Like this project
Posted Oct 24, 2026
Developed a modern website for Red Ocean Contracting using Next.js and Payload CMS. Migrating them away from the Wordpress php2shell vulnerabilities.
Likes
0
Views
0
Timeline
Sep 23, 2026 - Oct 29, 2026
Clients
Redocean
