Sahaj Software modernized Talon’s Media Owner Portal from legacy Angular 17 to a contemporary React architecture. This initiative went beyond a simple rewrite, piloting “intelligent Engineering”, an AI-augmented, Gen-AI-powered workflow. This approach effectively managed evolving UX needs and technical debt, ensuring predictable delivery and establishing a scalable modernization blueprint, which positions Talon as a digital innovation leader in the OOH space.
The Background
Talon is a specialist Out-of-Home (OOH) agency with over 30% UK market share and operations in the UK, USA, Canada, Europe, UAE, and Asia Pacific regions. OOH is a collective term for advertisements found on public billboards, wallscapes, and posters seen while “on the go”. Traditionally, OOH agencies have been managing and running campaigns manually. Even for Talon, handling campaign planning to media buying, pricing, placement, and tracking was not an automated process. In addition, lack of industry standards created information silos making measurement and accountability complicated.
Talon partnered with Sahaj Software for their expertise in the OOH and ad industry to build a robust campaign management tool, “Plato,” which surpasses off-the-shelf tools by adapting to various regions and integrating with the end-to-end ecosystem of the Talon group. Plato is now widely used as the de facto tool to research media inventory and plan campaigns that cater to the specific needs of customers in the UK, North America, and other international markets.
The Media Owner Portal is central to Talon’s UK operations. It is a specialized trading platform within the wider Plato ecosystem, whose primary function is to facilitate the trading of OOH frames between Talon and media owners. The portal serves as the operational backbone for these transactions, managing a critical three-step workflow:
Availability: Verification of OOH media that are available for specific campaign dates.
Pricing and Negotiation: Handling the pricing structures for the selected inventory.
Booking: The reservation and booking of media.
The Business Challenge
Talon decided to migrate their ecosystem from Angular to React to reduce complexity, improve platform performance and speed up development. They also wanted to explore the potential of AI and AI coding tools to understand the benefits, challenges, and impact on their software’s development velocity.
An AI-Centric Approach
Sahaj’s intelligent Engineering is an Agentic AI-driven approach that transforms the entire Software Development Lifecycle (SDLC), from analysis and planning to development and testing, to unlock unprecedented efficiencies, improve collaboration, and deliver better products faster.
To migrate the Media Owner Portal, the Sahaj team moved beyond the traditional agile development cycles by applying this intelligent Engineering solution. They did not simply translate the syntax; instead, they used AI-driven analysis to extract and rebuild the core business logic, ensuring the new system behaved exactly like the legacy platform.
Rather than treating the legacy Angular codebase as something to simply “rewrite,” they treated it as the semantic source of truth. Their methodology focused on the extraction of business logic and decoupling it from the Angular framework.
The intelligent Engineering Solution was based on three key pillars:
Logic Decoupling: Systematically separating business rules from the UI and isolating them into components and hooks.
Reactive Transformation: Modernizing the state architecture by mapping legacy RxJS observables to optimized React patterns (Context API and TanStack Query).
Behavioral Locking: Treating migration as an equation, enforcing strict input/output parity to ensure the new code behaved identically to the legacy system.
AI-Powered Workflow: The core driver of this migration was the Cursor GenAI Tool. The team utilized varying underlying models (Claude Sonnet 3.4/3.5 for logic and GPT-4o for planning) to analyse analyze complex Angular templates and transform them into clean, functional React components. This technical execution was orchestrated through a hybrid management layer, using ClickUp for agile sprint planning alongside Jira for enterprise-level tracking.
Tech Stack
The core technologies used in this solution were:
Frontend: Next.js, React, TypeScript, Tailwind CSS
Testing: Vitest (Unit Testing), Cypress (End-to-End Testing)
AI Tool Stack: Cursor GenAI Tool with different models
Project Management: ClickUp and Jira
The Gen AI Blueprint
To deliver the migration with speed and precision, Sahaj implemented a structured, AI-native workflow divided into four distinct phases. This Gen AI-powered approach automated repetitive tasks while keeping human engineers focused on architecture and quality.
Phase 1 – Intelligent Planning and Story Grooming: The process began in ClickUp, where the team managed the project epics and backlog. Rather than writing requirements manually, they utilized ClickUp’s AI features to accelerate story grooming. With this high-level business context, the AI generated detailed user stories, complete with acceptance criteria and test cases. The team then used GPT models to ideate implementation strategies for these stories, creating a solid technical roadmap before writing any code. The well-detailed stories would serve as a backbone for the next steps.
Phase 2 – AI-Driven Implementation (TDD and Visuals): Coding was done in a two-stage AI-assisted cycle, strictly adhering to Talon’s existing Design System:
Stage 1 -Logic-First and TDD (The “Interactive” Mode): The project team established that the migration had to be functionality-driven, not just cosmetic, because ensuring the system’s core behaviors matched the legacy platform was critical to maintaining business continuity. They utilized Claude Sonnet 3.5 via Cursor’s Chat Interface to handle complex business rules before worrying about pixels.
The Protocol: Developers highlighted specific blocks of legacy Angular TypeScript (.ts) files.
The Execution: The team prompted the AI to analyze data transformations and API calls strictly. Adopting a Test-Driven Development (TDD) approach, they followed a rigorous loop:
Analyze: Explain the legacy logic via the user story.
Test (Red): Generate a Vitest unit test capturing the expected outcome.
Implement (Green): Write the React Hook or pure function to pass that test.
Outcome: This ensured critical backend-for-frontend logic was validated by tests before any UI components were built, preventing “pretty but broken” prototypes.
Stage 2 – Visual-First Refinement (The “Visual” Mode): After the core logic was complete, the team focused on the presentation layer. Since describing UI layouts with text prompts was slow, they utilized Cursor’s Vision capabilities.
The Protocol: Instead of feeding the AI verbose Angular templates, developers took screenshots of the running legacy application.
The Execution: These images were fed into the AI with a prompt to replicate this UI using Tailwind CSS and React, integrating the logic hooks created in Stage 1.
Outcome: The AI saw the spacing, alignment, and hierarchy instantly. It generated foundational Tailwind utility classes for the skeleton structure (grid layouts, padding, breakpoints) much faster than parsing the legacy HTML.
Phase 3 – Human-in-the-Loop Quality Assurance: While AI accelerated generation, human oversight ensured integrity. The Sahaj team maintained a strict “Human-in-the-Loop” policy where developers manually verified the generated code. Finally, the Peer Review process was augmented by Cursor, which assisted reviewers in analyzing Merge Requests (MRs) to catch potential optimizations or errors that might be missed by the human eye.
Phase 4 – End-to-End Tests: To mitigate the risk of breaking existing features during incremental changes, the team implemented automated End-to-End Tests using the Cypress framework. This step was crucial for ensuring quality delivery and validating that the incremental migration was progressing as intended.
Key Learnings
The pilot definitively validated the initial hypothesis that AI-augmented workflows would drastically outperform traditional manual rewriting. By benchmarking the project actuals against the standard manual estimation, the team confirmed that the AI-assisted approach successfully decoupled delivery speed from linear human effort.
40% Velocity Gain: Extensive adoption of the Gen AI tool accelerated delivery timelines by 40% compared to traditional migration estimates.
Accelerated Onboarding: Cursor effectively functioned as an “always-on” senior developer or when needed, junior developer. It reduced knowledge transfer overhead by instantly explaining complex legacy architectural patterns to new team members.
Hybrid Workflow is Key: A multi-modal approach proved essential. Usage of “Visual Mode” (screenshots) was superior for UI scaffolding, while “Interactive Mode” (chat) excelled at complex logic and Test-Driven Development.
Visual Precision Gaps: While AI accelerated UI scaffolding, it struggled with the strict nuances of the internal Design System. Roughly 30-40% of the CSS required manual developer intervention to ensure that the UI was polished to a pixel-perfect standard.
Today modern tooling, such as MCP and context-aware frameworks like Context7 can significantly reduce these issues. These capabilities were not available at the time of the implementation.
Code Compilation Integrity: The AI generated hallucinated imports or syntax errors. A strict “Human-in-the-Loop” review was essential, as approximately 30% of the generated code needed manual fixes to pass our rigorous TypeScript compilation checks.
Engineering teams must maintain rigorous validation and strict review practices, no matter how advanced the tooling becomes. In short: don’t get complacent.
Testing Gaps and Mocking Complexities: While the AI rapidly generated test suites, the quality varied. It frequently produced redundant tests (validating trivial logic) while struggling to generate accurate mock data for complex state scenarios. This required the Sahaj team to intervene and manually rewrite test logic to ensure meaningful coverage and reliability.
Conclusion
The successful migration of the Media Owner Portal validated Sahaj’s GenAI-augmented engineering approach. By strategically pairing human expertise with GenAI capability, the team not only delivered a modern, high-performance React application but also proved that AI-driven workflows can significantly accelerate delivery without compromising architectural integrity.
This project transformed a standard technical migration into a strategic blueprint. The 40% velocity gain and the established “Human-in-the-Loop” safeguards provide Talon with a scalable framework to modernize the wider Plato ecosystem with confidence. Sahaj demonstrated that AI accelerates the work while humans ensure quality, a partnership that delivers real results. The importance of more rigorous validation is a key lesson when introducing tools that increase throughput. A principle that can be summarized as, ‘With great power comes greater responsibility.'”
