HeliosFlow Platform

Overview

HeliosFlow's own digital platform serves as both the agency's public face and an internal operations hub. Rather than using a template or page builder, we built everything from scratch — using the same methodology and tech stack we use for client projects. The platform is a living portfolio piece that proves our capabilities.

The problem

Most agency websites are either beautiful-but-static (no CMS, content goes stale) or CMS-powered-but-generic (WordPress/Webflow templates that all look the same). We needed a site that: (1) demonstrates real engineering and design quality, (2) lets us update content without code deploys, (3) captures and manages client inquiries from first form to kickoff, and (4) serves as a reference architecture for client projects.

What we built

• •Built the public site with React 19, TypeScript, and Vite 6 — with code-splitting, lazy loading, and PWA support for sub-second page loads.
• •Designed a warm, editorial aesthetic inspired by 500designs — moving away from the generic 'agency teal-and-white' look to something with personality.
• •Created a full admin dashboard with Firebase Auth, featuring inquiry management (with filtering, search, export), project portfolio CRUD, content editing for all homepage sections, and site settings.
• •Built a live design system with shared tokens between public site and admin, plus a visual editor that lets us customize colors, typography, shadows, and radii from the admin panel — with changes reflected on the public site in real-time.
• •Implemented accessibility top-to-bottom: WCAG AA compliance, keyboard navigation, skip-to-content links, semantic HTML, ARIA labels, and prefers-reduced-motion support.

Key features

• Sub-second page loads with code splitting and lazy loading
• PWA support with offline caching and install prompt
• Admin dashboard with inquiry management and CRM features
• Full content management for all homepage sections
• Live design system editor with real-time preview
• WCAG AA accessible with keyboard navigation
• Animated interactions with Framer Motion (respects reduced-motion)
• Firebase multi-site hosting (main + admin subdomains)
• Row-level Firestore security rules (deny-by-default)
• Unit and integration test coverage with full build verification

Results

The platform serves as our primary sales tool — every client project starts with 'look at heliosflow.in, this is what we build.' The site and CMS are built on the same stack we use for client projects, and the design system editor means we can evolve the brand without touching code.

Hand-built React 19 site with a Firestore-powered CMS, Firebase Auth admin panel, full CRUD content management, and a live design system editor. Every piece of the stack is the same one we use on client projects.

What we learned

• →Building your own platform with the same rigor as client work is the best portfolio piece — it shows process, not just output.
• →A design system with runtime customization adds upfront complexity but pays for itself in maintenance flexibility.
• →Firestore security rules are the most underrated feature of Firebase — they're your backend validation layer.

Stack