CryptoFlex LLC - Architecture Diagram

Visitors

Browsers, RSS readers, crawlers

Edge / CDN Layer

Vercel Edge Network

Global CDN, auto SSL, edge caching, geo headers

CDN

Vercel Firewall

WAF rules, bot detection, blocked routes (.env, .git, wp-admin)

WAF

HTTPS + Headers

HSTS, CSP, X-Frame-Options, middleware.ts enforcement

TLS

Geolocation

Vercel injects IP country, city, lat/lon into request headers

GEO

Application Layer

Next.js 16 (App Router)

React 19 + TypeScript 5.9 | SSG + ISR + Server Components

Pages & Routes (14 routes + dynamic slugs)

/

Home

/blog

30 MDX posts

/portfolio

Projects

/resources

Media

/analytics

30+ panels

/about

Bio

/guestbook

Entries

API Routes (20+ endpoints)

Analytics API

track, vitals, auth, ip-intel, setup, logout

Comments API

Threaded, subscriber-only, rate-limited

Subscribe API

subscribe, unsubscribe, preferences

Cron Jobs

Weekly digest, rate-limit cleanup

OG Images

Dynamic Open Graph (Edge, JSX)

Shared Middleware

Zod Validation Rate Limiter (DB-backed) HMAC-SHA256 Auth API Timing Email Masking / PII Content-Type Enforcement

Data & Content Layer

Neon Serverless Postgres

Driver: @neondatabase/serverless
Queries: Parameterized SQL (no ORM)

Tables:
• page_views (analytics)
• subscribers (newsletter)
• blog_comments (threaded)
• guestbook_entries
• rate_limits

DATABASE

Git-backed MDX CMS

Blog: 30 MDX posts
Backlog: 4 drafts
Case Studies: planned

Pipeline:
gray-matter → next-mdx-remote
→ remark-gfm → shiki
→ 15+ custom MDX components

CONTENT

Static Assets

/public directory

• Blog images (PNG/JPEG)
• Author headshots
• Company logo
• Interactive HTML resources
• SVG illustrations

Served via Vercel CDN with
Next.js Image optimization

STATIC

External Services & APIs

Anthropic Claude

claude-haiku-4-5
AI newsletter intros

AI

Google Analytics 4

@next/third-parties
CSP whitelisted

GA4

Gmail SMTP

Nodemailer with exponential backoff retry

EMAIL

Vercel Platform

Analytics, Speed Insights, Web Vitals (CLS, LCP, INP, TTFB)

HOST

Vercel Firewall API

Attack status, rules, event logs for dashboard

SEC

GitHub API

chris2ao/cryptoflexllc
Content CRUD, auto-deploy

GIT

Scheduled Jobs (Vercel Cron)

Weekly Digest

Mondays 9AM ET: Fetch posts → Claude AI intro → HTML email → Gmail SMTP to all subscribers

Rate Limit Cleanup

Daily 4AM UTC: Delete expired rate limit records, prune windows older than 2 hours

Frontend UI Stack

React 19

RSC + Hooks

Tailwind v4

OKLch themes

shadcn/ui

NY style

Recharts

30+ charts

Leaflet

Visitor map

TypeScript 5.9 Lucide Icons Shiki (syntax) Fuse.js (search) Sandpack (playground) Geist Fonts clsx + tailwind-merge Zod (forms)

Security Architecture

Auth

HMAC-SHA256, httpOnly cookies, timing-safe compare

Rate Limiting

DB-backed sliding window, 5-60 req/hr per endpoint

Input Validation

Zod schemas all endpoints, parameterized SQL, XSS prevention

Headers

HSTS 2yr, CSP, X-Frame, X-Content-Type, route guards

Testing & Deployment

Vitest + RTL

60+ test files
80% coverage threshold

TypeScript + ESLint

tsc --noEmit (strict)
ESLint 9 core-web-vitals

Vercel Deploy

Auto-deploy on push to main
Preview deploys on PR

At a Glance

193

TS/TSX Files

30

Blog Posts

20+

API Endpoints

40+

Components

60+

Test Files

7

Ext. Services

5

DB Tables

80%+

Coverage