Overview

Charlotte Wire & Cable Company is a specialty electrical wire and cable distributor that's been operating out of Charlotte, NC since 1993. They needed a modern website that could showcase their product catalog covering 350+ product families and thousands of individual part numbers, let customers search and filter by category and part number, and give their internal team a way to manage everything without touching code. I designed and delivered this end-to-end as a consulting engagement through RapidRoute Solutions. Public-facing site, admin dashboard, product catalog with search, team management, contact forms with email delivery, file uploads for spec sheets and staff photos, and the AWS infrastructure to run it all. The same serverless patterns I use for client infrastructure, scaled to fit a small business budget.

The Stack

The site is built with Next.js 15 using the App Router and deployed to AWS with SST v4. The infrastructure is fully serverless:

• DynamoDB for product and team data
• S3 for spec sheet PDFs and team photos
• Cognito for admin authentication
• SES for contact form email delivery
• Cloudflare Turnstile for bot protection on public forms
• CloudFront as the CDN
• SST v4 for infrastructure-as-code

Everything deploys with a single command. Staging environments get a temporary CloudFront URL, production gets the custom domain with SSL.

Product Catalog

The catalog is the core of the site. Over 2,000 wire and cable products organized across categories like building wire, portable flex, armored cable, instrumentation, tray cable, and more. Each product has a name, category, part numbers, code words, and a downloadable spec sheet PDF. Search is built with denormalized fields in DynamoDB. When a product is created or updated, the API automatically generates lowercase copies of the name, category, part numbers, and code words as searchable fields. The search endpoint scans these fields for matches, and results are cached at two layers: CloudFront edge cache (5 min TTL) and server-side via Next.js unstable_cache with tag-based revalidation (5 min). The initial product catalog was migrated from CSV data using a batch import pipeline that matched spec sheet PDFs to products by filename, handling the full 350+ product family migration in a single run. The public product page uses TanStack Table for sortable, filterable, paginated display with a category sidebar for quick filtering. A quick search component in the header provides autocomplete suggestions as users type.

Admin Dashboard

The admin side is protected by Cognito authentication with JWT verification on every API call. It gives the Charlotte Wire team full control over:

• Products: Create, edit, and delete products. Upload spec sheet PDFs directly to S3 via presigned URLs. Manage part numbers and code words per product.
• Team members: Add and update staff profiles with photos, titles, and bios.
• Admin users: Create new admin accounts via Cognito. New users get an email invitation and set their password on first login.

The upload flow uses a two-step presigned URL pattern: the client requests a signed upload URL from the API, uploads the file directly to S3 (no Lambda proxy needed), then submits the form with the S3 key. This keeps file uploads fast and avoids Lambda payload limits.

Infrastructure as Code

The entire AWS infrastructure is defined in TypeScript using SST: No committed .env files. SST handles DynamoDB table creation, S3 bucket configuration with CORS, Cognito user pool setup, SES domain verification, CloudFront distribution, and IAM permissions scoped to the Lambda functions. The live beta-stage deploy supplies the Turnstile site key and secret explicitly and refuses placeholder, test, empty, or whitespace-polluted credentials before creating resources. Stage-gated resources make beta the active production deployment: it gets the custom domain and SES resources and retains state on teardown. The reserved production stage follows the same rules, charlie retains data without the domain or SES, and disposable development stages clean up after themselves. I compared this larger application with the much smaller portfolio deployment in What SST v4 Gets Right for Full-Stack AWS Applications, including the framework's development loop, stage model, state, secrets, and upgrade boundaries.

Contact & Email

The contact form collects customer inquiries, validates a hostname/action-bound Turnstile token, and delivers accepted submissions through SES. In production, emails come from noreply@charlottewire.com with full DKIM, SPF, and DMARC configuration.

Design

The site uses Tailwind CSS with a custom theme built around Charlotte Wire's brand colors: navy and copper. Shadcn/Radix UI components provide the building blocks for forms, tables, dialogs, and navigation. The design is clean and functional, built for a B2B audience that needs to find products and specs quickly.

Tech Stack

• Next.js 15 (App Router) with TypeScript
• Tailwind CSS and Shadcn/Radix UI for styling and components
• TanStack Table for the product catalog
• Amazon DynamoDB for data storage (with GSI for category queries)
• Amazon S3 for file storage (spec sheets, photos) with presigned URL uploads
• Amazon Cognito for admin authentication with JWT verification
• Amazon SES for transactional email (DKIM, SPF, DMARC)
• Cloudflare Turnstile for public-form bot protection with deploy-time credential guards
• Amazon CloudFront for CDN
• SST v4 for infrastructure-as-code and staging environments