web-appLive

Zaions Portfolio

com.zaions-app

Zaions Portfolio is the company-brand portfolio + content platform โ€” public homepage, a Firestore-backed projects/portfolio directory, blog, an 18-screen admin CMS, and a Radix theme customizer โ€” built on React 19 + Vite 8 + Capacitor 8 + Firebase free tier, with 84 prerendered route shells and a Sentry + native-Firebase analytics stack.

2024-01 โ†’ PresentZaions

At a glance

Category
web-app
Status
Live
Started
Jan 2024
Last updated
2 months ago

Identifier

com.zaions-app

Preview

Take a look before you go

The still below is painted first, then the running site loads behind it โ€” so the dialog is never an empty rectangle waiting on a network round trip. Where a site allows framing the live app takes over; where it refuses, the still stays and says so. Nothing is requested until you press.

Zaions Portfolio, as its brand card renders

About

What this actually is

Two portfolios by one person is a decision that has to earn itself.

The obvious version is one site with a different logo on it. That is cheaper, it is faster, and it produces a document that reads as neither a person nor a company, because the two answer different questions and a page trying to answer both answers each of them halfway.

So this one picks a side. It is built as a company surface and it admits it.

It carries a homepage, a searchable directory of work, a content hub, contact and payment routes, and the full legal pages a business has to have somewhere findable. Behind all of that sits a real content management system rather than a settings screen.

That administration layer is where most of the work went.

Posts, pages, portfolio items, taxonomies, media, payment methods, comments and users each get their own screens. Written out as a list it sounds like scaffolding. In practice it is the difference between a site somebody maintains and a site that quietly stops being true, because content edited in source is content shipped by deployment, and content shipped by deployment eventually is not edited at all.

The architecture underneath is strictly zero cost, and that word is doing real work.

Authentication, the database and hosting sit on free tiers. Uploads go to FilesHub rather than to cloud storage. Local state uses the device's own preferences store. There are no serverless functions anywhere in the design, which is the part that usually surprises people, because functions are the default answer to anything needing a moment of trusted compute.

Removing them costs something real.

Anything genuinely requiring a server that a client cannot be trusted with is off the table, and that is a category with real things in it. What is bought in exchange is a site with nothing to keep alive, no invocation billing, and no vendor whose pricing can move underneath it later. For a brand surface expected to sit there being correct for years, that trade is the right way round.

Discovery was built rather than assumed.

The build emits prerendered route shells with per-page metadata, social cards and structured data, alongside a machine-readable file for readers that want the data rather than the page. A single-page application shows a crawler an empty shell until its JavaScript runs, and a company site nobody can find is an expensive way of having no company site.

It installs as a progressive web app.

An offline shell comes with it. That is a small thing, and it is the honest form of a mobile presence here. No store, no review queue, no account with anybody, and an icon on a home screen for whoever wants one.

One more property is worth naming, because it is the reason the directory is worth building at all.

A searchable directory is a different object from a list of links. It has to hold a shape that new entries fit into without renegotiating, which means the taxonomy is the design decision and the search box is the easy part. Get the categories wrong and every item added afterwards either bends to fit them or quietly sits in the wrong place.

What it cost is duplication.

Every fix that matters to both sites has to be made twice, and the temptation to merge them will come back every time that happens. The answer is the same each time: they are two documents with two jobs, and the cost of keeping them apart is lower than the cost of a page that does not know who it is talking to.

Worth knowing

  • Strictly zero-cost architecture: Firebase free tier (Auth + Firestore + Hosting) with NO Firebase Functions and NO Firebase Storage โ€” uploads route through FilesHub, local state through Capacitor Preferences. A deliberate constraint, not a limitation.
  • 84 prerendered route shells: the Vite build prerenders static HTML per route (so AI crawlers like GPTBot/ClaudeBot/PerplexityBot, which don't run JS, see real content), and a `sitemap` plugin appends 71 portfolio URLs pulled from data โ€” well beyond typical SPA defaults.
  • Data-driven projects directory: `data/projects-data.json` (72 project records) is the seed source; `importProjectsToFirestore.ts` does a smart upsert by `appIdentifier` into `zp_portfolio_items`. This same portfolio-info pipeline feeds that directory.
  • Build-time SEO freshness: `seoFreshnessPlugin` in `vite.config.ts` rewrites `<lastmod>` / `lastBuildDate` on every build, so sitemap/feed dates never go stale.
  • Companion architecture: the corporate-brand sibling to the personal `aoneahsan-portfolio` โ€” corporate vs personal, but sharing the workspace's engineering standards.
  • React Compiler enabled: uses `babel-plugin-react-compiler` 1.0 for automatic memoization on React 19.
  • Audit discipline: Session 5 (2026-05-03) migrated 284 `console.*` calls to a centralized logger and verified clean against banned packages, hardcoded secrets, localStorage, Firebase Storage SDK, and firestore.rules (default-deny + role-gated + length-capped).
  • Two-package repo: the web app and a separate firebase-admin `data-migration-scripts` package (its own `yarn.lock`) coexist; both are dependency-tracked independently on every refresh.

Built with

  • React 19
  • TypeScript
  • Vite 8
  • Radix Themes
  • react-router
  • TanStack Query
  • Firebase
  • CapacitorJS

Key features

What it does, and what that costs to build

Each of these is a capability the stack genuinely provides. None of them is an outcome nobody measured โ€” there is no "cut onboarding by 40%" on this page, because no one measured onboarding.

  • Searchable Firestore-backed projects directory
  • 18-screen admin CMS (posts, pages, taxonomies, media)
  • Full Radix theme customizer
  • 44 prerendered SEO route shells
  • 13+ JSON-LD schema types + llms.txt
  • PWA install + offline shell
  • Strictly zero-cost (no Functions, no Storage)

Screenshots

5 slots, 2 of them filled in

These are designed frames, not pictures. Each one records what belongs in the slot and at what width; the capture itself is taken from the running app. Drawing a fake screenshot here would put an image on the site that no build has ever produced.

Timeline

Still being worked on

  1. Jan 2024

    Work started

    The earliest month on record for Zaions Portfolio.

  2. Sep 2026

    Last change

    Status is completed โ€” 2 months ago. Ongoing, so this row moves whenever something lands.

Questions

Common questions

The questions that actually arrive, answered in the first sentence.

Who built the Zaions site?
Ahsan Mahmood built it, and it is at zaions.com. It is the company-brand counterpart to the personal site, which means one person built both and the second one had to justify existing separately rather than being a copy with a different logo. The admin surface, the content model behind it and the prerendering step are all the same person's work. Nothing here was assembled from a template or handed to anybody else to finish.
Why does a company brand need its own site at all?
Because the audiences are different and the content is different. A personal portfolio answers who somebody is and what they have shipped; a company surface carries a directory, a content hub, contact and payment routes and the full legal pages that a business needs to have somewhere. Merging them produces a page that reads as neither. Keeping them apart costs a second deployment and buys two documents that each know what they are for.
What does the admin side actually manage?
Posts, pages, portfolio items, taxonomies, media, payment methods, comments and users, across a set of dedicated administration screens. That is a content management system rather than a settings page, and building it was most of the work. The alternative is content edited in source and shipped by deployment, which works until the day somebody wants to correct a sentence and finds that correcting a sentence requires a build.
Is it really running with no server code?
Yes, and the constraint is deliberate. Authentication, the database and hosting all sit on free tiers, uploads go to FilesHub rather than to cloud storage, and local state uses the device's own preferences store. There are no serverless functions in the design. That rules out anything genuinely needing a trusted server, which is a real limit, and in exchange there is nothing to keep alive and no bill that grows with attention.
Does the Zaions site work on iPhone?
It opens in any browser, an iPhone's included, because it is a web application first and everything on it is a page. What does not exist is an iOS release: there is no Apple Developer account here and nothing I build has shipped to the App Store. It installs as a progressive web app instead, which puts an icon on a home screen and keeps a shell working offline without asking anybody's store for permission.

Keep looking

More web apps

  • ZT

    ZTools

    com.zaions.ztools

    A privacy-first developer and power-user toolbox covering 20 categories, where the work happens in your browser rather than on someone's server.

    completedFeatured
  • TA

    TaxEase

    com.aoneahsan.taxease

    Tax compliance workflows for filers, with an admin side for staff.

    completedFeatured
  • LI

    LifeWell

    com.aoneahsan.lifewell

    Health and wellness tracking across web and Android.

    completedFeatured
All 23 projects