Professional bilingual (EN/ES) insurance agency website for Insure IT Group Corp, a family-owned independent insurance agency serving Jacksonville, FL since 2011.
User Browser
|
v
Amazon CloudFront (CDN / DDoS Protection / SSL)
|
v
EC2 t3.micro — Ubuntu + Nginx (reverse proxy → port 5000)
|
v
Node.js Server (Next.js 14 + Express.js — port 5000)
|
+----> Next.js App Router (SSG pages — Home, About, Plans)
|
+----> Express API Routes (/api/*)
|
+----> AWS RDS PostgreSQL 17 (db.t4g.micro)
|
+----> AWS S3 (document uploads from quote form)
| Layer | Technology | Notes |
|---|---|---|
| Framework | Next.js 14 (App Router) | Migrated from Vite SPA — enables SSG/SSR for SEO |
| Language | TypeScript | Strict mode, full type safety |
| Styling | TailwindCSS 3 + shadcn/ui | Radix UI primitives |
| Animations | Framer Motion | Hero entrance, section transitions |
| Forms | React Hook Form + Zod | Quote modal, chatbot form |
| Server state | TanStack React Query v5 | Contact form submissions, feature requests |
| Routing | Next.js App Router | File-based, replaces Wouter SPA routing |
| i18n | Custom language context | EN/ES toggle with flag badge buttons |
| Layer | Technology | Notes |
|---|---|---|
| Server | Express.js (Node.js) | Custom server integrated with Next.js |
| ORM | Drizzle ORM | Schema-first, PostgreSQL driver |
| Database | PostgreSQL 17 (AWS RDS) | db.t4g.micro |
| File uploads | Multer + AWS S3 SDK | Quote form document uploads |
| Validation | Zod | Request body validation on all API routes |
| Service | Detail | Cost |
|---|---|---|
| CDN | Amazon CloudFront | ~$0.00 (free tier — 1 TB/mo) |
| Web server | EC2 t3.micro (Ubuntu + Nginx) | ~$8.50/mo |
| Database | RDS db.t4g.micro (PostgreSQL 17) | ~$14.01/mo |
| Object storage | AWS S3 | Usage-based (minimal) |
| DNS | AWS Route 53 | ~$0.50/mo |
| Total | ~$22.51/mo |
/
├── app/ # Next.js App Router pages (SSG)
│ ├── layout.tsx # Root layout — global CSS, providers, JSON-LD
│ ├── providers.tsx # Client-side providers (React Query, Language, Tooltip)
│ ├── page.tsx # Home page (/ route)
│ ├── about/page.tsx # About page (/about)
│ ├── plans/page.tsx # Plans page (/plans)
│ └── not-found.tsx # 404 page
│
├── client/src/
│ ├── components/ # Shared UI components
│ │ ├── navigation.tsx # Glassmorphism navbar — Next.js Link + usePathname
│ │ ├── footer.tsx # Site footer
│ │ ├── logo.tsx # Logo with WebM shield animation
│ │ ├── chatbot.tsx # AI assistant "Liz" — Next.js useRouter
│ │ ├── quote-modal.tsx # Quote request modal with file upload
│ │ ├── testimonials-carousel.tsx # 2×2 grid, 3 pages of 4, auto-cycles 6s
│ │ ├── theme-provider.tsx # Language context (EN/ES)
│ │ ├── section-divider.tsx # Animated wave SVG dividers
│ │ └── ui/ # shadcn/ui components
│ │
│ ├── pages/ # Page content components (all "use client")
│ │ ├── landing.tsx # Homepage content (~1,240 lines)
│ │ ├── about.tsx # About page — team, story
│ │ ├── plans.tsx # Insurance plans
│ │ └── not-found.tsx # 404 content
│ │
│ └── lib/
│ ├── translations.ts # All EN/ES string content
│ ├── queryClient.ts # TanStack React Query client
│ └── conversation-types.ts # Chatbot conversation types
│
├── server/
│ ├── index.ts # Entry point — Express + Next.js custom server
│ ├── routes.ts # All API routes (contact, S3, testimonials)
│ ├── pgStorage.ts # PostgreSQL storage layer
│ ├── db.ts # Drizzle + pg connection pool
│ ├── s3Client.ts # AWS S3 client
│ ├── migrate.ts # DB migration runner
│ └── logger.ts # Shared logging utility
│
├── shared/
│ ├── schema.ts # Drizzle table definitions + Zod insert schemas
│ └── types.ts # Shared TypeScript types
│
├── attached_assets/ # Local static assets (team photos, logos, animations)
├── public/ # Next.js static files (shield_animation.webm, robots.txt, sitemap.xml)
├── next.config.mjs # Next.js configuration (@assets alias, image domains)
├── tailwind.config.ts # Tailwind configuration
└── tsconfig.json # TypeScript configuration
| Route | Description | Rendering |
|---|---|---|
/ |
Homepage — hero, insurance types, testimonials, contact | SSG |
/about |
Team profiles, company story | SSG |
/plans |
Insurance plans detail | SSG |
All handled by Express, co-located with the Next.js server on port 5000.
| Method | Endpoint | Description |
|---|---|---|
POST |
/api/contact |
Submit quote/contact form (supports multipart file upload) |
GET |
/api/testimonials |
Fetch client testimonials |
POST |
/api/objects/upload |
Get presigned S3 URL for client-side upload |
GET |
/api/documents/:s3Key |
Download a document from S3 |
GET |
/api/images/:imageName |
Serve placeholder images |
GET |
/api/videos/herovid1.mp4 |
Stream hero background video |
- Bilingual (EN/ES): Full translation via
client/src/lib/translations.ts. Toggle in navbar with flag badge. - AI Chatbot "Liz": Conversational insurance assistant that collects quote info and submits the contact form.
- Quote Modal: Multi-step form with document upload support (PDF, DOC, JPG, PNG — up to 10 MB each, max 5 files).
- SSG/SSR: Next.js App Router generates static HTML at build time. Google sees real content on first request.
- Testimonials Carousel: 2x2 grid, 12 testimonials across 3 pages, auto-cycles every 6 seconds with swipe support.
- Glassmorphism Navbar: Collapses to pill on scroll, expands on full view. Social icons stack when scrolled.
- Node.js 20+
- PostgreSQL 17 (or AWS RDS connection via
DATABASE_URL) - AWS credentials (for S3 uploads)
| Variable | Required | Description |
|---|---|---|
DATABASE_URL |
Yes | PostgreSQL connection string |
AWS_REGION |
Yes | AWS region (e.g., us-east-1) |
AWS_ACCESS_KEY_ID |
Yes | AWS IAM access key |
AWS_SECRET_ACCESS_KEY |
Yes | AWS IAM secret key |
S3_BUCKET |
Yes | S3 bucket name for document uploads |
OPENAI_API_KEY |
Optional | Powers the Liz chatbot AI responses |
# Install dependencies
npm install
# Start the development server (Next.js + Express on port 5000)
npm run dev# Build Next.js pages (static generation)
next build
# Start the production server
NODE_ENV=production tsx server/index.tsStatus: Optimized / Production-Ready Cost target: Under $20/month
Over 48 hours, the AWS infrastructure underwent a "Lean Migration" to eliminate idle high-cost resources while transitioning to a professional edge-cached delivery model.
Total savings achieved: ~$55.00/month
| Layer | Service | Detail |
|---|---|---|
| Global edge | Amazon CloudFront | Primary entry point (CDN, DDoS protection, SSL termination) |
| Web tier | EC2 t3.micro | Ubuntu + Nginx (reverse proxy to Node.js on port 5000) |
| Database | RDS db.t4g.micro | PostgreSQL 17 |
| Networking | Internet Gateway (IGW) | NAT Gateway removed — saving $32.40/month |
A. Cost Reduction
- Deleted a NAT Gateway that was charging $32.40/month — traffic rerouted through IGW
- Terminated two redundant EC2 instances (
i-0d9fa255e69e26b39,i-0a9ff0e3029fd6052) - Result: Monthly burn rate reduced by over 60%
B. CloudFront CDN Deployment
- Configured CloudFront Distribution pointing to the EC2 origin
- Used
.nip.iomapping (18.205.63.184.nip.io) as a temporary domain-based origin while the final TLD was being connected - CloudFront now masks the EC2 IP, providing DDoS protection at the edge
C. Server Fixes
- Resolved
ENOENTerror by consolidating deployment to correct directory (insure-it-site/) - Fixed Nginx 502 Bad Gateway by correcting the proxy config (
/etc/nginx/sites-available/default) - Added
proxy_set_header Host $host;to the Nginx location block for valid CloudFront handshakes
| Component | Detail |
|---|---|
| Origin hostname | 18.205.63.184.nip.io |
| CloudFront distribution | d3gkfgi9drj9kb.cloudfront.net |
| Application port | 5000 (Node.js) |
| Database class | db.t4g.micro (PostgreSQL 17) |
| Active security group | ec2-rds-1 (sg-04eb78ded4248b3fb) |
| Service | Cost | Status |
|---|---|---|
| EC2 t3.micro | ~$8.50 | Active |
| RDS db.t4g.micro | ~$14.01 | Optimized |
| CloudFront | ~$0.00 | Within free tier (1 TB/mo) |
| NAT Gateway | $0.00 | Deleted |
| Total | ~$22.51 |
- RDS Reserved Instance — Purchase a 1-year reserved instance to drop DB cost from ~$14 to ~$9/month
- Snapshot cleanup — Delete old EBS snapshots from the terminated instances
- Domain connection — Finalize Route 53 CNAME record for the custom domain (
insureitgroup.net)
- Metadata API: Each page exports a
metadataobject (title, description, Open Graph, Twitter Card) - JSON-LD:
LocalBusiness/InsuranceAgencystructured data in the root layout - Sitemap:
/sitemap.xmlatclient/public/sitemap.xml - Robots:
/robots.txtatclient/public/robots.txt - Static generation: Pages are pre-rendered at build time — Google reads real HTML on first crawl
See design_guidelines.md for full design specifications including color palette, typography (Inter), component specs, and animation guidelines.
Key design decisions:
- Slate/navy color scheme with green accent buttons
- Glassmorphism navbar that collapses to a pill on scroll
- Minimal scrolling philosophy — users know what they need, get them to quote fast
- Dark mode disabled (language toggle takes its slot)
- Mobile-first responsive with breakpoints at
sm(640px),lg(1024px)
- Phone: 904-909-0897
- Email: [email protected]
- Address: 11570 San Jose Blvd, Suite 11, Jacksonville, FL 32223
- License: Florida-licensed independent insurance agency
Team: Wilbert Hernandez (President), Elizabeth Hernandez (Agency Operations Manager), David Hernandez (Account Executive), Wilbert Hernandez Jr. (Automation Engineer)