InfraCorridors Bandwidth Marketplace

Enterprise Full-Stack Ecosystem for Global Infrastructure Management

Overview

I architected and built this high-performance frontend portal to serve as the primary interface for a global AI infrastructure marketplace. The application enables enterprise users to navigate complex global connectivity routes—ranging from city-to-city terrestrial networks to international subsea cable systems—while researching verified vendors and procuring infrastructure through a streamlined bidding process. Technically, the project was a deep dive into the Next.js 15/16 App Router ecosystem, balancing the need for SEO-heavy static content with highly interactive marketplace features. I designed a hybrid data architecture where core domain data is consumed via a secured external microservice API using optimized server-side orchestration, while project-specific engagement data like RFPs are persisted in a local MongoDB instance. This ensured that high-value lead generation data remained isolated, performant, and secure.

Problem

The global market for AI and telecommunications infrastructure is highly fragmented, lacking transparency in pricing and availability, which makes it difficult for companies to control infrastructure spending. Core challenges included: • Complex Relational Mapping: Synthesizing deep relationships between geographical corridors, multi-layered vendor categories (Classifications), and dynamic subsea cable systems without a unified relational database at the client-side level. • Performance at Scale: Managing heavy initial page loads that required fetching dozens of vendors, hierarchical categories, and related technical blogs simultaneously while maintaining a sub-500ms Time-to-First-Byte (TTFB). • Programmatic SEO: Ensuring that thousands of dynamically generated corridor and blog pages were crawl-ready and highly optimized for search engines to drive organic B2B leads.

Constraints

  • •Multi-Source Data Integration: The system had to integrate with a pre-existing external API for core domain objects while maintaining local state parity for lead management and authentication.
  • •Anti-Spam Security: As a public-facing platform for high-value B2B procurement, the system required strict bot protection (reCAPTCHA v3) on all submission endpoints without degrading the user experience for legitimate clients.

Solution

I implemented a robust solution using Next.js and React 19, leveraging React Server Components (RSC) to perform parallelized data fetching (Promise.all) on the server. This approach eliminated client-side waterfalls and delivered fully rendered HTML for optimal SEO. For client-side interactivity, I integrated TanStack Query for cached data fetching and React Hook Form with Zod for typed, schema-based validation. Styling was managed through a custom-built design system using Tailwind CSS and Radix UI, ensuring a premium, industrial aesthetic that prioritizes technical data visualization.

Architecture

•frontend:Next.js (App Router), React 19, TypeScript

•backend:Next.js API Routes (Serverless handlers for RFP and Auth logic)

•database:MongoDB (via Mongoose) for local persistence and lead management

•infrastructure:Vercel for the frontend, MongoDB Atlas for the database

•libraries:

  • TanStack Query
  • Radix UI
  • Better Auth
  • reCAPTCHA
  • Tiptap
  • Zod

Trade-offs

Hybrid Data Fetching over Unified API: I chose to maintain a local MongoDB for RFPs rather than integrating them into the core legacy backend to accelerate deployment speed and maintain data isolation for marketing leads. RSC over Client-Side State: I prioritized Server Components for the majority of the UI to maximize SEO and performance, accepting slightly more complex prop-drilling over the simplicity of a monolithic client-side state (Redux). Headless UI over Component Libraries: I used Radix UI (headless) with Tailwind instead of a pre-styled library to ensure absolute control over the high-end, documentation-centric aesthetic required for a senior B2B audience.

Learnings

Parallel Data Orchestration: Mastered the use of Promise.all in Server Components to resolve multiple heterogeneous API dependencies (Vendors, Blogs, Corridors) in a single request cycle, significantly reducing latency. Serverless Database Management: Gained deep experience in managing Mongoose connections within a serverless environment, specifically addressing connection pooling and model recompilation issues during hot-reloads. Rich Content Rendering: Integrated Tiptap for processing complex JSON-based rich text, learning to sanitize and render dynamic technical documentation safely using isomorphic-dompurify.

Future Roadmap

  • •Edge-Side Caching: Implementing Vercel’s Edge Config or a global Redis layer to further reduce latency for frequently accessed global corridors.
  • •Interactive Infrastructure Visualization: Replacing static map images with dynamic, SEO-friendly Leaflet/MapLibre implementations to allow users to zoom into specific cable landing stations.
  • •RFP Dashboard: Building a protected admin environment using the existing MongoDB data to visualize lead conversion rates and infrastructure search trends.

Summary of Work

  • Codebase Analysis

    Explored the infracorridors project, identifying it as a high-end B2B platform for AI infrastructure and global connectivity.

  • Tech Stack Identification

    Mapped dependencies including Next.js 15, React 19, MongoDB/Mongoose, TanStack Query, and Radix UI.

  • Architecture Extraction

    Identified a hybrid architecture using Server Components for SEO and a local Next.js/Mongo backend for RFP handling.

  • Content Generation

    Drafted a professional, senior-level project description following the requested structure, highlighting the technical challenges of relational data mapping and programmatic SEO.

Kashish Gadhiya — Full-Stack Developer & AI Enthusiast