SR-22 Insurance Now

Project Case Study

SR-22 Insurance Now

Need a Cheap SR-22 Insurance? Compare & save on SR22 Insurance from top providers.

Timeline

2025

Industry

Digital Marketing

Status

Scale & Growth

Strategic Executive
Engineering Architecture

Business Impact & ROI

A low-friction insurance lead engine designed for maximum conversion. It simplifies complex insurance compliance (SR-22) into a user-friendly experience, driving high-quality calls and form submissions for insurance providers.

Strategic Playbook Features

Campaign owners need fast, dynamic, and conversion-focused websites to maximize ROI from ad campaigns.

Dynamic Landing Pages: Generated from a flexible JSON structure for quick deployment.

Click-to-Call Ads: Location-based phone numbers to boost conversions.

Auto-Complete Google Place API: Enhances user experience and reduces friction.

Image Optimization: Ensures lightning-fast load speeds.

Google Analytics Integration: Tracks performance for data-driven decisions.

Custom Components: Built from scratch for full flexibility and scalability.

Mobile Optimization & Accessibility: Ensures seamless experiences for all users.

Dynamic Content: JSON-driven landing pages tailored for campaigns.

Performance Optimization: WebP images and lazy loading for faster pages.

SEO & Analytics: Designed to convert traffic into leads while tracking every interaction.

Technical Deep-Dive

A high-performance landing page engine driven by JSON configurations. Features advanced Google Places API integration for address autocomplete and location-based dynamic content injection, optimized for sub-second load times on mobile devices.

Architecture Stack

Project Overview

A comprehensive SR22 insurance platform built with Next.js 13 that helps users understand SR22 requirements and connect with insurance providers.

Executive Summary

This project is a high-signal example of a content-led lead-generation platform. It combines structured content, location-aware page expansion, and provider-connection flows into a search engine built for commercial intent.

Business Problem

Insurance users search with high urgency, high confusion, and strong local intent. Capturing that demand requires more than a brochure site. It needs structured educational content, scalable page architecture, and a conversion path into provider matching.

What I Built

A Next.js platform for SR22 education, provider discovery, and quote intent
Content architecture that scales across providers, locations, and query variations
Search-focused routing and page generation
Lead-generation pathways that connect educational traffic to provider action

Why It Matters

This kind of platform shows how content, SEO, and conversion infrastructure can operate together. It is commercially relevant for regulated industries, comparison businesses, and location-driven lead engines where search intent is the core acquisition channel.

Best Fit If You Need Something Similar

This case study supports Programmatic Growth Engines and Product Architecture & Scale. It is a strong fit for comparison platforms, insurance or finance lead generation, and structured content businesses.

Architecture

This is a Next.js 13 application with React 18, utilizing a content-driven approach where SR22 information, provider details, and location-specific content are managed through JSON files and utility modules for scalability and SEO optimization.

Technology Stack

Frontend Framework:

Next.js 13.5.11 - React framework with SSR/SSG capabilities
React 18.2.0 - Modern React with concurrent features
Sass 1.64.1 - CSS preprocessor for advanced styling
Sharp 0.34.1 - High-performance image processing

Development & Build Tools:

Bundle Analyzer - Performance optimization and bundle analysis
Cross-env - Cross-platform environment variables
PM2 - Production process management (Digital Ocean deployment)

Utilities & Libraries:

Axios 1.5.0 - HTTP client for API calls
Lodash 4.17.21 - JavaScript utility library
Prop Types - Runtime type checking

Root Directory Structure

sr2023/
├── src/                           # Main source code
│   ├── components/               # Reusable UI components (53 components)
│   ├── pages/                   # Next.js pages (34+ pages)
│   ├── utils/                   # Utilities and content management
│   ├── wrapper/                 # Layout wrappers
│   ├── hooks/                   # Custom React hooks (7 hooks)
│   ├── context/                 # React context providers
│   ├── apis/                    # API integration layer
│   ├── lib/                     # External library configurations
│   ├── assets/                  # Static assets and images
│   └── styles/                  # Global styles and SCSS
├── content/                      # Content management
│   └── SR22Content.json         # Comprehensive SR22 content database
├── public/                       # Public static files
│   ├── favicon.ico
│   ├── sitemap.xml
│   └── robots.txt
├── .next/                       # Next.js build output
├── node_modules/                # Dependencies
├── package.json                 # Project dependencies and scripts
├── next.config.js               # Next.js configuration with rewrites/redirects
├── jsconfig.json                # JavaScript configuration
├── build-deploy.sh              # Deployment script
├── bitbucket-pipelines.yml      # CI/CD pipeline
├── .env                         # Environment variables
└── README.md                    # Project documentation

Detailed Source Structure

Pages Architecture (`src/pages/`)

Comprehensive Next.js routing with 34+ pages for SR22 services:

pages/
├── _app.js                      # Global app wrapper
├── _document.js                 # Custom document structure
├── _index.js                    # Index redirect
├── 404.js                       # Custom 404 page
├── home/                        # Homepage
├── [providerSlug]/             # Dynamic insurance provider pages
│   ├── index.js                # Main provider page
│   ├── [citySlug].js           # Provider city pages
│   └── [...otherSlug].js       # Additional provider routes
├── location/                    # Location-based pages
│   ├── [stateSlug]/            # State-specific SR22 info
│   └── [stateSlug]/[citySlug]/ # City-specific SR22 services
├── api/                        # API routes
│   ├── contact.js              # Contact form API
│   ├── business.js             # Business listing API
│   ├── location.js             # Location services API
│   └── sitemap.js              # Dynamic sitemap generation
├── sr22-insurance-quotes/      # Quote request functionality
├── what-is-sr22/               # SR22 education pages
├── sr22-cost/                  # Cost information
├── sr22-faq/                   # Frequently asked questions
├── sr22-by-state/              # State-specific requirements
├── sr22-providers/             # Insurance provider directory
├── sr22-bond/                  # SR22 bond information
├── non-owner-sr22/             # Non-owner SR22 insurance
├── fr44-insurance/             # FR44 (Virginia/Florida) insurance
├── bac-calculator/             # Blood alcohol calculator
├── dui-terms/                  # DUI terminology guide
├── list-your-business/         # Provider registration
├── contact-us/                 # Contact page
├── thank-you/                  # Form submission confirmation
├── privacy-and-terms/          # Legal pages
├── do-not-sell-my-data/        # Privacy compliance
├── how-it-works/               # Process explanation
├── why-use-our-service/        # Value proposition
├── lp/                         # Landing pages
├── lp1/                        # Landing page variant 1
├── lp11/                       # Landing page variant 11
├── lp1e/                       # Landing page variant 1e
└── lpe/                        # Landing page variant e

Components Library (`src/components/`)

Extensive component library with 53+ reusable components:

components/
├── Accordion/                  # FAQ and content accordions
├── Autocomplete/               # Location autocomplete
├── BlogCard/                   # Blog post cards
├── BusinessForm/               # Provider registration form
├── Button/                     # Standard button components
├── ButtonLP/                   # Landing page specific buttons
├── CalculatorForm/             # BAC calculator form
├── Checkbox/                   # Form checkbox inputs
├── CircleLoader/               # Loading indicators
├── ConfirmationPopup/          # Modal confirmations
├── ContactUsForm/              # Contact form component
├── Dropdown/                   # Select dropdown components
├── FeatureCard/                # Feature highlighting cards
├── Footer/                     # Site footer with links
├── Header/                     # Site header and navigation
├── HeroHome/                   # Homepage hero section
├── HeroHomeLP/                 # Landing page hero variants
├── Image/                      # Optimized image component
├── Input/                      # Form input components
├── ListingCard/                # Provider listing cards
├── Loader/                     # Various loading states
├── Modal/                      # Modal dialog component
├── ProviderCard/               # Insurance provider cards
├── QuoteForm/                  # Quote request forms
├── Rating/                     # Star rating component
├── SearchBox/                  # Search functionality
├── SeoHead/                    # SEO meta tags
├── ServiceCard/                # Service offering cards
├── Sidebar/                    # Navigation sidebar
├── StateCard/                  # State-specific info cards
├── Tag/                        # Content tags
├── TestimonialCard/            # Customer testimonials
├── Text/                       # Typography components
├── TrustedBy/                  # Trust indicators
├── ZipCodeForm/                # ZIP code input forms
└── [20+ additional components]/

Content Management (`content/` & `src/utils/Content/`)

Centralized content management system:

content/
└── SR22Content.json            # Comprehensive SR22 content database (493KB)
    ├── INSURANCE               # SR22 insurance information
    ├── PROVIDERS              # Insurance provider details
    ├── LOCATIONS              # State/city specific content
    ├── FAQ                    # Frequently asked questions
    ├── GUIDES                 # Educational content
    └── LEGAL                  # Legal and compliance content

src/utils/Content/
├── PageContent.js              # Page content utilities
├── LocationContent.js          # Cities, states, service areas
├── FeatureContent.js           # Feature descriptions
└── [additional content modules]

Utilities & Configuration (`src/utils/`)

utils/
├── Content/                    # Content management (above)
├── SEOMapping.js               # Dynamic SEO metadata
├── States.js                   # US states data
├── CommonUtils.js              # Shared utility functions
├── Constant.js                 # Application constants
└── RandomDescription.js        # Dynamic content generation

Custom Hooks (`src/hooks/`)

hooks/
├── [7 custom React hooks for:
├── - Location detection and management
├── - Form handling and validation
├── - SEO management
├── - Content fetching and parsing
├── - State management
├── - API integration
└── - User interaction tracking]

Layout Wrappers (`src/wrapper/`)

wrapper/
├── index.js                    # Wrapper exports
├── AppLayoutWrapper/           # Main app layout
├── PageWrapper/                # Individual page wrapper
├── LandingPageWrapper/         # Landing page specific layout
└── ProviderWrapper/            # Provider page layout

API Integration (`src/apis/`)

apis/
├── index.js                    # API exports
├── commonAPI.js                # Shared API functions
├── contactAPI.js               # Contact form submissions
├── locationAPI.js              # Location services
└── [additional API modules]

Key Features & Functionality

SR22 Insurance Platform Features

Comprehensive SR22 education with detailed guides and FAQs
State-specific requirements for all 50 states
Insurance provider directory with 20+ major insurers
Quote request system for connecting users with providers
Location-based services for local SR22 requirements
DUI/DWI recovery resources and tools

Content-Driven Architecture

JSON-based content management in SR22Content.json (493KB of content)
Dynamic page generation for providers, locations, and guides
SEO-optimized content with dynamic meta tags and structured data
Educational resources covering all aspects of SR22 requirements

Location & Provider Services

50-state coverage with specific requirements and laws
City-level content for major metropolitan areas
Provider comparison tools and information
Local agent finder functionality
State-specific forms and requirements

User Tools & Calculators

BAC (Blood Alcohol Content) calculator
SR22 cost estimator tools
Quote comparison functionality
DUI terms glossary
Timeline calculators for license reinstatement

SEO & Performance

Dynamic sitemap generation for all pages
State and city-specific SEO optimization
Rich snippets and structured data
Bundle optimization with analyzer
Server-side rendering for better indexing

Business Features

Provider registration system
Lead generation through quote forms
Contact management system
Business listing functionality
Compliance tools for privacy regulations

Development Workflow

Available Scripts

# Development
npm run dev              # Start development server

# Building
npm run build            # Production build
npm run start            # Start production server
npm run export           # Static export

# Analysis & Quality
npm run lint             # ESLint code quality
npm run analyze-build    # Bundle size analysis

# Deployment
npm run deploy           # Run deployment script
sh build-deploy.sh       # Manual deployment to Digital Ocean

Digital Ocean Deployment Process

# SSH to Digital Ocean droplet
ssh user@server

# Navigate to project
cd sr2023

# Pull latest changes
git pull origin master

# Build application
npm run build

# Restart PM2 process
pm2 restart sr23

Environment Setup

Prerequisites: Node.js 18+, npm, PM2 (for production)
Installation: npm install
Environment: Configure .env file
Development: npm run dev
Access: http://localhost:3000

Content Management

SR22Content.json Structure

The main content file (493KB) contains:

{
  "INSURANCE": {
    "what_is_sr22": {
      "title": "What is SR-22 Insurance?",
      "content": "Educational content...",
      "topics": [
        // Detailed topic breakdown
      ]
    }
  },
  "PROVIDERS": {
    // Insurance provider information
  },
  "LOCATIONS": {
    // State and city specific content
  }
}

Adding New Content

SR22 Guides: Edit SR22Content.json INSURANCE section
Providers: Add to PROVIDERS section with images and details
Locations: Update LOCATIONS for new states/cities
SEO: Update SEOMapping.js for new pages

Next.js Configuration Highlights

Rewrites & Redirects

// Blog redirect to external domain
{
  source: "/blog/:path*",
  destination: "https://sr22insurancenow.com/blog/:path*"
}

// SEO-friendly redirects
{
  source: "/about-sr22",
  destination: "/what-is-sr22",
  statusCode: 301
}

Bundle Analysis

Integrated @next/bundle-analyzer for performance monitoring
Image optimization with Sharp
Sass support for advanced styling

SEO Strategy

Content SEO

50+ state-specific pages for local SEO
Provider-specific content for brand searches
Educational content for informational queries
FAQ sections for long-tail keywords

Technical SEO

Dynamic meta tags based on content
Structured data for insurance providers
XML sitemap generation
Optimized URL structure for SEO

Deployment & CI/CD

Bitbucket Pipelines

Automated builds on code push
Quality checks and linting
Digital Ocean deployment integration

Production Infrastructure

Digital Ocean Droplet hosting
PM2 process management for reliability
Git-based deployment workflow
SSL certificate management

Business Logic

Lead Generation Flow

User education through comprehensive guides
ZIP code collection for location targeting
Quote form submission to partner providers
Provider matching based on location and needs
Follow-up communication through contact system

Provider Network

20+ major insurance companies represented
State-specific availability tracking
Provider comparison tools
Business registration system for new providers

Compliance & Legal

Privacy Compliance

CCPA compliance with do-not-sell functionality
Privacy policy and terms of service
Data handling procedures
User consent management

Insurance Regulations

State-specific requirements accuracy
Disclaimer management for legal protection
Provider licensing verification
Compliance monitoring tools

Performance Optimizations

Next.js Features

Static Site Generation (SSG) for content pages
Server Side Rendering (SSR) for dynamic content
Image optimization with Next.js Image and Sharp
Code splitting for optimized loading
Bundle analysis for performance monitoring

Content Optimizations

Lazy loading for images and components
Content caching strategies
Optimized JSON content structure
Minimal JavaScript for critical pages

Technology Highlights

Modern Stack Benefits

Next.js 13 with improved performance and features
React 18 with concurrent features
Sass for maintainable styles
JSON-driven content for non-developer updates

Scalability Features

Component-based architecture with 53+ components
Content separation from code logic
API-ready structure for future integrations
Modular design for easy feature additions

Project: SR22 Insurance Platform
Industry: Insurance / Financial Services
Framework: Next.js 13 + React 18
Deployment: Digital Ocean with PM2
Content: 493KB comprehensive SR22 database
Coverage: 50 states + 20+ insurance providers