Skip to main content

Architecture Overview

This document provides a high-level overview of the Infowebplus architecture.

System Architecture​

Infowebplus is built as a modern, serverless web application with the following components:

┌─────────────────┐
│   Next.js App   │
│  (Frontend +    │
│   API Routes)   │
└────────┬────────┘
         │
         ├─────────────────┐
         │                 │
┌────────▼────────┐  ┌─────▼──────┐
│  Sanity CMS     │  │   Redis    │
│  (Content)      │  │  (Cache)   │
└─────────────────┘  └────────────┘
         │
         │
┌────────▼────────┐
│   HubSpot CRM   │
│  (Quote Leads)  │
└─────────────────┘

Technology Stack​

Frontend​

  • Next.js 15 - React framework with App Router
  • TypeScript - Type safety
  • Tailwind CSS - Utility-first CSS
  • Framer Motion - Animations
  • next-intl - Internationalization

Backend​

  • Next.js API Routes - Serverless functions
  • Sanity CMS - Headless CMS
  • Redis/In-Memory Cache - Caching layer
  • HubSpot API - CRM integration

Infrastructure​

  • Vercel - Hosting and deployment
  • Cloudflare Pages - Documentation hosting
  • Sanity CDN - Content delivery

Data Flow​

Content Delivery​

  1. User requests a page
  2. Next.js checks cache (Redis or in-memory)
  3. If cache miss, fetch from Sanity CMS
  4. Cache the response
  5. Render page with content

Quote Submission​

  1. User fills quote calculator
  2. Real-time tracking via /api/quote/track
  3. Form submission via /api/quote/submit
  4. Data saved to Sanity CMS
  5. Contact created in HubSpot
  6. PDF generated and emailed

Caching Strategy​

Multi-layer caching:

  • In-Memory Cache - Fast, local cache (fallback)
  • Redis Cache - Distributed cache (production)
  • Next.js ISR - Incremental Static Regeneration
  • Sanity CDN - Always enabled

See Caching Documentation for details.

Security​

  • Environment variables for sensitive data
  • API route authentication tokens
  • Sanity webhook secret validation
  • CORS configuration
  • Rate limiting (via Vercel)

Performance​

  • Static generation where possible
  • ISR with 1-hour revalidation
  • Image optimization via Next.js Image
  • Code splitting and lazy loading
  • CDN delivery for static assets

Next Steps​