James Allman / JA Technology Solutions LLC
How This Site Was Built
This site is a working example of the kind of practical, maintainable, and well-engineered software I build for clients. Here is what it is made of and why.
Front End
The site is built with React 18 and TypeScript, bundled by Vite 5. There is no CSS framework — all styling is plain CSS using custom properties for light and dark theme support. Icons are from lucide-react with custom SVGs for platform logos.
The choice to avoid heavy frameworks like Next.js or Gatsby was intentional. This site does not need server-side rendering on every request, complex routing, or a CMS. A simpler stack means faster builds, fewer dependencies, less surface area for problems, and a codebase that is easy to understand and maintain.
The bundle is split using Vite manual chunks and React.lazy with Suspense for code-split loading. Interactive components — tools, demos, charts — are loaded on demand so the initial page load stays fast. A hydration-safe mount guard pattern prevents mismatches between server-rendered HTML and client-side lazy components. If a deploy invalidates cached chunks, a per-chunk auto-reload handler detects stale imports and refreshes the page transparently.
Pre-Rendering and SEO
Every page is rendered to static HTML at build time using ReactDOMServer — over 100 pages including site pages, insight articles, standalone tool pages, tool category landing pages, standalone demo pages, and the scheduling page. The build script injects page-specific titles, meta descriptions, canonical URLs, Open Graph tags, and structured data into each HTML file. The browser then hydrates the static HTML into an interactive single-page application.
Structured data varies by page type: ProfessionalService for the organization, SoftwareApplication for each free tool (with pricing marked as free), Article with image for insight articles, and FAQPage for pages with FAQ sections. The sitemap is auto-generated at build time with priority weighting by page type.
This gives you the best of both worlds: search engines and social media platforms see fully rendered content immediately, while visitors get fast, seamless client-side navigation after the initial page load.
Hosting and Infrastructure
The site runs on Cloudflare Pages — not a traditional web server, but a global edge network. Every page is served from the Cloudflare data center closest to the visitor, whether they are in Austin, London, or Tokyo. There is no origin server, no load balancer, and no scaling configuration. The infrastructure handles traffic spikes the same way it handles a single visitor.
Server-side logic — the contact form, chat API, scheduling, visitor notifications, and error reporting — runs as Cloudflare Pages Functions, which are serverless workers that execute at the edge alongside the static content. They start in milliseconds, scale automatically, and cost nothing when idle. Chat sessions, scheduling configuration, and support tickets are stored in Cloudflare KV, a globally distributed key-value store with single-digit millisecond reads. File attachments are stored in Cloudflare R2 object storage.
Cloudflare also provides automatic DDoS protection, bot mitigation, and TLS encryption without any additional configuration. The site sits behind the same network that protects some of the largest websites in the world. Static assets are cached globally with content-addressed filenames, so returning visitors load updated content instantly while unchanged resources come from cache.
The result: the site loads fast from anywhere, stays online through anything, and costs almost nothing to operate. No servers to patch, no infrastructure to monitor overnight, no capacity planning. This is the kind of deployment architecture I recommend to clients who want their systems to be reliable without being complicated.
Ask James
The Ask James chat feature is powered by the Claude API (Anthropic). A Cloudflare Pages Function receives visitor messages, calls the Claude API with a system prompt containing site content and business context, and returns the response. Chat sessions are stored in Cloudflare KV with a 24-hour TTL.
The assistant qualifies leads by collecting visitor contact information during the conversation. Every message exchange is sent to Slack in real time for awareness, and a full transcript is emailed via Fastmail SMTP when the chat ends.
Phase 2 adds operator direct replies: the business owner can reply directly to visitors through Slack threads. Direct replies appear in the visitor's chat labeled as 'James' with distinct styling. The AI stops responding during operator takeover. Slack commands control the flow: /hint for private AI guidance, /auto to return control to the AI, and /end to close the session with a closing message. The widget polls for new messages every five seconds.
Contact Form
The contact form submits to a Cloudflare Pages Function that validates the input and sends the message via Fastmail SMTP using the worker-mailer library. Bot protection uses a four-layer defense-in-depth approach: a JavaScript challenge token that must be generated client-side, a minimum time check to reject instant submissions, a honeypot field that real users never see, and a Cloudflare Turnstile managed challenge. Turnstile shows an invisible or interactive challenge for suspicious traffic and is verified server-side against Cloudflare's siteverify endpoint. All four layers return 200 OK on failure to avoid revealing the protection mechanism to bots. No third-party form service, no branding, no data stored outside of email.
Free Tools
The site includes a catalog of free browser-based tools for anyone who works with enterprise systems — developers, data engineers, finance and treasury teams, integration specialists, and technical decision-makers. Most tools run entirely in the visitor's browser — no data is sent to a server. Tools cover data formats (EDI, NACHA, BAI2, OFX, SWIFT MT, ISO 8583, HL7, FHIR), format conversion (XML, JSON, YAML, CSV, Excel, fixed-width, delimiters), IBM i and mainframe (EBCDIC, packed decimal, DDS, BMS, COBOL copybook), business operations (margin/markup, fiscal calendar, business days, depreciation, check digits), networking and DNS diagnostics (subnet math, IPv6, DNS lookup, DNS propagation checking, reverse DNS with FCrDNS verification, DNSBL checks against 12 public blacklists, ASN lookup via Team Cymru, MAC vendor lookup, email authentication, WHOIS, HTTP header and security audit, and SSL certificate history via Certificate Transparency logs), data profiling, and developer utilities (regex, SQL formatting, cron expressions, JWT decoding, hashing, UUID generation, and more). A handful of tools that need to reach third-party services (WHOIS, HTTP header inspection, SSL cert history) run through server-side Pages Functions with an aggressive abuse-protection stack — Cloudflare Turnstile, per-IP and global rate limits, SSRF blocklists covering private IP ranges and cloud metadata endpoints, DNS-rebinding defense on every redirect hop, and a kill-switch env var for emergency shutdown.
Each tool has its own standalone page with dedicated SEO metadata, SoftwareApplication structured data, and a pre-rendered HTML snapshot for search engine indexing. The tools catalog supports category filtering and text search, with an action bar on each tool page providing share, copy link, and bookmark functionality. All tool components are lazy-loaded and code-split — they only download when a visitor opens the tool. A file size limit of 50MB on all upload tools protects against browser crashes, with oversized files directed to Ask James for custom automation discussion.
A structured data comparison tool supports key-field joining across datasets, letting users match records by one or more identifier columns and see added, removed, and changed rows with field-level detail. An X12 segment reference provides a searchable dictionary of 43 EDI segments and 27 transaction sets with full element definitions and qualifier code tables.
Interactive Demos
Three interactive demonstrations each have their own standalone page with dedicated SEO: a business intelligence dashboard with editable sample data, chart type selection, and AI-powered analysis; an EDI document viewer showing grocery retail purchase orders and invoices in raw, parsed, and export formats; and a side-by-side modernization comparison showing a legacy green-screen interface alongside its modern web equivalent. The See It In Action catalog at /action links to each standalone page.
Chart rendering uses Chart.js (lazy-loaded). Excel and CSV parsing for the BI demo uses SheetJS. Barcode generation uses JsBarcode and the qrcode library; barcode scanning and decoding uses @zxing/browser, the JavaScript port of the ZXing barcode library. All heavy libraries are code-split so they only load when the visitor interacts with the relevant demo.
Support Ticket System
Existing clients can submit support tickets through a modal-based flow. The system validates the submitter's email against client patterns stored in Cloudflare KV, collects priority level, subject, and a structured description with optional AI-assisted drafting. Tickets generate a non-sequential reference number, send notification and confirmation emails, and post to Slack. Non-client visitors see a billable notice but can still submit. Rate limited to 5 submissions per IP per hour.
File attachments are supported via Cloudflare R2 object storage. Clients can drag and drop files, browse to select them, or paste screenshots directly from the clipboard. Up to three files per ticket, 10MB each, with type restrictions to images, PDFs, text and log files, spreadsheets, and zip archives. Files are stored under the ticket reference number and trigger a follow-up Slack notification and email when attached. Validation runs on both client and server.
Scheduling
The site includes a built-in scheduling system that replaces third-party booking services. Visitors can book phone consultations directly on the site, with availability pulled in real time from the Fastmail calendar via CalDAV. Available time slots are generated based on configurable rules — bookable days, hours, slot duration, buffer time between meetings, minimum lead time, and booking window — all stored in Cloudflare KV for adjustment without redeployment.
Booking creates a calendar event via CalDAV, sends confirmation emails with ICS calendar invites to both parties, and posts to Slack. Visitors receive unique token links for cancellation and rescheduling. A five-minute availability cache in KV keeps the page responsive without hammering the calendar server.
Content and Publishing
All page content, article content, and glossary definitions are stored as TypeScript data files — no CMS, no database, no external content service. This keeps the content close to the code, version-controlled in Git, and deployable as a single unit.
Insight articles support date-based publishing. Articles with a future date are automatically excluded from the listing, sitemap, and pre-rendering until the date arrives. A GitHub Actions workflow triggers a Cloudflare Pages deploy every Monday and Wednesday morning, so queued articles go live automatically on a twice-weekly cadence.
The sitemap is auto-generated at build time from the content files. Every page, article, tool, demo, and tool category also gets a branded Open Graph share card auto-generated by a canvas-based build script — over 100 cards in total. The full set is browsable as a visual site index at /site-index.
Glossary Tooltips
Technical and industry-specific terms throughout the site are automatically detected and highlighted with a dotted underline. Hovering or tapping a highlighted term shows a plain-language definition. The first occurrence of each term per page is highlighted; subsequent occurrences are left plain to avoid visual noise.
Newsletter
The site includes a self-built newsletter system — no third-party email marketing service, no branding, no data shared outside the site. Subscribers choose their preferred frequency: every article, weekly digest, monthly summary, or announcements only. Subscriber data is stored in Cloudflare KV, and emails are delivered through Fastmail SMTP.
Privacy-forward analytics track email opens (transparent pixel) and link clicks (redirect tracking) as Plausible events — providing aggregate engagement data without building personal profiles. Every email includes a one-click unsubscribe link.
Analytics and Monitoring
The site uses Plausible Analytics, a privacy-friendly service that does not use cookies and does not collect personal data. Custom events track contact form opens, chat sessions, tool usage, navigation patterns, CTA visibility, glossary interactions, newsletter engagement, and outbound clicks. Analytics are proxied through the site's own domain as a first-party script and event endpoint to avoid ad blocker interference.
Slack notifications are separated into four dedicated channels via the Slack Bot API: visitor alerts, chat conversations, business notifications (contact form, support tickets, newsletter, scheduling), and errors. Visitor notifications are enriched with Cloudflare metadata (city, region, country, network). Chat messages stream with threaded replies per session, and an operator hint system lets the human operator guide the AI's responses.
Error notifications cover 404s, server errors, client-side JavaScript exceptions, and unhandled promise rejections. Scanner and bot traffic is filtered at the middleware level using pattern matching against 80+ known probe paths and file extensions, with rate limiting per IP to prevent alert flooding. Slack's own link expander is suppressed to avoid notification chain reactions.
Theme Support
The site supports light and dark themes using CSS custom properties. The theme preference is persisted in localStorage, respects the system prefers-color-scheme setting, and initializes before React renders to prevent any flash of the wrong theme.
Error Handling
Invalid URLs are handled by a custom 404 page styled as a terminal window, matching the site's dark theme with light mode support. The page displays the requested path, a friendly message, and navigation links back to useful areas of the site. Cloudflare Pages serves it automatically for any unmatched route.
Server-side middleware intercepts all 404 and 500 responses. Scanner and bot probes — requests for PHP files, WordPress paths, database tools, common exploit vectors, and other patterns that have no relevance to a static site — are silently dropped using a filter of over 80 path patterns and file extensions. Legitimate 404s are reported to Slack with the requested path, referrer, IP, and user agent, rate-limited to three notifications per IP per hour to prevent alert flooding during scans.
Testing
The project includes a comprehensive automated test suite built on Vitest with over 1,100 tests across 41 test files. Coverage spans the scheduling system (CalDAV helpers, iCalendar parsing, ICS generation, slot availability, conflict detection), every tool parser on the site (BAI2, HL7, FHIR, OFX, SWIFT MT, ISO 8583, EDI, NACHA, SIL, COBOL copybook, DDS, BMS, XML, YAML, CSV/delimiter, SQL, cron, color conversion, markdown, fixed-width, JWT, margin, fiscal calendar, business days, depreciation, check digits, packed decimal, file conversion, data profiling), SEO validation (title lengths, description lengths, duplicate slugs across all pages, articles, tools, and demos), glossary data integrity, and shared infrastructure (scanner path filtering, email pattern matching, reference number generation).
The Cloudflare Functions directory is type-checked alongside the client code using a dedicated tsconfig with @cloudflare/workers-types — type mismatches in API endpoints are caught at build time. The GitHub Actions deployment pipeline runs the full test suite before every scheduled publish. If any test fails, the deploy is blocked. The entire suite runs in about one second.
Continuous Integration
Every push and every pull request runs the full build and test suite through GitHub Actions. TypeScript compilation, Vite bundling, static pre-rendering, and the entire test suite all have to pass before anything reaches production. The same pipeline validates my own work and automated dependency updates alike — there is no path to production that skips verification.
Dependabot monitors npm dependencies and opens pull requests weekly. Patch updates are grouped into a single PR to keep the noise down, while minor and major version bumps get individual PRs so I can review breaking changes properly. CI runs on each Dependabot PR automatically, so a passing patch group can be merged with confidence in a few seconds.
On the local side, a sync script pulls the latest main branch, rebases the working branch, and installs updated dependencies in one command. A post-checkout git hook handles the common case automatically — whenever a branch switch changes the lock file, it runs the install without being asked. No extra tooling dependencies, just shell scripts and built-in git configuration.
Development Philosophy
Every decision on this site follows the same principles I apply to client work: choose the simplest tool that solves the problem, avoid unnecessary dependencies, favor long-term maintainability over short-term convenience, and build things that are easy to understand, support, and extend.
The result is a site that loads fast, ranks well, works on every device, costs almost nothing to operate, and can be maintained by anyone who reads the code. Some might call that a unicorn. I just call it good engineering.
If any of the technology on this page sounds like something your organization could benefit from — whether it is edge deployment, serverless architecture, automated workflows, or simply a system that runs well without constant attention — I handle the technical details so you do not have to. That is the work I do.