Active

CBRS Group Website Implementation

Complete architecture, development, and expansion guide for cbrsgroup.com

React + Vite33 Pages LiveProduction Ready
33
Total Pages
28
Service Area Cities
9
Service Pillars
100%
SEO Optimized
Architecture Overview

Tech Stack

  • Framework: React + Vite (migrated from Next.js)
  • Routing: React Router DOM v6
  • Styling: Tailwind CSS
  • SEO: react-helmet-async
  • Deployment: Docker + nginx on Coolify

Page Types

  • Static Pages
    About, Contact, Insurance Help
  • Service Pages
    Water damage, fire damage, etc. (coming soon)
  • Service Area Pages
    28 cities across Houston metro
  • Dynamic Pages
    Using React Router params
Key Configuration Files

src/config/site.ts

⭐ CENTRAL CONFIG - Contains all site-wide settings

  • • Company information and contact details
  • • Service definitions (9 service pillars)
  • • Service area definitions (28 cities in 3 tiers)
  • • Navigation structure

src/App.tsx

⭐ ROUTE DEFINITIONS - All application routes

<Routes>
<Route path="/" element={<Index />} />
<Route path="/service-areas" element={<ServiceAreasIndex />} />
<Route path="/service-areas/:city" element={<CityPage />} />
</Routes>

public/sitemap.xml

SEO Sitemap - Must be updated when adding pages

  • • Lists all 33 pages for search engines
  • • Priority levels (1.0 = homepage → 0.6 = tier 3 cities)
  • • Change frequency metadata
Adding New Pages
1. Create Component
src/pages/PageName.tsx
2. Add Route
App.tsx: <Route path="/page" />
3. Update Sitemap
public/sitemap.xml
4. Update Navigation
components/Navbar.tsx (optional)
Adding Service Areas
1. Update Config
src/config/site.ts → serviceAreas
2. Choose Tier
tier1 (0.8) / tier2 (0.7) / tier3 (0.6)
3. Update Sitemap
Add city URL to sitemap.xml
4. Test Locally
npm run dev → /service-areas/city
Multi-State Expansion Strategy
Scalable architecture for expanding to Florida, New Jersey, and beyond

Current Structure (Texas Only)

/service-areas
/service-areas/houston
/service-areas/katy

Recommended (Multi-State)

/service-areas
/service-areas/texas
/service-areas/texas/houston
/service-areas/florida
/service-areas/florida/miami

Benefits of State-Based Structure

No slug conflicts between states
Better SEO with state context
Scalable to unlimited states
Clean marketing URLs

5-Step Implementation for New States

  1. 1.Update src/config/site.ts with state-based structure
  2. 2.Create StatePage.tsx component
  3. 3.Update CityPage.tsx to handle state parameter
  4. 4.Update routes in App.tsx
  5. 5.Update sitemap.xml with all new URLs
SEO Best Practices

Required on Every Page

  • Title Tag: Unique per page
  • Meta Description: 150-160 characters
  • Canonical URL: Prevents duplicate content
  • Open Graph Tags: For social media

Sitemap Priority Guidelines

1.0Homepage only
0.9Contact, State pages
0.8Tier 1 cities, Services
0.7Tier 2 cities
0.6Tier 3 cities, Blog
Deployment
Production URL
https://cbrsgroup.com
Platform
Coolify (auto-deploy from master)
Container
Docker + nginx:alpine
Build Command
npm run build
Important URLs
Production Site→Sitemap→Robots.txt→Health Check→
Complete Documentation
For detailed implementation guides, code examples, and troubleshooting
WEBSITE-IMPLEMENTATION.md
750+ lines of comprehensive documentation
Documentation
Architecture
Complete tech stack
Code Examples
Copy-paste ready
Expansion Guide
Florida, NJ examples
View Full Documentation