Case Study

FreedomBooks

FreedomBooks markets an AI-native bookkeeping product. The home page hero walks through a document step by step: upload, reading, classification, then the transaction filed in the accounting system. The product screens and a dashboard mockup show how the work looks in use.

The site has product pages, an integrations page with a detail view for each accounting platform, a services page, a pricing page with monthly plans including a free tier, and a contact page. The contact form validates each field and shows messages that do not reveal why a submission failed.

The project includes its own checks for navigation, content security policy, forms, the sitemap and visual snapshots. These run as part of the project tooling, alongside lint and type checks.

services
Web application
client
Front-end Developer
year
Case Study
design
React 19, Vite 7, TypeScript
Category
Web Applications
5
Screens
React 19Vite 7TypeScriptReact Router 7LenisESLintPlaywright

Overview

Marketing website for FreedomBooks, an AI-native bookkeeping product. It reads documents, understands transactions and keeps accounting systems up to date. The site covers the product, integrations, services, pricing and contact.
FreedomBooks
Built the marketing site for an AI bookkeeping product. The content lives in one file, and the project checks navigation, content security policy and forms on every change.

Progress

What we built
  • Home page with an animated hero that walks a document through to a filed transaction
  • Product, integrations (with a detail view for each), services, pricing and contact pages
  • Contact form with validation and safe error messages
  • Project checks for navigation, content security policy, forms, sitemap and visual snapshots
What's next
  • Confirm the plans and prices with the client
  • Keep the integrations list current
Not built yet
  • The dashboard on the home page is a mockup, not the live product

How it's built

Marketing content has to change safely.

The content lives in one file, and the project checks navigation, content security policy, forms, sitemap and visual snapshots on every change.

Form errors can leak failure details.

The contact form validates input and shows error messages that do not reveal failure details.

  • Animated hero that walks a document from upload to a filed transaction
  • Integrations page with a detail view for each accounting platform
  • Pricing page with monthly plans, including a free tier
  • Contact form with validation, and error messages that do not leak failure details
  • Project tooling checks navigation, content security policy, forms, sitemap and visual snapshots
  • Smooth scrolling with Lenis, kept in step with the page

My Approach

Product & Services
Product pages that explain the document-to-ledger flow in plain steps Services page with a route into the contact form
Integrations & Pricing
Integrations page listing each platform, with a detail view for each Pricing page with plan comparison and a call to action for each tier
Quality & Content
Form validation for work email addresses, with clear messages for each error Checks for navigation, CSP, forms, sitemap and visual regressions