How I structure a frontend that owns almost no truth
Frontend architecture is not a folder layout or a state library. It is deciding which kind of state each piece of data is, giving it exactly one owner, and making the second owner hard to create.
Ali Pajand
Senior Software EngineerBased in Montreal, Quebec, Canada
I build product systems from the interface down: frontend architecture, design systems, and the APIs behind them.
Nine-plus years building production web applications, most recently in React, TypeScript, and Next.js, mostly on SaaS, analytics, and marketplace products. I own frontend architecture and the standards around it: component APIs, accessibility, rendering performance, and review conventions, written up as design docs, taught through mentoring, and enforced in CI. When a product needs more than the interface, I build the Node.js APIs, data models, auth, and background workers behind it.
- 9+ years
- building production web applications
- Frontend architecture
- component APIs, design systems, accessibility, rendering performance
- Technical leadership
- design docs, mentoring, shared standards, CI quality gates
- End-to-end delivery
- Node.js APIs, PostgreSQL, auth, background workers
Selected Work
Two projects that show the range: one product I own end to end, and one shared frontend system four product surfaces were built on.
- [01] Senior Product Engineer · 2026–Present
LedgerGuardFull-Stack AI Contract Intelligence
A multi-tenant contract-intelligence SaaS I designed and built alone: Next.js App Router product, Node.js/Fastify API, PostgreSQL data model, authentication, billing, and a queue-backed document pipeline.
The hard part wasn't the model call. It was keeping probabilistic extraction from ever becoming confirmed contract data without a human reviewing the evidence.
- [02] Senior Frontend Engineer · 2024–2026
AlwaysGeeky GamesShared Design System & Frontend Standards
Built and owned the React and TypeScript component library four product surfaces were built on, documented in Storybook, while shipping marketplace, authentication, and account workflows in Next.js.
Component APIs, accessibility, TypeScript and code-review conventions, and CI gates that kept the four surfaces from drifting apart.
2 of 7 case studiesView all case studies
[ About ]
How I work
[ 01 ] Start
I started out doing frontend work and kept going deeper into the hard parts of it: component architecture, design systems, accessibility, and keeping dense interfaces fast on the devices people actually use.
[ 02 ] Scope
The scope widened from there. Owning an interface properly means owning what it depends on, so I took on API contracts, data models, testing strategy, CI, and the async workflows sitting behind the screens. LedgerGuard is the clearest version of that: I built the product, the API, the schema, and the queue-backed document pipeline myself.
[ 03 ] Strength
Frontend architecture is still where I'm strongest. What changed is that I can follow a feature past the browser when the product needs it.
[ 04 ] Leadership
Technical leadership, for me, is mostly unglamorous work: making the architecture explainable in design docs before it gets expensive, mentoring engineers on the patterns, cutting accidental complexity, turning one-off patterns into shared ones, reviewing the decisions that are expensive to reverse, and still writing production code.
Experience
6 roles
LedgerGuard
Designed and built a multi-tenant AI contract-intelligence SaaS alone: Next.js App Router frontend, Node.js/Fastify API, PostgreSQL, Redis/BullMQ jobs, and a Python extraction worker, with human review before any extracted value becomes confirmed data.
AlwaysGeeky Games
Built and owned the shared React and TypeScript design system four product surfaces were built on, wrote the design docs for its changes, drove adoption with the engineers building those surfaces, mentored through pairing and code review, and shipped marketplace and authentication flows in Next.js.
Emplifi
Built React, TypeScript, and D3.js analytics dashboards for desktop, embedded, and mobile-webview contexts, profiled and reduced rendering cost on the mobile-webview path, traced production issues with Sentry and Hotjar, and mentored one to two engineers through the formal mentoring program.
ControlTech
Delivered PWAs, dashboards, and workflow-heavy interfaces across concurrent startup products from MVP to production, worked through API contracts with backend engineers, and protected core flows with Jest, React Testing Library, Cypress, Playwright, and CI checks.
Independent freelance projects
Built web applications with Nuxt.js and Vue.js.
Rayvarz Software Engineering Company
UI/UX design, information architecture, and Vue.js frontend work for Rayvarz's financial accounting software and company website.
Education
Master’s Degree, Computer Information Technology
Allameh Tabataba'i University · 2014–2017
Bachelor’s Degree, Engineering/Industrial Management
Allameh Tabataba'i University · 2010–2014
Engineering Capabilities
5 areas
Frontend Architecture
- React
- Next.js App Router
- TypeScript
- Server Components
- SSR and static rendering
- component architecture
- state and data-flow boundaries
- TanStack Query
- Zustand
- Redux
- Vue.js and Nuxt.js
Design Systems & UI Engineering
- Shared component libraries
- component APIs
- Storybook
- semantic HTML
- WCAG and keyboard behaviour
- responsive systems
- Tailwind CSS
- Figma
Full-Stack & Product Systems
- Node.js
- Fastify
- REST and GraphQL APIs
- PostgreSQL
- Prisma
- Supabase Auth and Storage
- Redis/BullMQ background jobs
- Python workers
- Stripe
- Docker
- AWS
- Linux
Quality & Developer Experience
- Jest
- React Testing Library
- Playwright
- Cypress
- GitHub Actions
- CI quality gates
- feature flags and staged rollouts
- code review
- AI-assisted development with Cursor and custom MCP tooling
Performance & Observability
- D3.js
- GSAP
- rendering and paint optimization
- mobile webview constraints
- Web Vitals
- Chrome DevTools profiling
- Sentry
- Hotjar
Tooling & Open Source
Repository audits across CLIs, CI, MCP, and editor skills and plugins, alongside my Agent Readiness Doctor contribution to the GitBot Library. The audit engines use deterministic rules; host clients have their own data handling.
Agent Readiness MCP
Repository readiness and context audits through a local MCP server, published as @alipajand/agent-readiness-mcp 0.1.2.
- Published on npm and in the official MCP Registry
- Three tools for readiness, context findings, and paginated reports; requires Node.js 22.13+ (23.5+ on Node.js 23)
- Read-only, offline scanner with no repository script execution; host clients may send reports to their model provider
Agent Readiness skill and plugins
Integration release 0.1.2 brings the audit engines to a portable skill and Claude Code and Cursor plugins.
- Skill and Claude Code plugin install directly from GitHub; requires Node.js 22.12+
- Named audit commands tested in headless Claude Code and the local Cursor plugin, including denied execution
- Official plugin directory and Cursor Marketplace submissions remain under review in the October 14 publishing record
GitBot Agent Readiness Doctor
A GitBot Library contribution for keeping repository instructions useful.
- Available through GitBot’s in-app Marketplace
- Connects instruction audits to a reviewable maintenance workflow
- Published as open source under the MIT license
agent-readiness-action
GitHub Action v1.2.0 runs agent-readiness-kit and agent-context-doctor on pull requests; published in the Actions Marketplace with the v1 tag.
- Fails below a minimum score or when a pull request lowers the score from the base branch
- Bundles both engines at pinned commits, so nothing is downloaded from a registry at run time
- Hardened for untrusted pull requests: no workflow-command injection and no writes through symlinks
4 of 7 toolsExplore all open-source work
Writing
Notes on frontend architecture, design systems, trustworthy AI interfaces, developer experience, and shipping software that holds up.
These are the closest thing to watching me think: how I reason about architecture, product constraints, data integrity, performance, and where automated systems should stop and a person should decide.
How to prepare integrations for the Anthropic and Cursor directories
What I changed in Agent Readiness 0.1.2 to prepare for directory review: plugin documentation, schema validation, honest failure behavior, coordinated versions, and tests of the installed artifact.
Keeping repository instructions useful with Agent Readiness Doctor
A refactor can leave the code healthy and its instructions wrong. How I would use Agent Readiness Doctor to make instruction maintenance part of the development workflow.
[ Contact ]
Open to new work
Use this for a role, contract work, or a specific technical problem you want a second opinion on. Hiring managers and technical interviewers: happy to go deep on any case study here.
[ Next step ]
Let’s talk
Open to senior software engineer, senior frontend, and senior full-stack roles in Montreal or remote within Canada. See what I'm working on now.