Next project
Ahad Brothers billing & inventory
ZNova project · Web app · Delivered
Billing and stock control for Ahad Brothers, an educational shop: customer bills, inventory and payments in one SolidJS and NestJS application.
ZNova projectWebsite · 2026
The ZNova website
An SEO-first studio site with 40 service pages, three switchable themes and a headless blog, held to a performance budget on every commit.
Built byAhsan NadeemAbout this project
The challenge
A new studio needed a site that ranks, loads fast on any phone and explains nine service lines in real depth, and a team that can publish insights without waiting on a developer.
The approach
SolidStart on the front and Payload CMS for insights, in one TypeScript monorepo. Every page outside the blog is typed content rendered through a registry of lazy sections, so each page gets its own composition and downloads only the sections it uses. Static pages are prerendered, CMS pages are rendered on the server, and one token-based design system drives three switchable themes.
The outcome
Forty service and sub-service pages, team profiles, projects, FAQs and a CMS-backed insights hub, with structured data, sitemaps, RSS and llms.txt generated from the same content. Performance budgets are enforced on every commit: no route may ship more than 66 KB of JavaScript.
Inside the product.
A look at the screens. Drag the front one aside or use the arrows to flip through.
- znova-website / home page
Home page (1 / 4)
How it's built, layer by layer.
From what people see down to what it runs on, with the stack behind each layer.
znova-website · architecture
Interface
- SolidStart
- Tailwind CSS
- Typed content rendered through lazy, data-driven sections
- Three switchable themes on one token system
- Keyboard-accessible components built to WCAG 2.2 AA
Server
- TypeScript
- Zod
- Static pages prerendered at build time
- Insights and search rendered on the server
- A contact API with validation, a honeypot and rate limiting
Content
- Payload CMS
- PostgreSQL
- Insights, categories, authors and media in a headless CMS
- Schema changes shipped as database migrations
Delivery
- Azure DevOps
- Cloudflare
- Source control and pipelines on Azure DevOps
- Lint, type, unit, accessibility and budget checks on every commit
- Served from the edge
What shipped.
The capabilities that went live, one card each.
40 service pages
Every service and sub-service has its own URL, copy and section mix, built from one shared set of sections.
Three switchable themes
Colour, type and surfaces come from design tokens, so the whole site re-themes without touching a component.
A headless insights hub
Articles, categories and authors live in Payload CMS, so the team publishes without a developer.
SEO in the build
Metadata, JSON-LD, sitemaps, RSS and llms.txt are generated from the same content as the pages.
Budgets as tests
JavaScript and CSS budgets run on every commit, so a page can't quietly get heavier.
Accessible by default
Semantic HTML, visible focus, verified contrast pairs and reduced-motion support on every component.
Decisions that shaped it.
The engineering calls behind the build, and why they were made.
Content as typed data
Marketing copy lives in typed TypeScript objects and only the blog uses the CMS. A broken page is a build error, not a surprise in production, and static pages need no database at all.
A registry of lazy sections
Pages are ordered lists of sections, each loaded on demand. Forty pages share the same parts, yet a page only downloads what it shows.
Server HTML first
Pages arrive fully rendered and only the interactive parts hydrate, which keeps the first paint fast on mid-range phones.
Performance budgets in CI
Every route is measured after each build. Going over 66 KB of JavaScript fails the pipeline, so speed is held, not hoped for.
Got a workflow nobody's tool quite fits?
That's the kind we like. Tell us about it and we'll reply with how we'd approach it.