diff --git a/app/services/[slug]/ExpertisePageClient.tsx b/app/services/[slug]/ExpertisePageClient.tsx index ac49c46..6d59204 100644 --- a/app/services/[slug]/ExpertisePageClient.tsx +++ b/app/services/[slug]/ExpertisePageClient.tsx @@ -6,6 +6,14 @@ import { Icons } from "@/lib/expertise-data"; import dynamic from "next/dynamic"; import { LazyMotion, domAnimation, m } from "framer-motion"; +// Dynamic import slug-specific sections — each slug's chunk only downloads for that page +const WhySection = dynamic(() => import("./slug-sections/WhySection")); +const DecisionFramework = dynamic(() => import("./slug-sections/DecisionFramework")); +const TechDecisionTable = dynamic(() => import("./slug-sections/TechDecisionTable")); +const FrameworkComparison = dynamic(() => import("./slug-sections/FrameworkComparison")); +const CustomStackTable = dynamic(() => import("./slug-sections/CustomStackTable")); +const DotnetSections = dynamic(() => import("./slug-sections/DotnetSections")); + // Dynamic import below-fold sections — defers JS hydration for faster LCP const CapabilitiesGrid = dynamic(() => import("@/components/expertise/CapabilitiesGrid").then(mod => ({ default: mod.CapabilitiesGrid }))); const WhyProcedure = dynamic(() => import("@/components/expertise/WhyProcedure").then(mod => ({ default: mod.WhyProcedure }))); @@ -377,1320 +385,54 @@ export default function ExpertisePageClient({ /> )} - {/* Prometheus: Why Engineering Teams Choose Prometheus */} - {expertise.slug === "prometheus-monitoring" && ( -
-
- -

- Why Engineering Teams Choose Prometheus -

-
- -
- {[ - { - icon: ( - - - - ), - title: "Monitoring costs spiral fast", - description: "Per-host and per-metric pricing from commercial tools breaks as your container count grows. Prometheus is open-source with no per-metric fees. You pay for infrastructure, not vendor licenses.", - }, - { - icon: ( - - - - ), - title: "Kubernetes made it the default", - description: "82% of container-using organizations run Prometheus (CNCF Survey 2024). If you're on Kubernetes, your engineers already expect it. Service meshes, CI/CD tools, and platforms all expose its metrics natively.", - }, - { - icon: ( - - - - ), - title: "Your data should be yours", - description: "Commercial tools own your dashboards, alert definitions, and metric history. Migrating away after 3 years means rebuilding everything from scratch. Prometheus gives you full data ownership and portability.", - }, - { - icon: ( - - - - ), - title: "Prometheus 3.x changed the game", - description: "First major version in seven years (late 2024). Native Histograms, new UI, OpenTelemetry ingestion, Remote Write 2.0. If you evaluated Prometheus before and passed, it's worth looking again.", - }, - ].map((card, idx) => ( - -
- {card.icon} -
-

{card.title}

-

{card.description}

-
- ))} -
-
-
- )} - - {/* Prometheus: Should You Use Prometheus? Decision Framework */} - {expertise.slug === "prometheus-monitoring" && ( -
-
- -

- Should You Use Prometheus? An Honest Assessment -

-
- -
- {/* Good fit */} - -
-
- - - -
-

Prometheus is a good fit when

-
-
    - {[ - "You're running Kubernetes (it's the native standard)", - "You have 50+ services generating metrics", - "Your monitoring bill is growing faster than your infrastructure", - "You need metric retention beyond what commercial tools offer affordably", - "Your team values data ownership and vendor independence", - "You're already using or planning CNCF tools (Envoy, Istio, Flagger)", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
- - {/* Consider alternatives */} - -
-
- - - -
-

You might want to stick with your current tool when

-
-
    - {[ - "Your team is under 10 engineers and nobody has monitoring experience", - "You need APM (distributed tracing, code-level profiling) - Prometheus handles metrics, not traces", - "You want a fully managed experience with zero operational overhead", - "Your monitoring spend is modest enough that migration effort won't pay back quickly", - "You need logs in the same tool (consider adding Grafana Loki alongside Prometheus, or stay with your current stack)", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
-
- - {/* Hybrid approach */} - -

The hybrid approach (what most teams actually do)

-

- Use Prometheus for infrastructure and Kubernetes metrics where volume is highest. Keep a commercial tool for APM/tracing if needed. Use Grafana as the unified dashboard layer across both. -

-
-
-
- )} - - {/* Istio: Why Engineering Teams Adopt Istio Service Mesh */} - {expertise.slug === "istio-consulting" && ( -
-
- -

- Why Engineering Teams Adopt Istio Service Mesh -

-
- -
- {[ - { - icon: ( - - - - ), - title: "Service-to-service traffic gets messy", - description: "Once you're past 20-30 microservices, managing traffic routing, retries, timeouts, and circuit breaking in application code becomes a maintenance nightmare. Istio moves all of that to the infrastructure layer.", - }, - { - icon: ( - - - - ), - title: "Zero-trust security, no code changes", - description: "Mutual TLS between every service, workload identity, and fine-grained authorization policies. All enforced at the mesh layer. Your application code stays clean. Compliance teams get the audit trails they need.", - }, - { - icon: ( - - - - ), - title: "Ambient mode changed everything", - description: "Istio's ambient mode (GA since v1.24) removes the sidecar proxy from every pod. Lower resource overhead, no pod restarts on mesh upgrades, simpler operations. Teams that passed on Istio before are reconsidering.", - }, - { - icon: ( - - - - ), - title: "It's the CNCF graduated standard", - description: "Istio graduated from the Cloud Native Computing Foundation in July 2023. Same governance tier as Kubernetes and Prometheus. The ecosystem, tooling, and long-term community support are unmatched by alternatives.", - }, - ].map((card, idx) => ( - -
- {card.icon} -
-

{card.title}

-

{card.description}

-
- ))} -
-
-
+ {/* CNCF tools: Why section (dynamically imported) */} + {["prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) && ( + )} - {/* Istio: Do You Actually Need a Service Mesh? Decision Framework */} - {expertise.slug === "istio-consulting" && ( -
-
- -

- Do You Actually Need a Service Mesh? -

-
- -
- {/* Good fit */} - -
-
- - - -
-

Istio is a good fit when:

-
-
    - {[ - "You're running 30+ microservices on Kubernetes", - "You need mTLS and zero-trust networking for compliance (SOC2, HIPAA, PCI)", - "Traffic management is getting complex - canary releases, traffic splitting, retries", - "You want observability (latency, error rates, traffic flow) without instrumenting every service", - "You're running multi-cluster or multi-cloud Kubernetes", - "Your API gateway is hitting its limits for east-west traffic", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
- - {/* Don't need */} - -
-
- - - -
-

You probably don't need Istio when:

-
-
    - {[ - "You have fewer than 10 services and a small team", - "Your services communicate over a message queue, not HTTP/gRPC", - "You only need ingress traffic management (a simple gateway or ingress controller is enough)", - "Your team has no Kubernetes experience yet - get Kubernetes stable first, then add the mesh", - "You need a service mesh but want the simplest option - consider Linkerd for lighter-weight mesh", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
-
- - {/* The incremental approach */} - -

The incremental approach (what most teams should do)

-

- Start with ambient mode for L4 mTLS and identity. No sidecars, minimal overhead. Add L7 waypoint proxies only for namespaces that need traffic management or rich authorization. You don't have to mesh everything on day one. -

-
-
-
+ {/* CNCF tools: Decision Framework (dynamically imported) */} + {["prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) && ( + )} - {/* Thanos: Why Engineering Teams Deploy Thanos */} - {expertise.slug === "thanos-long-term-storage" && ( -
-
- -

- Why Engineering Teams Deploy Thanos -

-
+ {/* Dotnet: Specialized .NET Services + Industries (dynamically imported) */} + {expertise.slug === "dotnet" && } + {expertise.slug === "dotnet" && } -
- {[ - { - icon: ( - - - - ), - title: "Prometheus wasn't built for months of data", - description: "Prometheus stores metrics locally with a default 15-day retention. Need six months of data for capacity planning or compliance? You're either burning disk or losing history. Thanos offloads metrics to cheap object storage like S3 or GCS.", - }, - { - icon: ( - - - - ), - title: "Multi-cluster visibility is a real problem", - description: "Ten Kubernetes clusters means ten separate Prometheus instances with no shared view. Thanos Query federates them into one PromQL endpoint, so your team gets a single pane of glass without building custom glue code or scripts.", - }, - { - icon: ( - - - - ), - title: "Prometheus downtime means monitoring gaps", - description: "A single Prometheus server is a single point of failure. When it restarts or crashes, you lose in-flight metrics. Thanos Sidecar plus replica deduplication gives you high availability without re-architecting your entire stack.", - }, - { - icon: ( - - - - ), - title: "Object storage is 10-50x cheaper than SSDs", - description: "Storing terabytes of metrics on local SSDs is expensive and doesn't scale. Thanos uses S3, GCS, or Azure Blob as a storage backend - with automatic downsampling to keep long-range queries fast while reducing storage cost significantly.", - }, - ].map((card, idx) => ( - -
- {card.icon} -
-

{card.title}

-

{card.description}

-
- ))} -
-
-
+ {/* Tech slugs: Decision tables (dynamically imported) */} + {["nodejs", "react", "python", "angular", "flutter", "react-native"].includes(expertise.slug) && ( + )} - {/* Thanos: Should You Use Thanos? Decision Framework */} - {expertise.slug === "thanos-long-term-storage" && ( -
-
- -

- Should You Use Thanos? An Honest Assessment -

-
- -
- {/* Good fit */} - -
-
- - - -
-

Thanos is a good fit when

-
-
    - {[ - "You're running multiple Prometheus instances and need a unified query layer", - "You need metric retention beyond 15-30 days (compliance, capacity planning, trend analysis)", - "Your Prometheus storage costs are climbing and you want to offload to object storage", - "You need high availability for monitoring - single Prometheus is a SPOF", - "You're already on Kubernetes and using the Prometheus Operator", - "You want to keep the Prometheus query language (PromQL) across everything", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
- - {/* Consider alternatives */} - -
-
- - - -
-

You might not need Thanos when

-
-
    - {[ - "You have a single small Prometheus instance with modest retention needs", - "Your team is happy with 15-30 days of local retention and doesn't query historical data", - "You're already using Grafana Mimir or Cortex for long-term storage", - "You want a fully managed solution with zero operational overhead - consider Amazon Managed Prometheus or Grafana Cloud", - "Your monitoring stack isn't Prometheus-based (Thanos only works with Prometheus)", - ].map((item, i) => ( -
  • - - - - {item} -
  • - ))} -
-
-
- - {/* Common architecture */} - -

The common architecture (what production teams actually run)

-

- Prometheus with Thanos Sidecar in each cluster, metrics shipped to S3/GCS via Thanos Store Gateway, Compactor handling downsampling and retention, and Thanos Query sitting in front of everything for a unified PromQL endpoint. Grafana dashboards point at Thanos Query instead of individual Prometheus instances. -

-
-
-
+ {/* Tech slugs: Framework comparisons (dynamically imported) */} + {["react", "python", "flutter", "react-native"].includes(expertise.slug) && ( + )} - {/* Dotnet: Specialized .NET Services hub section */} - {expertise.slug === "dotnet" && ( -
-
- -

- Specialized .NET Services -

-

- Deep-dive services for teams with specific .NET challenges. -

-
- -
- {[ - { - title: ".NET Modernization & Migration", - description: "Migrate from .NET Framework 4.x to .NET 8 without production downtime. Incremental strategies, containerization, and strangler fig patterns to reduce risk.", - href: "/technologies/dotnet/modernization", - label: "Learn about .NET modernization", - }, - { - title: ".NET Staff Augmentation", - description: "Senior .NET engineers who integrate with your team, your repos, your processes, your standups. Scale capacity without compromising quality.", - href: "/technologies/dotnet/staff-augmentation", - label: "Learn about .NET staff augmentation", - }, - ].map((service, i) => ( - -

- {service.title} -

-

{service.description}

- - {service.label} - - - - -
- ))} -
-
-
+ {/* For dotnet: Philosophy section comes early, before TechStack */} + {expertise.slug === "dotnet" && pageData.philosophy && ( + )} - {/* Dotnet: Industries We Build .NET Systems For */} - {expertise.slug === "dotnet" && ( -
-
- -

- Industries We Build .NET Systems For -

-

- Domain expertise that accelerates delivery and reduces risk. -

-
- -
- {[ - { - title: "Financial Services", - description: "Payment processing, trading platforms, regulatory reporting, and compliance-heavy systems built on .NET with enterprise-grade security.", - href: "/industries/financial-services", - }, - { - title: "Healthcare", - description: "HIPAA-compliant patient portals, claims processing, clinical workflows, and diagnostic systems on .NET and Azure.", - href: "/industries/healthcare", - }, - { - title: "SaaS & Technology", - description: "Multi-tenant platforms, subscription billing, and customer-facing applications that scale with your user base.", - href: "/industries/saas", - }, - { - title: "Education", - description: "Learning management systems, adaptive education platforms, and content delivery systems built for scale.", - href: "/industries/education", - }, - ].map((industry, i) => ( - -

- {industry.title} -

-

{industry.description}

-
- ))} -
-
-
+ {pageData.process && ( +
+ +
)} - {/* Node.js: Decision table - Is Node.js Right for Your Backend? */} - {expertise.slug === "nodejs" && ( -
-
- -

- Is Node.js Right for Your Backend? -

-

The right tool for the job, not the trendy one.

-
- -
- {[ - { need: "REST APIs and GraphQL services", fit: "Non-blocking I/O handles thousands of concurrent API calls without choking under load" }, - { need: "Real-time applications (chat, notifications, live dashboards)", fit: "Event-driven architecture and native WebSocket support built for persistent connections" }, - { need: "Microservices architecture", fit: "Lightweight runtime with fast cold starts and a small memory footprint per service" }, - { need: "Full-stack JavaScript teams", fit: "Same language across frontend and backend. Shared types with TypeScript. Fewer context switches, faster cycles." }, - ].map((row, i) => ( - -

{row.need}

-

{row.fit}

-
- ))} -
- - -

- Not always the right call for CPU-intensive processing like video encoding or ML model training, or for teams deeply invested in Python or Java with no JavaScript experience. We'll tell you upfront if something else fits better. -

-
- - Book a free architecture call - - - - -

- We've recommended Python and Go over Node.js when the workload demanded it. -

-
-
-
-
- )} - - {/* React: Decision table - Is React Right for Your Project? */} - {expertise.slug === "react" && ( -
-
- -

- Is React Right for Your Project? -

-

The most popular frontend library isn't always the right one.

-
- -
- {[ - { need: "Dynamic, interaction-heavy UIs (dashboards, editors, tools)", fit: "React's component model and virtual DOM are built for UIs that change constantly. State management is mature, and the ecosystem has a solution for almost any interaction pattern you need." }, - { need: "You need web and mobile from one team", fit: "React + React Native lets you share business logic, types, and sometimes entire components across web, iOS, and Android. No other ecosystem offers this level of code sharing." }, - { need: "Your team knows JavaScript/TypeScript", fit: "React has the largest talent pool in frontend. 44.7% of developers use it (Stack Overflow 2025). Hiring is easier, onboarding is faster, and the community support is unmatched." }, - { need: "SPAs where SEO isn't the primary concern", fit: "Internal tools, authenticated dashboards, B2B platforms where users log in first. React with Vite gives you fast builds and a simple mental model without SSR complexity." }, - ].map((row, i) => ( - -

{row.need}

-

{row.fit}

-
- ))} -
- - -

- If SEO and page speed are your top priority, Next.js gives you server-side rendering, static generation, and edge functions built on React. For structured enterprise apps with strict conventions, Angular provides routing, forms, and dependency injection out of the box. Need a lightweight backend to pair with React? Node.js or Python depending on your workload. Not sure? That's what our architecture consultation is for. -

-
-
-
- )} - - {/* Python: Decision table - Is Python Right for Your Backend? */} - {expertise.slug === "python" && ( -
-
- -

- Is Python Right for Your Backend? -

-

The right tool for the job. Not the trendy one.

-
- -
- {[ - { need: "AI/ML features are core to your product", fit: "Python owns the AI ecosystem. PyTorch, TensorFlow, scikit-learn, LangChain - the models, libraries, and talent pool all live here. No other language comes close for ML." }, - { need: "Data-heavy applications (analytics, ETL, reporting)", fit: "Pandas, NumPy, and Airflow make data manipulation fast. Python handles everything from quick scripts to petabyte-scale processing pipelines." }, - { need: "APIs serving high concurrency (with FastAPI)", fit: "FastAPI handles 20,000+ requests/second on Uvicorn. Native async, automatic OpenAPI docs, Pydantic validation. Built for the workloads Django wasn't designed for." }, - { need: "Full-stack web apps with complex business logic", fit: "Django gives you ORM, auth, admin panel, and security middleware out of the box. Instagram, Spotify, and Dropbox run on it. Proven at scale." }, - ].map((row, i) => ( - -

{row.need}

-

{row.fit}

-
- ))} -
- - -

- Need raw API throughput without the Python ecosystem? Node.js with NestJS or Fastify handles I/O-bound workloads with a lighter runtime. Building a frontend-heavy application where the backend is thin? Next.js API routes might be all you need. CPU-intensive work like video encoding or real-time game servers? Go or Rust will outperform Python. Not sure? That's what our architecture consultation is for. -

-
-
-
- )} - - {/* Angular: Decision table - Is Angular Right for Your Project? */} - {expertise.slug === "angular" && ( -
-
- -

- Is Angular Right for Your Project? -

-

The right framework for the job. Not the trending one.

-
- -
- {[ - { situation: "Complex enterprise apps with large teams (10+ devs)", fit: "Angular's opinionated architecture, dependency injection, and CLI enforce consistency. Everyone follows the same patterns. Less time debating, more time building." }, - { situation: "Long-lived applications (5+ year lifespan)", fit: "Google maintains Angular with 18-month LTS cycles and predictable 6-month releases. TypeScript catches errors at compile time. Codebases stay maintainable at scale." }, - { situation: "Data-heavy dashboards and admin panels", fit: "Built-in forms, validation, HTTP client, and RxJS for real-time data streams. No need to stitch together 8 different libraries." }, - { situation: "Applications requiring strict security and compliance", fit: "Angular's built-in XSS protection, CSP support, and structured architecture make security audits straightforward. Banks and government agencies choose Angular for a reason." }, - ].map((row, i) => ( - -

{row.situation}

-

{row.fit}

-
- ))} -
- - -

- Building a content-heavy marketing site? Next.js is likely a better fit. Need a lightweight, flexible UI for a smaller team? React with Vite gives you more freedom with less structure. Internal tool with simple CRUD? React or even a low-code solution might be faster. Not sure? That's what our architecture consultation is for - we've recommended against Angular when it wasn't the right call. -

-
-
-
- )} - - {/* Flutter: Decision table - When Flutter Makes Sense */} - {expertise.slug === "flutter" && ( -
-
- -

- When Flutter Makes Sense -

-

The right framework for the job, not the trendy one.

-
- -
- {[ - { need: "Cross-platform mobile apps (iOS + Android)", fit: "Flutter's Impeller rendering engine compiles to native ARM code. No JavaScript bridge, no WebView. Your app renders at 60fps with pixel-perfect consistency across platforms." }, - { need: "Multi-platform apps (mobile + web + desktop)", fit: "One codebase targeting six platforms. Flutter renders everything itself rather than delegating to platform UI components, so your app looks identical everywhere." }, - { need: "Custom UI and animation-heavy experiences", fit: "Flutter's own rendering engine (Impeller, built on Vulkan/Metal) means you're not limited by platform UI components. If you can design it, Flutter can render it at 60fps." }, - { need: "MVP validation on both platforms fast", fit: "Hot Reload lets developers see changes instantly without restarting the app. Validate on iOS and Android in 8-12 weeks, not 16-24 with two native teams." }, - ].map((row, i) => ( - -

{row.need}

-

{row.fit}

-
- ))} -
- - -

- Flutter isn't the right call for every project. Apps that need deep platform-native UI (following iOS HIG or Material Design exactly), or teams with existing React/JavaScript expertise where React Native would reuse skills better. We'll tell you upfront if something else fits. -

- -
-
-
- )} - - {/* React: React vs Next.js comparison */} - {expertise.slug === "react" && ( -
-
- -

- React vs Next.js: When You Need What -

-

We build with both. Here's how we decide.

-
- -
- {[ - { - name: "React (Vite + React Router)", - bestFor: "Internal tools, dashboards, authenticated apps, SPAs", - why: "Simpler mental model, faster development for apps behind a login. No server-side complexity. Vite builds in seconds, hot module replacement is instant.", - useWhen: "Your app doesn't need SEO, users always log in first, and you want a clean client-side architecture without SSR overhead.", - }, - { - name: "Next.js (React + Framework)", - bestFor: "Marketing sites, e-commerce, SEO-critical apps, full-stack", - why: "Server Components, static generation, API routes, edge functions. SEO is handled. Performance is handled. The framework makes decisions so your team doesn't have to.", - useWhen: "Search traffic matters, you need a public-facing site, or you want one framework handling both frontend and backend.", - }, - ].map((fw, i) => ( - -

{fw.name}

-
-

Best for

-

{fw.bestFor}

-
-
-

Why

-

{fw.why}

-
-
-

We use it when

-

{fw.useWhen}

-
-
- ))} -
- - -

- Many projects use both. A public marketing site on Next.js, an authenticated dashboard on React + Vite, sharing the same component library and design system. We architect for this pattern regularly. -

-
-
-
- )} - - {/* Python: Framework comparison - Django vs FastAPI vs Flask */} - {expertise.slug === "python" && ( -
-
- -

- Django vs FastAPI vs Flask: Which One? -

-

We use all three. Here's how we decide.

-
- -
- {[ - { - name: "Django", - bestFor: "Full-stack web apps, admin-heavy platforms, SaaS", - why: "ORM, auth, admin panel, security middleware built in. Batteries-included means faster development for complex apps. 20 years of battle-tested stability.", - useWhen: "Your app needs user management, complex data models, and an admin interface. Most enterprise Python projects start here.", - }, - { - name: "FastAPI", - bestFor: "High-performance APIs, AI/ML serving, microservices", - why: "Native async, automatic OpenAPI docs, Pydantic validation, 4-5x faster than Django for API workloads. The default choice for AI backends in 2026.", - useWhen: "You're building APIs that serve ML models, need high concurrency, or want auto-generated documentation.", - }, - { - name: "Flask", - bestFor: "Lightweight services, serverless functions, prototypes", - why: "Minimal footprint, fast startup, zero opinions about architecture. Perfect when you need just enough framework to get out of the way.", - useWhen: "The service is small and focused, you're deploying to Lambda/serverless, or you need maximum control over the stack.", - }, - ].map((fw, i) => ( - -

{fw.name}

-
-

Best for

-

{fw.bestFor}

-
-
-

Why

-

{fw.why}

-
-
-

We use it when

-

{fw.useWhen}

-
-
- ))} -
- - -

- Most projects aren't purely one framework. We've built systems where Django handles the main app, FastAPI serves the ML inference endpoints, and Flask runs lightweight webhook handlers. The framework follows the workload. -

-
-
-
- )} - - {/* Flutter: Flutter vs React Native comparison */} - {expertise.slug === "flutter" && ( -
-
- -

- Flutter vs React Native: When You Need What -

-

We build with both. Here's how we decide.

-
- -
- {[ - { - name: "Flutter (Dart)", - bestFor: "Custom UI, animation-heavy apps, multi-platform (mobile + web + desktop)", - why: "Flutter renders every pixel itself via Impeller. Complete design control, 60fps animations, and one codebase targeting six platforms. Ideal when your app needs to look and feel exactly as designed.", - useWhen: "Visual quality and brand consistency matter more than ecosystem breadth. You need web and desktop alongside mobile. Your team is open to learning Dart.", - }, - { - name: "React Native (JavaScript)", - bestFor: "Teams with JavaScript expertise, code sharing with React web apps", - why: "JavaScript developers outnumber Dart developers roughly 20:1. If your team knows React, React Native lets you share business logic, types, and components between web and mobile.", - useWhen: "Hiring speed matters, your web app is already React, or you need the broadest possible talent pool.", - }, - ].map((fw, i) => ( - -

{fw.name}

-
-

Best for

-

{fw.bestFor}

-
-
-

Why

-

{fw.why}

-
-
-

We use it when

-

{fw.useWhen}

-
-
- ))} -
- - -

- Some projects use both. A Flutter mobile app for the consumer experience, a React Native companion for a partner-facing tool sharing the same backend. We architect for this when it makes sense. -

-
-
-
- )} - - {/* React Native: Decision table - When React Native Makes Sense */} - {expertise.slug === "react-native" && ( -
-
- -

- When React Native Makes Sense -

-

The right framework for the job, not the trending one.

-
- -
- {[ - { situation: "Need iOS + Android from one team", fit: "Single codebase, shared logic, consistent UX. Ship both platforms simultaneously instead of maintaining two separate apps and two separate teams." }, - { situation: "Your team already knows React", fit: "React Native uses the same component model, hooks, and state management. Your web developers can contribute to mobile without learning Swift or Kotlin." }, - { situation: "Speed to market matters", fit: "Expo's managed workflow, over-the-air updates, and hot reloading mean faster iteration. MVP in 8-12 weeks, not 6 months." }, - { situation: "Budget-conscious but quality-focused", fit: "Cross-platform cuts 30-40% vs. native iOS + native Android. You're not sacrificing quality - Instagram, Shopify, Discord, and Coinbase all run React Native in production." }, - ].map((row, i) => ( - -

{row.situation}

-

{row.fit}

-
- ))} -
- - -

- If your app is primarily 3D/gaming (Unity or native), needs extreme low-level hardware access (Bluetooth LE edge cases, heavy AR), or your team is already deep in Dart, you may want to explore Flutter or go fully native. For SEO-critical marketing sites, Next.js is the better call. For complex backend needs alongside your mobile app, see our Node.js and Python services. -

-
-
-
- )} - - {/* React Native: React Native vs Flutter comparison */} - {expertise.slug === "react-native" && ( -
-
- -

- React Native vs Flutter: When You Need What -

-

We build with both. Here's how we decide.

-
- -
- {[ - { - name: "React Native (JavaScript/TypeScript)", - bestFor: "Teams with existing JavaScript/React expertise, code sharing with a React web app, brownfield integration into existing native apps", - why: "React Native uses the same component model, hooks, and state management as React. Your web developers can contribute to mobile without learning a new language. JavaScript developers outnumber Dart developers roughly 20:1, making hiring easier.", - useWhen: "React Native 0.83 ships with the New Architecture by default. The old performance criticisms were about the JavaScript bridge, which no longer exists. With Fabric, TurboModules, and Hermes, React Native now achieves near-native performance at 60fps on most devices.", - }, - { - name: "Flutter (Dart)", - bestFor: "Pixel-perfect custom UI that looks identical on both platforms, heavy animation or graphically intensive apps, mobile + web + desktop from one codebase", - why: "Flutter has surpassed React Native in GitHub stars (170K vs 121K) and shows 46% cross-platform market share vs React Native's 35%. But market share doesn't equal 'better' - it depends on your team and project.", - useWhen: "Teams starting fresh with no existing JavaScript investment, apps targeting mobile + web + desktop from one codebase (Flutter's widget engine renders everywhere), or when pixel-perfect custom UI is the top priority.", - }, - ].map((fw, i) => ( - -

{fw.name}

-
-

Best for

-

{fw.bestFor}

-
-
-

Why

-

{fw.why}

-
-
-

Key context

-

{fw.useWhen}

-
-
- ))} -
- - -

- Many companies use both. React Native for business apps where platform-native feel matters, Flutter for consumer apps where custom UI is the priority. We build with both - see our Flutter services. -

-
-
-
- )} - - {/* For dotnet: Philosophy section comes early, before TechStack */} - {expertise.slug === "dotnet" && pageData.philosophy && ( - - )} - - {pageData.process && ( -
- -
- )} - - {pageData.whyProcedure.length > 0 && ( - + {pageData.whyProcedure.length > 0 && ( + )} {expertise.slug === "dotnet" ? ( @@ -1721,566 +463,8 @@ export default function ExpertisePageClient({ { category: "CI/CD & Monitoring", items: ["GitHub Actions", "Vercel Analytics", "Sentry", "DataDog"] }, ]} /> - ) : expertise.slug === "nodejs" ? ( - /* Node.js: Custom 3-column stack table */ -
-
- -

- Our Node.js Stack -

-

Every tool earns its place. Here's what we ship with and why.

-
- - - - - - - - - - - - {[ - { layer: "Runtime", tools: "Node.js 22 LTS", why: "Long-term support, native ESM, meaningful performance gains over older versions" }, - { layer: "Framework", tools: "NestJS, Fastify, Express", why: "NestJS for enterprise patterns, Fastify for raw throughput, Express for ecosystem breadth" }, - { layer: "Language", tools: "TypeScript (strict mode)", why: "Type safety across the full stack. Non-negotiable on our projects." }, - { layer: "ORM / Query", tools: "Prisma, Drizzle ORM", why: "Prisma for type-safe queries and migrations. Drizzle when targeting edge or serverless runtimes." }, - { layer: "Database", tools: "PostgreSQL, MongoDB, Redis", why: "Postgres for relational data, MongoDB for document workloads, Redis for caching and job queues" }, - { layer: "Message Queue", tools: "BullMQ, AWS SQS, RabbitMQ", why: "BullMQ for straightforward background jobs. SQS or RabbitMQ for service-to-service communication." }, - { layer: "API Style", tools: "REST, GraphQL (Apollo), gRPC", why: "REST for public-facing APIs, GraphQL for frontend flexibility, gRPC for low-latency internal calls" }, - { layer: "Auth", tools: "Passport.js, JWT, OAuth2", why: "Strategy-based auth with Passport, stateless tokens via JWT, third-party login with OAuth2" }, - { layer: "Testing", tools: "Jest, Vitest, Supertest", why: "Unit and integration tests alongside every feature. Supertest for API endpoint validation." }, - { layer: "Hosting", tools: "AWS (ECS, Lambda), GCP, Vercel", why: "Containers when you need control, serverless when cost efficiency matters" }, - { layer: "CI/CD", tools: "GitHub Actions, Docker", why: "Automated test runs, container builds, and zero-downtime deployments on every merge" }, - { layer: "Monitoring", tools: "Datadog, Sentry, Prometheus + Grafana", why: "APM for performance bottlenecks, Sentry for error tracking, Grafana for custom dashboards" }, - ].map((row, i) => ( - - - - - - ))} - -
LayerToolsWhy
{row.layer}{row.tools}{row.why}
-
- - -

- We pick the framework based on your constraints. NestJS for enterprise structure, Fastify for raw throughput, Express for ecosystem breadth. There is no single right answer. -

-
-
-
- ) : expertise.slug === "react" ? ( - /* React: Custom 3-column stack table */ -
-
- -

- Our React Stack -

-

Every tool earns its place. Here's what we ship with and why.

-
- - - - - - - - - - - - {[ - { layer: "Framework", tools: "React 19, Next.js 15 (when SSR needed)", why: "React 19 for SPAs and dashboards, Next.js when SEO or server rendering matters" }, - { layer: "Language", tools: "TypeScript (strict mode)", why: "Non-negotiable. Type safety across the full stack catches bugs before users do." }, - { layer: "Build", tools: "Vite, Turbopack", why: "Vite for React SPAs (sub-second HMR), Turbopack for Next.js projects" }, - { layer: "Routing", tools: "React Router 7, Next.js App Router", why: "React Router for SPAs, App Router for server-rendered apps" }, - { layer: "State", tools: "Zustand, Redux Toolkit, React Query", why: "Zustand for simple global state, Redux Toolkit for complex flows, React Query for server state" }, - { layer: "UI Components", tools: "Radix UI, shadcn/ui, Headless UI", why: "Accessible primitives, composable, unstyled by default so your brand isn't fighting a framework" }, - { layer: "Styling", tools: "Tailwind CSS, CSS Modules", why: "Tailwind for rapid development, CSS Modules when you need strict scoping" }, - { layer: "Forms", tools: "React Hook Form, Zod", why: "Performant forms with schema-based validation. No re-renders on every keystroke." }, - { layer: "Testing", tools: "Vitest, Playwright, React Testing Library", why: "Unit tests with Vitest, E2E with Playwright, component tests with RTL" }, - { layer: "Hosting", tools: "Vercel, AWS (CloudFront + S3, ECS), Cloudflare", why: "Vercel for Next.js, CloudFront + S3 for static SPAs, ECS for containerized apps" }, - { layer: "CI/CD", tools: "GitHub Actions, Docker", why: "Automated tests, preview deployments on every PR, production deploys on merge" }, - { layer: "Monitoring", tools: "Sentry, Datadog, Vercel Analytics", why: "Error tracking, performance monitoring, and Core Web Vitals dashboards" }, - ].map((row, i) => ( - - - - - - ))} - -
LayerToolsWhy
{row.layer}{row.tools}{row.why}
-
- - -

- We pick the tooling based on your project. A dashboard doesn't need Next.js and Vercel - React + Vite + CloudFront is faster to build and cheaper to run. A marketing site doesn't need Redux - server state with React Query is enough. The stack follows the problem. -

-
-
-
- ) : expertise.slug === "python" ? ( - /* Python: Custom 3-column stack table */ -
-
- -

- Our Python Stack -

-

Every tool earns its place. Here's what we ship with and why.

-
- - - - - - - - - - - - {[ - { layer: "Language", tools: "Python 3.12+ (strict typing)", why: "Performance improvements, pattern matching, type hints as contracts" }, - { layer: "Web Framework", tools: "Django 5.x, FastAPI, Flask", why: "Django for apps, FastAPI for APIs, Flask for lightweight services" }, - { layer: "ORM / Query", tools: "Django ORM, SQLAlchemy, Prisma", why: "Django ORM for Django apps, SQLAlchemy for FastAPI/Flask, Prisma for type safety" }, - { layer: "Database", tools: "PostgreSQL, MongoDB, Redis", why: "Postgres for relational, MongoDB for documents, Redis for cache and queues" }, - { layer: "AI/ML", tools: "PyTorch, scikit-learn, LangChain, Hugging Face", why: "PyTorch for custom models, scikit-learn for classical ML, LangChain for LLM apps" }, - { layer: "Data", tools: "Pandas, NumPy, Apache Airflow, Celery", why: "Data manipulation, orchestration, and async task processing" }, - { layer: "API", tools: "REST (DRF, FastAPI), GraphQL (Strawberry)", why: "DRF for Django REST APIs, FastAPI for async, Strawberry for type-safe GraphQL" }, - { layer: "Auth", tools: "Django auth, OAuth2, JWT", why: "Built-in auth for Django, token-based for APIs" }, - { layer: "Testing", tools: "pytest, Hypothesis, Locust", why: "pytest for unit/integration, Hypothesis for property-based, Locust for load testing" }, - { layer: "Hosting", tools: "AWS (ECS, Lambda, SageMaker), GCP, Vercel", why: "Containers for control, serverless for cost efficiency, SageMaker for ML deployment" }, - { layer: "CI/CD", tools: "GitHub Actions, Docker", why: "Automated tests, container builds, and deployments on every merge" }, - { layer: "Monitoring", tools: "Datadog, Sentry, Prometheus + Grafana", why: "APM, error tracking, and custom dashboards" }, - ].map((row, i) => ( - - - - - - ))} - -
LayerToolsWhy
{row.layer}{row.tools}{row.why}
-
- - -

- We pick the framework based on your constraints. Django if your team needs structure and a built-in admin. FastAPI if throughput and async matter. Flask if simplicity and a small footprint are the priority. There is no single right answer. -

-
-
-
- ) : expertise.slug === "angular" ? ( - /* Angular: Custom 3-column stack table */ -
-
- -

- Our Angular Stack -

-

Every tool earns its place. Here's what we ship with and why.

-
- - - - - - - - - - - - {[ - { layer: "Framework", tools: "Angular 20+ (Standalone Components)", why: "Signals, zoneless CD, incremental hydration" }, - { layer: "Language", tools: "TypeScript (strict mode)", why: "Type safety across the full stack. Non-negotiable." }, - { layer: "State", tools: "NgRx (SignalStore), Angular Signals", why: "NgRx for complex state, Signals for component-level reactivity" }, - { layer: "UI Components", tools: "Angular Material, PrimeNG, CDK", why: "Material for Google-style UI, PrimeNG for data-heavy components, CDK for custom" }, - { layer: "Styling", tools: "Tailwind CSS, SCSS", why: "Tailwind for utility-first speed, SCSS for component-scoped styles" }, - { layer: "Forms", tools: "Reactive Forms, Signal Forms", why: "Reactive Forms for production, Signal Forms for new projects" }, - { layer: "HTTP & Data", tools: "HttpClient, httpResource, RxJS", why: "Built-in HTTP with interceptors, RxJS for complex async flows" }, - { layer: "Routing", tools: "Angular Router (lazy-loaded)", why: "Code splitting per route, guards for auth" }, - { layer: "Testing", tools: "Vitest, Playwright, Angular Testing Library", why: "Unit with Vitest (Angular 21 default), E2E with Playwright" }, - { layer: "Build", tools: "Angular CLI, esbuild, Vite", why: "esbuild for fast builds, Vite for dev server HMR" }, - { layer: "Monorepo", tools: "Nx", why: "Shared libraries, affected builds, consistent tooling across teams" }, - { layer: "CI/CD", tools: "GitHub Actions, Vercel/AWS", why: "Automated testing and preview deployments on every PR" }, - ].map((row, i) => ( - - - - - - ))} - -
LayerToolsWhy We Chose Them
{row.layer}{row.tools}{row.why}
-
- - -

- We use Angular Material where it fits and swap in PrimeNG when the project needs data tables, tree views, or complex form controls that Material doesn't cover well. No dogma about component libraries - we pick what serves the project. -

-
-
-
- ) : expertise.slug === "react-native" ? ( - /* React Native: Custom 2-column stack table */ -
-
- -

- Our Technology Stack -

-

Every tool earns its place. Here's what we ship with.

-
- - - - - - - - - - - {[ - { layer: "Framework", tools: "React Native 0.83 (New Architecture)" }, - { layer: "Development Platform", tools: "Expo SDK 55 (managed or bare workflow)" }, - { layer: "Language", tools: "TypeScript (strict mode)" }, - { layer: "JS Engine", tools: "Hermes (default), Hermes v1 (opt-in for advanced perf)" }, - { layer: "Navigation", tools: "Expo Router (file-based), React Navigation 7" }, - { layer: "State Management", tools: "Zustand, Redux Toolkit, React Query/TanStack Query" }, - { layer: "UI Components", tools: "React Native Paper, Tamagui, NativeWind (Tailwind for RN)" }, - { layer: "Animations", tools: "Reanimated 4 (UI thread), Moti, Lottie" }, - { layer: "Forms", tools: "React Hook Form + Zod validation" }, - { layer: "Testing", tools: "Jest, Detox (E2E), React Native Testing Library" }, - { layer: "CI/CD", tools: "EAS Build, EAS Submit, Fastlane" }, - { layer: "OTA Updates", tools: "EAS Update (Hermes bytecode diffing for smaller updates)" }, - { layer: "Monitoring", tools: "Sentry, Expo Insights" }, - ].map((row, i) => ( - - - - - ))} - -
LayerWhat We Use
{row.layer}{row.tools}
-
-
-
- ) : expertise.slug === "flutter" ? ( - /* Flutter: Custom 2-column stack table */ -
-
- -

- Our Flutter Stack -

-

Every tool earns its place. Here's what we ship with.

-
- - - - - - - - - - - {[ - { layer: "Framework", tools: "Flutter 3.41" }, - { layer: "Language", tools: "Dart 3.10 (sound null safety, strict typing)" }, - { layer: "Rendering Engine", tools: "Impeller (Vulkan on Android, Metal on iOS)" }, - { layer: "State Management", tools: "BLoC (enterprise), Riverpod (lean projects)" }, - { layer: "UI Framework", tools: "Material 3, Cupertino, custom widget libraries" }, - { layer: "Animation", tools: "Rive, Flutter implicit/explicit animations, Hero transitions" }, - { layer: "Navigation", tools: "GoRouter, Navigator 2.0" }, - { layer: "Backend / BaaS", tools: "Firebase, Supabase, custom REST/GraphQL APIs" }, - { layer: "Local Storage", tools: "Hive, Isar, Drift (SQLite)" }, - { layer: "Testing", tools: "Widget tests, integration tests, golden tests (visual regression)" }, - { layer: "CI/CD", tools: "Codemagic, Fastlane, GitHub Actions" }, - { layer: "Monitoring", tools: "Sentry, Firebase Crashlytics" }, - { layer: "Distribution", tools: "App Store, Play Store, Firebase App Distribution, TestFlight" }, - ].map((row, i) => ( - - - - - ))} - -
LayerWhat We Use
{row.layer}{row.tools}
-
- - -

- We pick state management based on your project complexity. BLoC for enterprise apps with complex business logic and testing requirements. Riverpod for leaner projects where simplicity matters. No dogma, just the right tool. -

-
-
-
- ) : expertise.slug === "prometheus-monitoring" ? ( -
-
- -

- Technologies We Deploy & Support -

-
- - - - - - - - - - - {[ - { category: "Core", tools: "Prometheus 3.x (latest stable), Alertmanager" }, - { category: "Operator", tools: "Prometheus Operator (kube-prometheus-stack)" }, - { category: "Visualization", tools: "Grafana" }, - { category: "Long-term Storage", tools: "Thanos, Cortex, VictoriaMetrics" }, - { category: "Exporters", tools: "Node Exporter, kube-state-metrics, cAdvisor, Blackbox Exporter, custom exporters" }, - { category: "Alerting Integrations", tools: "PagerDuty, OpsGenie, Slack, email, custom webhooks" }, - { category: "Cloud Managed", tools: "Amazon Managed Prometheus, Google Cloud Managed Prometheus, Azure Monitor" }, - { category: "Infrastructure", tools: "Kubernetes, Docker, Terraform, Helm" }, - { category: "Observability Bridge", tools: "OpenTelemetry Collector (OTLP ingestion)" }, - ].map((row, idx) => ( - - - - - ))} - -
CategoryTools
{row.category}{row.tools}
-
-
-
- ) : expertise.slug === "thanos-long-term-storage" ? ( -
-
- -

- Thanos Components We Deploy & Support -

-
- - - - - - - - - - - {[ - { category: "Thanos Sidecar", tools: "Ships metrics from Prometheus to object storage, exposes StoreAPI for real-time queries" }, - { category: "Thanos Receiver", tools: "Alternative to Sidecar - accepts remote write from Prometheus, supports multi-tenancy" }, - { category: "Thanos Store Gateway", tools: "Serves historical metrics from object storage (S3, GCS, Azure Blob, MinIO)" }, - { category: "Thanos Query", tools: "Federates queries across Sidecars, Store Gateways, and other Queriers - single PromQL endpoint" }, - { category: "Thanos Query Frontend", tools: "Caching and query splitting layer in front of Query for faster long-range queries" }, - { category: "Thanos Compactor", tools: "Downsamples historical data (5m, 1h) and compacts blocks to reduce storage cost" }, - { category: "Thanos Ruler", tools: "Evaluates recording and alerting rules against Thanos Query for global alerts" }, - { category: "Object Storage", tools: "S3, GCS, Azure Blob, MinIO - the actual long-term storage backend" }, - { category: "Grafana", tools: "Unified dashboards pointing at Thanos Query for cross-cluster visualization" }, - { category: "Prometheus Operator", tools: "kube-prometheus-stack with Thanos Sidecar integration via Helm" }, - ].map((row, idx) => ( - - - - - ))} - -
ComponentWhat It Does
{row.category}{row.tools}
-
-
-
- ) : expertise.slug === "istio-consulting" ? ( -
-
- -

- Technologies We Deploy & Support -

-
- - - - - - - - - - - {[ - { category: "Core", tools: "Istio 1.29 (latest), 1.28.x (LTS), Envoy Proxy" }, - { category: "Data Plane Modes", tools: "Ambient mode (ztunnel + waypoint), Sidecar mode" }, - { category: "Traffic Management", tools: "VirtualService, DestinationRule, Kubernetes Gateway API" }, - { category: "Security", tools: "mTLS, AuthorizationPolicy, PeerAuthentication, RequestAuthentication" }, - { category: "Observability", tools: "Kiali, Prometheus, Grafana, Jaeger/Zipkin" }, - { category: "Multi-cluster", tools: "Multi-network, multi-primary, external control plane" }, - { category: "Platform", tools: "Kubernetes, EKS, GKE (with Istio add-on), AKS" }, - { category: "Gateway", tools: "Istio Ingress Gateway, Kubernetes Gateway API, integration with existing API gateways" }, - { category: "Extensions", tools: "Wasm plugins, EnvoyFilter, Telemetry API" }, - ].map((row, idx) => ( - - - - - ))} - -
CategoryTools
{row.category}{row.tools}
-
-
-
+ ) : ["nodejs", "react", "python", "angular", "react-native", "flutter", "prometheus-monitoring", "thanos-long-term-storage", "istio-consulting"].includes(expertise.slug) ? ( + ) : ( = { + nodejs: { + type: "three-column", + title: "Our", + highlight: "Node.js", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with and why.", + whyHeader: "Why", + rows: [ + { + layer: "Runtime", + tools: "Node.js 22 LTS", + why: "Long-term support, native ESM, meaningful performance gains over older versions", + }, + { + layer: "Framework", + tools: "NestJS, Fastify, Express", + why: "NestJS for enterprise patterns, Fastify for raw throughput, Express for ecosystem breadth", + }, + { + layer: "Language", + tools: "TypeScript (strict mode)", + why: "Type safety across the full stack. Non-negotiable on our projects.", + }, + { + layer: "ORM / Query", + tools: "Prisma, Drizzle ORM", + why: "Prisma for type-safe queries and migrations. Drizzle when targeting edge or serverless runtimes.", + }, + { + layer: "Database", + tools: "PostgreSQL, MongoDB, Redis", + why: "Postgres for relational data, MongoDB for document workloads, Redis for caching and job queues", + }, + { + layer: "Message Queue", + tools: "BullMQ, AWS SQS, RabbitMQ", + why: "BullMQ for straightforward background jobs. SQS or RabbitMQ for service-to-service communication.", + }, + { + layer: "API Style", + tools: "REST, GraphQL (Apollo), gRPC", + why: "REST for public-facing APIs, GraphQL for frontend flexibility, gRPC for low-latency internal calls", + }, + { + layer: "Auth", + tools: "Passport.js, JWT, OAuth2", + why: "Strategy-based auth with Passport, stateless tokens via JWT, third-party login with OAuth2", + }, + { + layer: "Testing", + tools: "Jest, Vitest, Supertest", + why: "Unit and integration tests alongside every feature. Supertest for API endpoint validation.", + }, + { + layer: "Hosting", + tools: "AWS (ECS, Lambda), GCP, Vercel", + why: "Containers when you need control, serverless when cost efficiency matters", + }, + { + layer: "CI/CD", + tools: "GitHub Actions, Docker", + why: "Automated test runs, container builds, and zero-downtime deployments on every merge", + }, + { + layer: "Monitoring", + tools: "Datadog, Sentry, Prometheus + Grafana", + why: "APM for performance bottlenecks, Sentry for error tracking, Grafana for custom dashboards", + }, + ], + bottomNote: + "We pick the framework based on your constraints. NestJS for enterprise structure, Fastify for raw throughput, Express for ecosystem breadth. There is no single right answer.", + }, + react: { + type: "three-column", + title: "Our", + highlight: "React", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with and why.", + whyHeader: "Why", + rows: [ + { + layer: "Framework", + tools: "React 19, Next.js 15 (when SSR needed)", + why: "React 19 for SPAs and dashboards, Next.js when SEO or server rendering matters", + }, + { + layer: "Language", + tools: "TypeScript (strict mode)", + why: "Non-negotiable. Type safety across the full stack catches bugs before users do.", + }, + { + layer: "Build", + tools: "Vite, Turbopack", + why: "Vite for React SPAs (sub-second HMR), Turbopack for Next.js projects", + }, + { + layer: "Routing", + tools: "React Router 7, Next.js App Router", + why: "React Router for SPAs, App Router for server-rendered apps", + }, + { + layer: "State", + tools: "Zustand, Redux Toolkit, React Query", + why: "Zustand for simple global state, Redux Toolkit for complex flows, React Query for server state", + }, + { + layer: "UI Components", + tools: "Radix UI, shadcn/ui, Headless UI", + why: "Accessible primitives, composable, unstyled by default so your brand isn\u2019t fighting a framework", + }, + { + layer: "Styling", + tools: "Tailwind CSS, CSS Modules", + why: "Tailwind for rapid development, CSS Modules when you need strict scoping", + }, + { + layer: "Forms", + tools: "React Hook Form, Zod", + why: "Performant forms with schema-based validation. No re-renders on every keystroke.", + }, + { + layer: "Testing", + tools: "Vitest, Playwright, React Testing Library", + why: "Unit tests with Vitest, E2E with Playwright, component tests with RTL", + }, + { + layer: "Hosting", + tools: "Vercel, AWS (CloudFront + S3, ECS), Cloudflare", + why: "Vercel for Next.js, CloudFront + S3 for static SPAs, ECS for containerized apps", + }, + { + layer: "CI/CD", + tools: "GitHub Actions, Docker", + why: "Automated tests, preview deployments on every PR, production deploys on merge", + }, + { + layer: "Monitoring", + tools: "Sentry, Datadog, Vercel Analytics", + why: "Error tracking, performance monitoring, and Core Web Vitals dashboards", + }, + ], + bottomNote: + "We pick the tooling based on your project. A dashboard doesn\u2019t need Next.js and Vercel - React + Vite + CloudFront is faster to build and cheaper to run. A marketing site doesn\u2019t need Redux - server state with React Query is enough. The stack follows the problem.", + }, + python: { + type: "three-column", + title: "Our", + highlight: "Python", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with and why.", + whyHeader: "Why", + rows: [ + { + layer: "Language", + tools: "Python 3.12+ (strict typing)", + why: "Performance improvements, pattern matching, type hints as contracts", + }, + { + layer: "Web Framework", + tools: "Django 5.x, FastAPI, Flask", + why: "Django for apps, FastAPI for APIs, Flask for lightweight services", + }, + { + layer: "ORM / Query", + tools: "Django ORM, SQLAlchemy, Prisma", + why: "Django ORM for Django apps, SQLAlchemy for FastAPI/Flask, Prisma for type safety", + }, + { + layer: "Database", + tools: "PostgreSQL, MongoDB, Redis", + why: "Postgres for relational, MongoDB for documents, Redis for cache and queues", + }, + { + layer: "AI/ML", + tools: "PyTorch, scikit-learn, LangChain, Hugging Face", + why: "PyTorch for custom models, scikit-learn for classical ML, LangChain for LLM apps", + }, + { + layer: "Data", + tools: "Pandas, NumPy, Apache Airflow, Celery", + why: "Data manipulation, orchestration, and async task processing", + }, + { + layer: "API", + tools: "REST (DRF, FastAPI), GraphQL (Strawberry)", + why: "DRF for Django REST APIs, FastAPI for async, Strawberry for type-safe GraphQL", + }, + { + layer: "Auth", + tools: "Django auth, OAuth2, JWT", + why: "Built-in auth for Django, token-based for APIs", + }, + { + layer: "Testing", + tools: "pytest, Hypothesis, Locust", + why: "pytest for unit/integration, Hypothesis for property-based, Locust for load testing", + }, + { + layer: "Hosting", + tools: "AWS (ECS, Lambda, SageMaker), GCP, Vercel", + why: "Containers for control, serverless for cost efficiency, SageMaker for ML deployment", + }, + { + layer: "CI/CD", + tools: "GitHub Actions, Docker", + why: "Automated tests, container builds, and deployments on every merge", + }, + { + layer: "Monitoring", + tools: "Datadog, Sentry, Prometheus + Grafana", + why: "APM, error tracking, and custom dashboards", + }, + ], + bottomNote: + "We pick the framework based on your constraints. Django if your team needs structure and a built-in admin. FastAPI if throughput and async matter. Flask if simplicity and a small footprint are the priority. There is no single right answer.", + }, + angular: { + type: "three-column", + title: "Our", + highlight: "Angular", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with and why.", + whyHeader: "Why We Chose Them", + headingExtraClass: "tracking-wide", + rows: [ + { + layer: "Framework", + tools: "Angular 20+ (Standalone Components)", + why: "Signals, zoneless CD, incremental hydration", + }, + { + layer: "Language", + tools: "TypeScript (strict mode)", + why: "Type safety across the full stack. Non-negotiable.", + }, + { + layer: "State", + tools: "NgRx (SignalStore), Angular Signals", + why: "NgRx for complex state, Signals for component-level reactivity", + }, + { + layer: "UI Components", + tools: "Angular Material, PrimeNG, CDK", + why: "Material for Google-style UI, PrimeNG for data-heavy components, CDK for custom", + }, + { + layer: "Styling", + tools: "Tailwind CSS, SCSS", + why: "Tailwind for utility-first speed, SCSS for component-scoped styles", + }, + { + layer: "Forms", + tools: "Reactive Forms, Signal Forms", + why: "Reactive Forms for production, Signal Forms for new projects", + }, + { + layer: "HTTP & Data", + tools: "HttpClient, httpResource, RxJS", + why: "Built-in HTTP with interceptors, RxJS for complex async flows", + }, + { + layer: "Routing", + tools: "Angular Router (lazy-loaded)", + why: "Code splitting per route, guards for auth", + }, + { + layer: "Testing", + tools: "Vitest, Playwright, Angular Testing Library", + why: "Unit with Vitest (Angular 21 default), E2E with Playwright", + }, + { + layer: "Build", + tools: "Angular CLI, esbuild, Vite", + why: "esbuild for fast builds, Vite for dev server HMR", + }, + { + layer: "Monorepo", + tools: "Nx", + why: "Shared libraries, affected builds, consistent tooling across teams", + }, + { + layer: "CI/CD", + tools: "GitHub Actions, Vercel/AWS", + why: "Automated testing and preview deployments on every PR", + }, + ], + bottomNote: + "We use Angular Material where it fits and swap in PrimeNG when the project needs data tables, tree views, or complex form controls that Material doesn\u2019t cover well. No dogma about component libraries - we pick what serves the project.", + }, + "react-native": { + type: "two-column", + title: "Our", + highlight: "Technology", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with.", + rows: [ + { layer: "Framework", tools: "React Native 0.83 (New Architecture)" }, + { + layer: "Development Platform", + tools: "Expo SDK 55 (managed or bare workflow)", + }, + { layer: "Language", tools: "TypeScript (strict mode)" }, + { + layer: "JS Engine", + tools: "Hermes (default), Hermes v1 (opt-in for advanced perf)", + }, + { + layer: "Navigation", + tools: "Expo Router (file-based), React Navigation 7", + }, + { + layer: "State Management", + tools: "Zustand, Redux Toolkit, React Query/TanStack Query", + }, + { + layer: "UI Components", + tools: "React Native Paper, Tamagui, NativeWind (Tailwind for RN)", + }, + { + layer: "Animations", + tools: "Reanimated 4 (UI thread), Moti, Lottie", + }, + { layer: "Forms", tools: "React Hook Form + Zod validation" }, + { + layer: "Testing", + tools: "Jest, Detox (E2E), React Native Testing Library", + }, + { layer: "CI/CD", tools: "EAS Build, EAS Submit, Fastlane" }, + { + layer: "OTA Updates", + tools: "EAS Update (Hermes bytecode diffing for smaller updates)", + }, + { layer: "Monitoring", tools: "Sentry, Expo Insights" }, + ], + }, + flutter: { + type: "two-column", + title: "Our", + highlight: "Flutter", + afterHighlight: "Stack", + subtitle: + "Every tool earns its place. Here\u2019s what we ship with.", + rows: [ + { layer: "Framework", tools: "Flutter 3.41" }, + { + layer: "Language", + tools: "Dart 3.10 (sound null safety, strict typing)", + }, + { + layer: "Rendering Engine", + tools: "Impeller (Vulkan on Android, Metal on iOS)", + }, + { + layer: "State Management", + tools: "BLoC (enterprise), Riverpod (lean projects)", + }, + { + layer: "UI Framework", + tools: "Material 3, Cupertino, custom widget libraries", + }, + { + layer: "Animation", + tools: "Rive, Flutter implicit/explicit animations, Hero transitions", + }, + { layer: "Navigation", tools: "GoRouter, Navigator 2.0" }, + { + layer: "Backend / BaaS", + tools: "Firebase, Supabase, custom REST/GraphQL APIs", + }, + { layer: "Local Storage", tools: "Hive, Isar, Drift (SQLite)" }, + { + layer: "Testing", + tools: "Widget tests, integration tests, golden tests (visual regression)", + }, + { layer: "CI/CD", tools: "Codemagic, Fastlane, GitHub Actions" }, + { layer: "Monitoring", tools: "Sentry, Firebase Crashlytics" }, + { + layer: "Distribution", + tools: "App Store, Play Store, Firebase App Distribution, TestFlight", + }, + ], + bottomNote: + "We pick state management based on your project complexity. BLoC for enterprise apps with complex business logic and testing requirements. Riverpod for leaner projects where simplicity matters. No dogma, just the right tool.", + }, + "prometheus-monitoring": { + type: "striped", + title: "Technologies We", + highlight: "Deploy & Support", + col1Header: "Category", + col2Header: "Tools", + rows: [ + { col1: "Core", col2: "Prometheus 3.x (latest stable), Alertmanager" }, + { + col1: "Operator", + col2: "Prometheus Operator (kube-prometheus-stack)", + }, + { col1: "Visualization", col2: "Grafana" }, + { + col1: "Long-term Storage", + col2: "Thanos, Cortex, VictoriaMetrics", + }, + { + col1: "Exporters", + col2: "Node Exporter, kube-state-metrics, cAdvisor, Blackbox Exporter, custom exporters", + }, + { + col1: "Alerting Integrations", + col2: "PagerDuty, OpsGenie, Slack, email, custom webhooks", + }, + { + col1: "Cloud Managed", + col2: "Amazon Managed Prometheus, Google Cloud Managed Prometheus, Azure Monitor", + }, + { + col1: "Infrastructure", + col2: "Kubernetes, Docker, Terraform, Helm", + }, + { + col1: "Observability Bridge", + col2: "OpenTelemetry Collector (OTLP ingestion)", + }, + ], + }, + "thanos-long-term-storage": { + type: "striped", + title: "Thanos Components We", + highlight: "Deploy & Support", + col1Header: "Component", + col2Header: "What It Does", + rows: [ + { + col1: "Thanos Sidecar", + col2: "Ships metrics from Prometheus to object storage, exposes StoreAPI for real-time queries", + }, + { + col1: "Thanos Receiver", + col2: "Alternative to Sidecar - accepts remote write from Prometheus, supports multi-tenancy", + }, + { + col1: "Thanos Store Gateway", + col2: "Serves historical metrics from object storage (S3, GCS, Azure Blob, MinIO)", + }, + { + col1: "Thanos Query", + col2: "Federates queries across Sidecars, Store Gateways, and other Queriers - single PromQL endpoint", + }, + { + col1: "Thanos Query Frontend", + col2: "Caching and query splitting layer in front of Query for faster long-range queries", + }, + { + col1: "Thanos Compactor", + col2: "Downsamples historical data (5m, 1h) and compacts blocks to reduce storage cost", + }, + { + col1: "Thanos Ruler", + col2: "Evaluates recording and alerting rules against Thanos Query for global alerts", + }, + { + col1: "Object Storage", + col2: "S3, GCS, Azure Blob, MinIO - the actual long-term storage backend", + }, + { + col1: "Grafana", + col2: "Unified dashboards pointing at Thanos Query for cross-cluster visualization", + }, + { + col1: "Prometheus Operator", + col2: "kube-prometheus-stack with Thanos Sidecar integration via Helm", + }, + ], + }, + "istio-consulting": { + type: "striped", + title: "Technologies We", + highlight: "Deploy & Support", + col1Header: "Category", + col2Header: "Tools", + rows: [ + { + col1: "Core", + col2: "Istio 1.29 (latest), 1.28.x (LTS), Envoy Proxy", + }, + { + col1: "Data Plane Modes", + col2: "Ambient mode (ztunnel + waypoint), Sidecar mode", + }, + { + col1: "Traffic Management", + col2: "VirtualService, DestinationRule, Kubernetes Gateway API", + }, + { + col1: "Security", + col2: "mTLS, AuthorizationPolicy, PeerAuthentication, RequestAuthentication", + }, + { + col1: "Observability", + col2: "Kiali, Prometheus, Grafana, Jaeger/Zipkin", + }, + { + col1: "Multi-cluster", + col2: "Multi-network, multi-primary, external control plane", + }, + { + col1: "Platform", + col2: "Kubernetes, EKS, GKE (with Istio add-on), AKS", + }, + { + col1: "Gateway", + col2: "Istio Ingress Gateway, Kubernetes Gateway API, integration with existing API gateways", + }, + { + col1: "Extensions", + col2: "Wasm plugins, EnvoyFilter, Telemetry API", + }, + ], + }, +}; + +function ThreeColumnTable({ data }: { data: ThreeColumnData }) { + const thClass = data.headingExtraClass + ? `text-left py-3 px-4 text-sm font-semibold ${data.headingExtraClass} text-text-primary` + : "text-left py-3 px-4 text-sm font-semibold text-text-primary"; + + return ( +
+
+ +

+ {data.title}{" "} + {data.highlight}{" "} + {data.afterHighlight} +

+

{data.subtitle}

+
+ + + + + + + + + + + + {data.rows.map((row, i) => ( + + + + + + ))} + +
LayerTools{data.whyHeader}
+ {row.layer} + + {row.tools} + + {row.why} +
+
+ + {data.bottomNote && ( + +

{data.bottomNote}

+
+ )} +
+
+ ); +} + +function TwoColumnTable({ data }: { data: TwoColumnData }) { + return ( +
+
+ +

+ {data.title}{" "} + {data.highlight}{" "} + {data.afterHighlight} +

+

{data.subtitle}

+
+ + + + + + + + + + + {data.rows.map((row, i) => ( + + + + + ))} + +
+ Layer + + What We Use +
+ {row.layer} + + {row.tools} +
+
+ + {data.bottomNote && ( + +

{data.bottomNote}

+
+ )} +
+
+ ); +} + +function StripedTable({ data }: { data: StripedData }) { + return ( +
+
+ +

+ {data.title}{" "} + {data.highlight} +

+
+ + + + + + + + + + + {data.rows.map((row, idx) => ( + + + + + ))} + +
+ {data.col1Header} + + {data.col2Header} +
+ {row.col1} + {row.col2}
+
+
+
+ ); +} + +export default function CustomStackTable({ slug }: { slug: string }) { + const data = dataMap[slug]; + if (!data) return null; + + switch (data.type) { + case "three-column": + return ; + case "two-column": + return ; + case "striped": + return ; + } +} diff --git a/app/services/[slug]/slug-sections/DecisionFramework.tsx b/app/services/[slug]/slug-sections/DecisionFramework.tsx new file mode 100644 index 0000000..495f08f --- /dev/null +++ b/app/services/[slug]/slug-sections/DecisionFramework.tsx @@ -0,0 +1,187 @@ +"use client"; + +import { m } from "framer-motion"; + +interface DecisionData { + id: string; + title: string; + highlight: string; + goodFitTitle: string; + goodFitItems: string[]; + altTitle: string; + altItems: string[]; + bottomTitle: string; + bottomText: string; + goodFitAccent?: boolean; +} + +const decisionDataMap: Record = { + "prometheus-monitoring": { + id: "fit", + title: "Should You Use Prometheus?", + highlight: "An Honest Assessment", + goodFitTitle: "Prometheus is a good fit when", + goodFitItems: [ + "You're running Kubernetes (it's the native standard)", + "You have 50+ services generating metrics", + "Your monitoring bill is growing faster than your infrastructure", + "You need metric retention beyond what commercial tools offer affordably", + "Your team values data ownership and vendor independence", + "You're already using or planning CNCF tools (Envoy, Istio, Flagger)", + ], + altTitle: "You might want to stick with your current tool when", + altItems: [ + "Your team is under 10 engineers and nobody has monitoring experience", + "You need APM (distributed tracing, code-level profiling) - Prometheus handles metrics, not traces", + "You want a fully managed experience with zero operational overhead", + "Your monitoring spend is modest enough that migration effort won't pay back quickly", + "You need logs in the same tool (consider adding Grafana Loki alongside Prometheus, or stay with your current stack)", + ], + bottomTitle: "The hybrid approach (what most teams actually do)", + bottomText: "Use Prometheus for infrastructure and Kubernetes metrics where volume is highest. Keep a commercial tool for APM/tracing if needed. Use Grafana as the unified dashboard layer across both.", + }, + "istio-consulting": { + id: "fit", + title: "Do You Actually Need a", + highlight: "Service Mesh?", + goodFitTitle: "Istio is a good fit when:", + goodFitAccent: true, + goodFitItems: [ + "You're running 30+ microservices on Kubernetes", + "You need mTLS and zero-trust networking for compliance (SOC2, HIPAA, PCI)", + "Traffic management is getting complex - canary releases, traffic splitting, retries", + "You want observability (latency, error rates, traffic flow) without instrumenting every service", + "You're running multi-cluster or multi-cloud Kubernetes", + "Your API gateway is hitting its limits for east-west traffic", + ], + altTitle: "You probably don\u2019t need Istio when:", + altItems: [ + "You have fewer than 10 services and a small team", + "Your services communicate over a message queue, not HTTP/gRPC", + "You only need ingress traffic management (a simple gateway or ingress controller is enough)", + "Your team has no Kubernetes experience yet - get Kubernetes stable first, then add the mesh", + "You need a service mesh but want the simplest option - consider Linkerd for lighter-weight mesh", + ], + bottomTitle: "The incremental approach (what most teams should do)", + bottomText: "Start with ambient mode for L4 mTLS and identity. No sidecars, minimal overhead. Add L7 waypoint proxies only for namespaces that need traffic management or rich authorization. You don\u2019t have to mesh everything on day one.", + }, + "thanos-long-term-storage": { + id: "fit", + title: "Should You Use Thanos?", + highlight: "An Honest Assessment", + goodFitTitle: "Thanos is a good fit when", + goodFitItems: [ + "You're running multiple Prometheus instances and need a unified query layer", + "You need metric retention beyond 15-30 days (compliance, capacity planning, trend analysis)", + "Your Prometheus storage costs are climbing and you want to offload to object storage", + "You need high availability for monitoring - single Prometheus is a SPOF", + "You're already on Kubernetes and using the Prometheus Operator", + "You want to keep the Prometheus query language (PromQL) across everything", + ], + altTitle: "You might not need Thanos when", + altItems: [ + "You have a single small Prometheus instance with modest retention needs", + "Your team is happy with 15-30 days of local retention and doesn't query historical data", + "You're already using Grafana Mimir or Cortex for long-term storage", + "You want a fully managed solution with zero operational overhead - consider Amazon Managed Prometheus or Grafana Cloud", + "Your monitoring stack isn't Prometheus-based (Thanos only works with Prometheus)", + ], + bottomTitle: "The common architecture (what production teams actually run)", + bottomText: "Prometheus with Thanos Sidecar in each cluster, metrics shipped to S3/GCS via Thanos Store Gateway, Compactor handling downsampling and retention, and Thanos Query sitting in front of everything for a unified PromQL endpoint. Grafana dashboards point at Thanos Query instead of individual Prometheus instances.", + }, +}; + +export default function DecisionFramework({ slug }: { slug: string }) { + const data = decisionDataMap[slug]; + if (!data) return null; + + return ( +
+
+ +

+ {data.title} {data.highlight} +

+
+ +
+ {/* Good fit */} + +
+
+ + + +
+

{data.goodFitTitle}

+
+
    + {data.goodFitItems.map((item, i) => ( +
  • + + + + {item} +
  • + ))} +
+
+ + {/* Consider alternatives */} + +
+
+ + + +
+

{data.altTitle}

+
+
    + {data.altItems.map((item, i) => ( +
  • + + + + {item} +
  • + ))} +
+
+
+ + {/* Bottom note */} + +

{data.bottomTitle}

+

+ {data.bottomText} +

+
+
+
+ ); +} diff --git a/app/services/[slug]/slug-sections/DotnetSections.tsx b/app/services/[slug]/slug-sections/DotnetSections.tsx new file mode 100644 index 0000000..927d990 --- /dev/null +++ b/app/services/[slug]/slug-sections/DotnetSections.tsx @@ -0,0 +1,133 @@ +"use client"; + +import { m } from "framer-motion"; + +export function DotnetSpecializedServices() { + return ( +
+
+ +

+ Specialized .NET Services +

+

+ Deep-dive services for teams with specific .NET challenges. +

+
+ +
+ {[ + { + title: ".NET Modernization & Migration", + description: "Migrate from .NET Framework 4.x to .NET 8 without production downtime. Incremental strategies, containerization, and strangler fig patterns to reduce risk.", + href: "/technologies/dotnet/modernization", + label: "Learn about .NET modernization", + }, + { + title: ".NET Staff Augmentation", + description: "Senior .NET engineers who integrate with your team, your repos, your processes, your standups. Scale capacity without compromising quality.", + href: "/technologies/dotnet/staff-augmentation", + label: "Learn about .NET staff augmentation", + }, + ].map((service, i) => ( + +

+ {service.title} +

+

{service.description}

+ + {service.label} + + + + +
+ ))} +
+
+
+ ); +} + +export function DotnetIndustries() { + return ( +
+
+ +

+ Industries We Build .NET Systems For +

+

+ Domain expertise that accelerates delivery and reduces risk. +

+
+ +
+ {[ + { + title: "Financial Services", + description: "Payment processing, trading platforms, regulatory reporting, and compliance-heavy systems built on .NET with enterprise-grade security.", + href: "/industries/financial-services", + }, + { + title: "Healthcare", + description: "HIPAA-compliant patient portals, claims processing, clinical workflows, and diagnostic systems on .NET and Azure.", + href: "/industries/healthcare", + }, + { + title: "SaaS & Technology", + description: "Multi-tenant platforms, subscription billing, and customer-facing applications that scale with your user base.", + href: "/industries/saas", + }, + { + title: "Education", + description: "Learning management systems, adaptive education platforms, and content delivery systems built for scale.", + href: "/industries/education", + }, + ].map((industry, i) => ( + +

+ {industry.title} +

+

{industry.description}

+
+ ))} +
+
+
+ ); +} + +export default function DotnetSections({ slot }: { slot: "specialized" | "industries" }) { + if (slot === "specialized") return ; + if (slot === "industries") return ; + return null; +} diff --git a/app/services/[slug]/slug-sections/FrameworkComparison.tsx b/app/services/[slug]/slug-sections/FrameworkComparison.tsx new file mode 100644 index 0000000..a17437f --- /dev/null +++ b/app/services/[slug]/slug-sections/FrameworkComparison.tsx @@ -0,0 +1,241 @@ +"use client"; + +import { m } from "framer-motion"; +import { type ReactNode } from "react"; + +interface FrameworkData { + name: string; + bestFor: string; + why: string; + useWhenLabel?: string; + useWhen: string; +} + +interface ComparisonData { + sectionId: string; + title: string; + highlight: string; + subtitle: string; + gridCols: string; + frameworks: FrameworkData[]; + bottomNote: ReactNode; +} + +const comparisonDataMap: Record = { + react: { + sectionId: "react-vs-nextjs", + title: "React vs Next.js:", + highlight: "When You Need What", + subtitle: "We build with both. Here's how we decide.", + gridCols: "md:grid-cols-2", + frameworks: [ + { + name: "React (Vite + React Router)", + bestFor: + "Internal tools, dashboards, authenticated apps, SPAs", + why: "Simpler mental model, faster development for apps behind a login. No server-side complexity. Vite builds in seconds, hot module replacement is instant.", + useWhen: + "Your app doesn't need SEO, users always log in first, and you want a clean client-side architecture without SSR overhead.", + }, + { + name: "Next.js (React + Framework)", + bestFor: + "Marketing sites, e-commerce, SEO-critical apps, full-stack", + why: "Server Components, static generation, API routes, edge functions. SEO is handled. Performance is handled. The framework makes decisions so your team doesn't have to.", + useWhen: + "Search traffic matters, you need a public-facing site, or you want one framework handling both frontend and backend.", + }, + ], + bottomNote: ( + <> + Many projects use both. A public marketing site on Next.js, an + authenticated dashboard on React + Vite, sharing the same component + library and design system. We architect for this pattern regularly. + + ), + }, + python: { + sectionId: "frameworks", + title: "Django vs FastAPI vs Flask:", + highlight: "Which One?", + subtitle: "We use all three. Here's how we decide.", + gridCols: "md:grid-cols-3", + frameworks: [ + { + name: "Django", + bestFor: "Full-stack web apps, admin-heavy platforms, SaaS", + why: "ORM, auth, admin panel, security middleware built in. Batteries-included means faster development for complex apps. 20 years of battle-tested stability.", + useWhen: + "Your app needs user management, complex data models, and an admin interface. Most enterprise Python projects start here.", + }, + { + name: "FastAPI", + bestFor: "High-performance APIs, AI/ML serving, microservices", + why: "Native async, automatic OpenAPI docs, Pydantic validation, 4-5x faster than Django for API workloads. The default choice for AI backends in 2026.", + useWhen: + "You're building APIs that serve ML models, need high concurrency, or want auto-generated documentation.", + }, + { + name: "Flask", + bestFor: + "Lightweight services, serverless functions, prototypes", + why: "Minimal footprint, fast startup, zero opinions about architecture. Perfect when you need just enough framework to get out of the way.", + useWhen: + "The service is small and focused, you're deploying to Lambda/serverless, or you need maximum control over the stack.", + }, + ], + bottomNote: ( + <> + Most projects aren't purely one framework. We've built systems + where Django handles the main app, FastAPI serves the ML inference + endpoints, and Flask runs lightweight webhook handlers. The framework + follows the workload. + + ), + }, + flutter: { + sectionId: "flutter-vs-rn", + title: "Flutter vs React Native:", + highlight: "When You Need What", + subtitle: "We build with both. Here's how we decide.", + gridCols: "md:grid-cols-2", + frameworks: [ + { + name: "Flutter (Dart)", + bestFor: + "Custom UI, animation-heavy apps, multi-platform (mobile + web + desktop)", + why: "Flutter renders every pixel itself via Impeller. Complete design control, 60fps animations, and one codebase targeting six platforms. Ideal when your app needs to look and feel exactly as designed.", + useWhen: + "Visual quality and brand consistency matter more than ecosystem breadth. You need web and desktop alongside mobile. Your team is open to learning Dart.", + }, + { + name: "React Native (JavaScript)", + bestFor: + "Teams with JavaScript expertise, code sharing with React web apps", + why: "JavaScript developers outnumber Dart developers roughly 20:1. If your team knows React, React Native lets you share business logic, types, and components between web and mobile.", + useWhen: + "Hiring speed matters, your web app is already React, or you need the broadest possible talent pool.", + }, + ], + bottomNote: ( + <> + Some projects use both. A Flutter mobile app for the consumer + experience, a React Native companion for a partner-facing tool sharing + the same backend. We architect for this when it makes sense. + + ), + }, + "react-native": { + sectionId: "rn-vs-flutter", + title: "React Native vs Flutter:", + highlight: "When You Need What", + subtitle: "We build with both. Here's how we decide.", + gridCols: "md:grid-cols-2", + frameworks: [ + { + name: "React Native (JavaScript/TypeScript)", + bestFor: + "Teams with existing JavaScript/React expertise, code sharing with a React web app, brownfield integration into existing native apps", + why: "React Native uses the same component model, hooks, and state management as React. Your web developers can contribute to mobile without learning a new language. JavaScript developers outnumber Dart developers roughly 20:1, making hiring easier.", + useWhenLabel: "Key context", + useWhen: + "React Native 0.83 ships with the New Architecture by default. The old performance criticisms were about the JavaScript bridge, which no longer exists. With Fabric, TurboModules, and Hermes, React Native now achieves near-native performance at 60fps on most devices.", + }, + { + name: "Flutter (Dart)", + bestFor: + "Pixel-perfect custom UI that looks identical on both platforms, heavy animation or graphically intensive apps, mobile + web + desktop from one codebase", + why: "Flutter has surpassed React Native in GitHub stars (170K vs 121K) and shows 46% cross-platform market share vs React Native\u2019s 35%. But market share doesn\u2019t equal \u2018better\u2019 \u2014 it depends on your team and project.", + useWhenLabel: "Key context", + useWhen: + "Teams starting fresh with no existing JavaScript investment, apps targeting mobile + web + desktop from one codebase (Flutter\u2019s widget engine renders everywhere), or when pixel-perfect custom UI is the top priority.", + }, + ], + bottomNote: ( + <> + Many companies use both. React Native for business apps where + platform-native feel matters, Flutter for consumer apps where custom UI + is the priority. We build with both — see our{" "} + + Flutter services + + . + + ), + }, +}; + +export default function FrameworkComparison({ slug }: { slug: string }) { + const data = comparisonDataMap[slug]; + if (!data) return null; + + const { sectionId, title, highlight, subtitle, gridCols, frameworks, bottomNote } = data; + + return ( +
+
+ +

+ {title}{" "} + {highlight} +

+

{subtitle}

+
+ +
+ {frameworks.map((fw, i) => ( + +

+ {fw.name} +

+
+

+ Best for +

+

{fw.bestFor}

+
+
+

+ Why +

+

{fw.why}

+
+
+

+ {fw.useWhenLabel || "We use it when"} +

+

{fw.useWhen}

+
+
+ ))} +
+ + +

{bottomNote}

+
+
+
+ ); +} diff --git a/app/services/[slug]/slug-sections/TechDecisionTable.tsx b/app/services/[slug]/slug-sections/TechDecisionTable.tsx new file mode 100644 index 0000000..9447b4b --- /dev/null +++ b/app/services/[slug]/slug-sections/TechDecisionTable.tsx @@ -0,0 +1,418 @@ +"use client"; + +import { m } from "framer-motion"; +import { type ReactNode } from "react"; + +interface CardRow { + label: string; + description: string; +} + +interface TechDecisionData { + sectionId: string; + title: string; + highlight: string; + subtitle: string; + cards: CardRow[]; + bottomNote: ReactNode; + ctaHref?: string; + ctaText?: string; + ctaSubtext?: string; +} + +const dataMap: Record = { + nodejs: { + sectionId: "fit", + title: "Is Node.js Right for Your", + highlight: "Backend?", + subtitle: "The right tool for the job, not the trendy one.", + cards: [ + { + label: "REST APIs and GraphQL services", + description: + "Non-blocking I/O handles thousands of concurrent API calls without choking under load", + }, + { + label: "Real-time applications (chat, notifications, live dashboards)", + description: + "Event-driven architecture and native WebSocket support built for persistent connections", + }, + { + label: "Microservices architecture", + description: + "Lightweight runtime with fast cold starts and a small memory footprint per service", + }, + { + label: "Full-stack JavaScript teams", + description: + "Same language across frontend and backend. Shared types with TypeScript. Fewer context switches, faster cycles.", + }, + ], + bottomNote: ( +

+ Not always the right call for CPU-intensive processing like video + encoding or ML model training, or for teams deeply invested in Python or + Java with no JavaScript experience. We'll tell you upfront if + something else fits better. +

+ ), + ctaHref: "#book-call", + ctaText: "Book a free architecture call", + ctaSubtext: + "We\u2019ve recommended Python and Go over Node.js when the workload demanded it.", + }, + react: { + sectionId: "decision", + title: "Is React Right for Your", + highlight: "Project?", + subtitle: "The most popular frontend library isn\u2019t always the right one.", + cards: [ + { + label: "Dynamic, interaction-heavy UIs (dashboards, editors, tools)", + description: + "React\u2019s component model and virtual DOM are built for UIs that change constantly. State management is mature, and the ecosystem has a solution for almost any interaction pattern you need.", + }, + { + label: "You need web and mobile from one team", + description: + "React + React Native lets you share business logic, types, and sometimes entire components across web, iOS, and Android. No other ecosystem offers this level of code sharing.", + }, + { + label: "Your team knows JavaScript/TypeScript", + description: + "React has the largest talent pool in frontend. 44.7% of developers use it (Stack Overflow 2025). Hiring is easier, onboarding is faster, and the community support is unmatched.", + }, + { + label: "SPAs where SEO isn\u2019t the primary concern", + description: + "Internal tools, authenticated dashboards, B2B platforms where users log in first. React with Vite gives you fast builds and a simple mental model without SSR complexity.", + }, + ], + bottomNote: ( +

+ If SEO and page speed are your top priority,{" "} + + Next.js + {" "} + gives you server-side rendering, static generation, and edge functions + built on React. For structured enterprise apps with strict conventions,{" "} + + Angular + {" "} + provides routing, forms, and dependency injection out of the box. Need a + lightweight backend to pair with React?{" "} + + Node.js + {" "} + or{" "} + + Python + {" "} + depending on your workload. Not sure? That's what our{" "} + + architecture consultation + {" "} + is for. +

+ ), + }, + python: { + sectionId: "decision", + title: "Is Python Right for Your", + highlight: "Backend?", + subtitle: "The right tool for the job. Not the trendy one.", + cards: [ + { + label: "AI/ML features are core to your product", + description: + "Python owns the AI ecosystem. PyTorch, TensorFlow, scikit-learn, LangChain - the models, libraries, and talent pool all live here. No other language comes close for ML.", + }, + { + label: "Data-heavy applications (analytics, ETL, reporting)", + description: + "Pandas, NumPy, and Airflow make data manipulation fast. Python handles everything from quick scripts to petabyte-scale processing pipelines.", + }, + { + label: "APIs serving high concurrency (with FastAPI)", + description: + "FastAPI handles 20,000+ requests/second on Uvicorn. Native async, automatic OpenAPI docs, Pydantic validation. Built for the workloads Django wasn\u2019t designed for.", + }, + { + label: "Full-stack web apps with complex business logic", + description: + "Django gives you ORM, auth, admin panel, and security middleware out of the box. Instagram, Spotify, and Dropbox run on it. Proven at scale.", + }, + ], + bottomNote: ( +

+ Need raw API throughput without the Python ecosystem?{" "} + + Node.js + {" "} + with NestJS or Fastify handles I/O-bound workloads with a lighter + runtime. Building a frontend-heavy application where the backend is + thin?{" "} + + Next.js + {" "} + API routes might be all you need. CPU-intensive work like video encoding + or real-time game servers? Go or Rust will outperform Python. Not sure? + That's what our{" "} + + architecture consultation + {" "} + is for. +

+ ), + }, + angular: { + sectionId: "decision", + title: "Is Angular Right for Your", + highlight: "Project?", + subtitle: "The right framework for the job. Not the trending one.", + cards: [ + { + label: "Complex enterprise apps with large teams (10+ devs)", + description: + "Angular\u2019s opinionated architecture, dependency injection, and CLI enforce consistency. Everyone follows the same patterns. Less time debating, more time building.", + }, + { + label: "Long-lived applications (5+ year lifespan)", + description: + "Google maintains Angular with 18-month LTS cycles and predictable 6-month releases. TypeScript catches errors at compile time. Codebases stay maintainable at scale.", + }, + { + label: "Data-heavy dashboards and admin panels", + description: + "Built-in forms, validation, HTTP client, and RxJS for real-time data streams. No need to stitch together 8 different libraries.", + }, + { + label: + "Applications requiring strict security and compliance", + description: + "Angular\u2019s built-in XSS protection, CSP support, and structured architecture make security audits straightforward. Banks and government agencies choose Angular for a reason.", + }, + ], + bottomNote: ( +

+ Building a content-heavy marketing site?{" "} + + Next.js + {" "} + is likely a better fit. Need a lightweight, flexible UI for a smaller + team? React with Vite gives you more freedom with less structure. + Internal tool with simple CRUD? React or even a low-code solution might + be faster. Not sure? That's what our{" "} + + architecture consultation + {" "} + is for - we've recommended against Angular when it wasn't the + right call. +

+ ), + }, + flutter: { + sectionId: "fit", + title: "When Flutter", + highlight: "Makes Sense", + subtitle: "The right framework for the job, not the trendy one.", + cards: [ + { + label: "Cross-platform mobile apps (iOS + Android)", + description: + "Flutter\u2019s Impeller rendering engine compiles to native ARM code. No JavaScript bridge, no WebView. Your app renders at 60fps with pixel-perfect consistency across platforms.", + }, + { + label: "Multi-platform apps (mobile + web + desktop)", + description: + "One codebase targeting six platforms. Flutter renders everything itself rather than delegating to platform UI components, so your app looks identical everywhere.", + }, + { + label: "Custom UI and animation-heavy experiences", + description: + "Flutter\u2019s own rendering engine (Impeller, built on Vulkan/Metal) means you\u2019re not limited by platform UI components. If you can design it, Flutter can render it at 60fps.", + }, + { + label: "MVP validation on both platforms fast", + description: + "Hot Reload lets developers see changes instantly without restarting the app. Validate on iOS and Android in 8-12 weeks, not 16-24 with two native teams.", + }, + ], + bottomNote: ( +

+ Flutter isn't the right call for every project. Apps that need deep + platform-native UI (following iOS HIG or Material Design exactly), or + teams with existing React/JavaScript expertise where React Native would + reuse skills better. We'll tell you upfront if something else fits. +

+ ), + ctaHref: "#book-call", + ctaText: "Book a free architecture call", + }, + "react-native": { + sectionId: "fit", + title: "When React Native", + highlight: "Makes Sense", + subtitle: "The right framework for the job, not the trending one.", + cards: [ + { + label: "Need iOS + Android from one team", + description: + "Single codebase, shared logic, consistent UX. Ship both platforms simultaneously instead of maintaining two separate apps and two separate teams.", + }, + { + label: "Your team already knows React", + description: + "React Native uses the same component model, hooks, and state management. Your web developers can contribute to mobile without learning Swift or Kotlin.", + }, + { + label: "Speed to market matters", + description: + "Expo\u2019s managed workflow, over-the-air updates, and hot reloading mean faster iteration. MVP in 8-12 weeks, not 6 months.", + }, + { + label: "Budget-conscious but quality-focused", + description: + "Cross-platform cuts 30-40% vs. native iOS + native Android. You\u2019re not sacrificing quality - Instagram, Shopify, Discord, and Coinbase all run React Native in production.", + }, + ], + bottomNote: ( +

+ If your app is primarily 3D/gaming (Unity or native), needs extreme + low-level hardware access (Bluetooth LE edge cases, heavy AR), or your + team is already deep in Dart, you may want to explore{" "} + + Flutter + {" "} + or go fully native. For SEO-critical marketing sites,{" "} + + Next.js + {" "} + is the better call. For complex backend needs alongside your mobile app, + see our{" "} + + Node.js + {" "} + and{" "} + + Python + {" "} + services. +

+ ), + }, +}; + +export default function TechDecisionTable({ slug }: { slug: string }) { + const data = dataMap[slug]; + if (!data) return null; + + return ( +
+
+ {/* Title */} + +

+ {data.title}{" "} + {data.highlight} +

+

{data.subtitle}

+
+ + {/* Cards grid */} +
+ {data.cards.map((row, i) => ( + +

+ {row.label} +

+

{row.description}

+
+ ))} +
+ + {/* Bottom note */} + + {data.bottomNote} + + {data.ctaHref && data.ctaText && ( +
+ + {data.ctaText} + + {data.ctaSubtext && ( +

+ {data.ctaSubtext} +

+ )} +
+ )} +
+
+
+ ); +} diff --git a/app/services/[slug]/slug-sections/WhySection.tsx b/app/services/[slug]/slug-sections/WhySection.tsx new file mode 100644 index 0000000..b329090 --- /dev/null +++ b/app/services/[slug]/slug-sections/WhySection.tsx @@ -0,0 +1,191 @@ +"use client"; + +import { m } from "framer-motion"; +import { type ReactNode } from "react"; + +interface CardData { + icon: ReactNode; + title: string; + description: string; +} + +interface WhyData { + id: string; + title: string; + highlight: string; + cards: CardData[]; +} + +const whyDataMap: Record = { + "prometheus-monitoring": { + id: "why-prometheus", + title: "Why Engineering Teams Choose", + highlight: "Prometheus", + cards: [ + { + icon: ( + + + + ), + title: "Monitoring costs spiral fast", + description: "Per-host and per-metric pricing from commercial tools breaks as your container count grows. Prometheus is open-source with no per-metric fees. You pay for infrastructure, not vendor licenses.", + }, + { + icon: ( + + + + ), + title: "Kubernetes made it the default", + description: "82% of container-using organizations run Prometheus (CNCF Survey 2024). If you're on Kubernetes, your engineers already expect it. Service meshes, CI/CD tools, and platforms all expose its metrics natively.", + }, + { + icon: ( + + + + ), + title: "Your data should be yours", + description: "Commercial tools own your dashboards, alert definitions, and metric history. Migrating away after 3 years means rebuilding everything from scratch. Prometheus gives you full data ownership and portability.", + }, + { + icon: ( + + + + ), + title: "Prometheus 3.x changed the game", + description: "First major version in seven years (late 2024). Native Histograms, new UI, OpenTelemetry ingestion, Remote Write 2.0. If you evaluated Prometheus before and passed, it's worth looking again.", + }, + ], + }, + "istio-consulting": { + id: "why-istio", + title: "Why Engineering Teams Adopt", + highlight: "Istio Service Mesh", + cards: [ + { + icon: ( + + + + ), + title: "Service-to-service traffic gets messy", + description: "Once you're past 20-30 microservices, managing traffic routing, retries, timeouts, and circuit breaking in application code becomes a maintenance nightmare. Istio moves all of that to the infrastructure layer.", + }, + { + icon: ( + + + + ), + title: "Zero-trust security, no code changes", + description: "Mutual TLS between every service, workload identity, and fine-grained authorization policies. All enforced at the mesh layer. Your application code stays clean. Compliance teams get the audit trails they need.", + }, + { + icon: ( + + + + ), + title: "Ambient mode changed everything", + description: "Istio's ambient mode (GA since v1.24) removes the sidecar proxy from every pod. Lower resource overhead, no pod restarts on mesh upgrades, simpler operations. Teams that passed on Istio before are reconsidering.", + }, + { + icon: ( + + + + ), + title: "It's the CNCF graduated standard", + description: "Istio graduated from the Cloud Native Computing Foundation in July 2023. Same governance tier as Kubernetes and Prometheus. The ecosystem, tooling, and long-term community support are unmatched by alternatives.", + }, + ], + }, + "thanos-long-term-storage": { + id: "why-thanos", + title: "Why Engineering Teams Deploy", + highlight: "Thanos", + cards: [ + { + icon: ( + + + + ), + title: "Prometheus wasn't built for months of data", + description: "Prometheus stores metrics locally with a default 15-day retention. Need six months of data for capacity planning or compliance? You're either burning disk or losing history. Thanos offloads metrics to cheap object storage like S3 or GCS.", + }, + { + icon: ( + + + + ), + title: "Multi-cluster visibility is a real problem", + description: "Ten Kubernetes clusters means ten separate Prometheus instances with no shared view. Thanos Query federates them into one PromQL endpoint, so your team gets a single pane of glass without building custom glue code or scripts.", + }, + { + icon: ( + + + + ), + title: "Prometheus downtime means monitoring gaps", + description: "A single Prometheus server is a single point of failure. When it restarts or crashes, you lose in-flight metrics. Thanos Sidecar plus replica deduplication gives you high availability without re-architecting your entire stack.", + }, + { + icon: ( + + + + ), + title: "Object storage is 10-50x cheaper than SSDs", + description: "Storing terabytes of metrics on local SSDs is expensive and doesn't scale. Thanos uses S3, GCS, or Azure Blob as a storage backend - with automatic downsampling to keep long-range queries fast while reducing storage cost significantly.", + }, + ], + }, +}; + +export default function WhySection({ slug }: { slug: string }) { + const data = whyDataMap[slug]; + if (!data) return null; + + return ( +
+
+ +

+ {data.title} {data.highlight} +

+
+ +
+ {data.cards.map((card, idx) => ( + +
+ {card.icon} +
+

{card.title}

+

{card.description}

+
+ ))} +
+
+
+ ); +}