Two front ends for a Shopify subscription CRM — a long-form marketing site where the design team keeps working in Framer while engineering owns the bundle and the performance budget, and a ten-step qualification funnel that scores prospects, survives abandonment, and books them onto a sales call.
Apptics is an all-in-one platform that turns one-time Shopify shoppers into recurring subscribers — subscription management, payment optimisation, and customer retention behind a single dashboard. Selling it needs two very different front ends, and this project delivered both: a long-form marketing site that explains a fairly technical payments product to non-technical eCommerce founders, and a qualification funnel that turns the resulting interest into booked sales calls.
The site solves a problem a lot of design-led companies have. The design team works in Framer and does not want to stop; engineering needs a real bundle, a real performance budget, and real tooling. The build resolves that instead of picking a side: the Framer project is compiled down to plain React and pulled into a Vite + TypeScript application, so designers keep their workflow and re-sync with one command, while engineering owns routing, loading strategy, bundle size, and deployment.
A single sync command pulls the design project and generates React components — hero, features, benefits, onboarding, case studies, calculator, pricing, team, FAQ, nav, footer
Thin hand-written wrappers around each generated component apply layout defaults through a shared helper, so re-syncing the design layer never clobbers application-level overrides
composes the sections and owns everything the design tool cannot: lazy boundaries, scroll behaviour, and section anchors for the navigation
A clean seam between design and code — the generated directory is disposable and regenerable; all custom logic lives outside it
That seam is the whole value. Without it, a design-tool workflow means either shipping a hosted export you cannot optimise, or forking the design into code and watching the two drift apart within a month.
Hero and value proposition — "Turn Your Shoppers into Subscribers", a single unambiguous promise above the fold with a primary CTA
Feature showcase — subscription management, custom checkouts and upsells, real-time revenue analytics, each with an animated in-page mockup
Benefits grid — predictable recurring revenue, higher average order value, live revenue insights, automated billing, fast setup, failed-payment recovery
Comparison table — Apptics against competitors across roughly twenty capabilities, from chargeback mitigation and MID routing to multi-currency, decline salvage, fraud prevention, tokenisation, and plan A/B testing
Interactive ROI calculator — prospects estimate their own potential recurring revenue before they ever talk to sales, which is the single strongest qualifier on the page
Social proof, pricing tiers, team and FAQ — closing the objections that block signup: cost, compliance, supported niches, differentiation
This is where owning the code pays for itself — a hosted design-tool export gives you none of it:
Route-level code splitting — every section below the fold is a lazy import, so the initial bundle carries only the navigation and the hero
Viewport-triggered mounting — a custom lazy-load component mounts each section just before it scrolls into view, with a placeholder holding the layout so nothing shifts
Self-hosted fonts vendored into the repository and served from the same origin, removing a third-party round trip from the critical path
Static build on a global edge network — immutable, fingerprinted assets
Scroll-driven narrative — sections ordered as a funnel: problem, product, proof, price, so the page reads as one continuous pitch rather than disconnected blocks
Motion as explanation — dashboard mockups, revenue charts, and checkout flows animate on scroll to show the product working instead of describing it
Purpose-built breakpoints — distinct layouts for desktop, tablet, and mobile rather than one fluid layout that degrades
Repeated conversion points — "Book a Call" and "Calculate My MRR" recur at every scroll depth, so intent is never more than one screen from an action
Full social metadata with a dedicated preview image, semantic heading hierarchy, and a complete icon set
Enforced quality gates — TypeScript throughout, ESLint with React, hooks, and a11y rule sets, and formatting plus linting on every commit
The second surface is a separate Next.js application that replaces the usual "contact us" box. Rather than one intimidating form, it asks ten questions one screen at a time, so each step is a single low-effort decision and the visitor is progressively committed by the time contact details are requested:
Intent — a predictable way to scale revenue
Pain — what is blocking growth right now, multi-select
Contact — name, email, and an international phone field with country detection
Business model, monthly revenue, and monthly ad spend — the qualification signals that decide whether a prospect is worth a call
Payment processing needs and type of help wanted — routing to the right conversation
Question labels live in one module that is the single source of truth for the on-screen copy, the spreadsheet column headers, and the notification email — so a reworded question can never desynchronise the data from the form.
Abandonment capture — a dedicated hook flushes whatever has been answered so far on page exit using a transport that survives unload, where a normal request would be cancelled. A half-finished funnel still produces a usable lead instead of nothing, which in practice is a large share of total lead volume
Exactly-once writes — that hook guards against duplicates at both instance and module level, and the final step marks the submission as already recorded, so a visitor who completes the funnel and then closes the tab is written once, not twice
Booking webhook — the scheduling callback is received, its payload shape normalised, the meeting link and invitee extracted, the matching submission looked back up by email, and the team emailed the meeting link alongside the prospect's full answers, so whoever takes the call already has the context
Spreadsheet as the datastore — used deliberately in place of a database. A non-technical sales team reads, sorts, and annotates leads in a tool they already use, with no admin UI to build or maintain
State and validation — answers held across steps in a client store, validated per step rather than in a single submit-time avalanche of errors
Live variants — the funnel ships as several parallel deployments differing in booking provider and positioning, each with a paid-traffic counterpart, so copy and flow can be tested against real traffic without branching the product
Together these two surfaces show the full path: the iteration speed of a visual design tool combined with the performance and tooling guarantees of a real front-end codebase, and then a funnel that carries that traffic through to a booked call while keeping its data even when the visitor leaves early.