<link rel="stylesheet" href="assets/fonts/inter.css"> Technology Stack, Architecture & Tooling | Viral Patel Studio Skip to main content
Theme

Technology Stack & Engineering Toolkit

This page reflects the current production-oriented stack behind Viral Patel Studio, covering the Angular frontend, secured Express API, content automation pipeline, observability setup, testing layers, and deployment workflow used across recent updates.

Last updated: June 2026 | Angular 22.0.2 | Express 5.2.1 | TypeScript 6.0.3 | Jest 30.1.3

🧱 Frontend Application

  • Angular 22.0.2 : standalone component architecture with lazy-loaded routes and modern framework optimizations.
  • TypeScript 6.0.3 : strict type safety across app code, tooling, and automation scripts.
  • Angular Material 22.0.2 : and Angular CDK 22.0.2: accessible UI components and design-system building blocks.
  • RxJS 7.8.2 : reactive streams for async data handling and app state coordination.
  • CSR-first runtime with SSR build path : current production runtime is client-side rendered while prerender/SSR build paths remain available.
  • Angular Service Worker 22.0.2 : (PWA): background sync, asset prefetch, and data caching groups tuned per resource type.
  • Custom Design System : in-house token-based component library with 5 design-token categories (color, typography, spacing, radius, elevation) and 13 standalone components — all covered by dedicated Jest specs.

🔐 API, Auth & Security

  • Express 5.2.1 : backend API layer for admin workflows, diagnostics, content utilities, and security endpoints.
  • Helmet 8.2.0 : , cors, and cookie-parser: hardened HTTP headers and request controls.
  • csrf-csrf 4.0.3 : double-submit cookie CSRF pattern coordinated with the Angular interceptor; replaces the deprecated csurf library.
  • express-rate-limit 8.5.2 : IPv6-safe rate limiting tuned by endpoint sensitivity and cost.
  • Redis 6.0.0 : refresh-session persistence with controlled fallback strategies for resilience.
  • Admin token hashing : secure hashed token support for privileged API access in production environments.
  • DOMPurify 3.4.8 : all user-facing markdown is sanitized server-side and in the Angular rendering pipeline to prevent XSS.

📝 Content, SEO & AI Workflow

  • Marked 18.0.5 : and gray-matter 4.0.3: markdown parsing and frontmatter extraction for the blog system.
  • Prebuild blog pipeline : `npm run prebuild` transforms markdown content into `src/assets/data/blogs.json` before app builds.
  • @google/generative-ai : AI-assisted content workflows for content drafting and optimization.
  • Ollama : local LLM integration for admin content drafting — model listing, streaming text generation, and token-count metrics via ollama.service.ts.
  • SEO automation : canonical URLs, structured data, Open Graph, Twitter Cards, breadcrumbs, sitemap, `robots.txt`, and `llms.txt` validation.
  • Content quality tooling : metadata checks, internal linking analysis, readability improvements, and keyword-focused validation workflows.
  • Analytics integrations : Google Analytics 4 and Search Console for performance, content, and traffic insight collection.

📈 Observability, Performance & Audits

  • @sentry/angular 10.59.0 : release-aware tracing and runtime error monitoring.
  • Lazy-loaded Session Replay : replay support is loaded on demand to preserve bundle budgets while retaining deep debugging visibility.
  • Lighthouse 12.2.1 : , PageSpeed Insights, and WebPageTest: performance and SEO auditing across release workflows.
  • axe-core 4.12.0 : and Pa11y 9.1.1: automated accessibility checks for WCAG-focused validation.
  • Core Web Vitals & bundle monitoring : LCP, CLS, INP, and bundle-size checks are part of ongoing performance optimization work.
  • Custom CWV services : dedicated Angular services for LCP optimisation, FCP optimisation, and CLS prevention — independent of the web-vitals library to allow fine-grained SSR-aware control.

🧪 Testing & Developer Experience

  • Jest 30.1.3 : and jest-preset-angular 16.2.0: primary unit-testing stack for Angular.
  • @testing-library/angular 19.4.1 : user-centric component testing support.
  • Cypress : smoke, regression, security, and live end-to-end coverage.
  • ESLint 10.4.1 : , angular-eslint 22.0.0, and Prettier 3.8.3: consistent linting and formatting standards.
  • Husky + lint-staged : pre-commit quality gates for safer day-to-day changes.
  • Coverage gates : branches 75%, functions 84%, lines 87%, statements 86% — enforced globally across 216 test suites (4 661 tests).
  • Diagnostics scripts : fast validation for environment health, release readiness, and regression triage.

🚀 Build, Deployment & Workflow

  • Angular CLI 22.0.3 : and Webpack 5.107.2: build system for production app bundles and stats.
  • Route sync + asset generation : production builds sync routes, optimize images, and generate sitemap assets automatically.
  • Docker & VPS support : containerized deployment files for frontend and API runtime environments.
  • Netlify, PM2, and Nginx-ready config : flexible hosting and proxy options already maintained in the repository.
  • Playwright 1.60.0 : and Puppeteer 25.0.4: available for headless E2E and automated accessibility audits.
  • GitHub Actions automation : linting, testing, build validation, SEO checks, and deployment workflows.
  • Current focus : keep bundle sizes in budget, strengthen security flows, and expand release-grade validation.