Technology Stack
Marketing site — Vite, React, TypeScript, Tailwind CSS, unframer, Framer, Motion One, Lottie, ESLint, Prettier, Husky, Vercel
Lead funnel — Next.js 15, React 19, TypeScript, Tailwind CSS 4, Zustand, Zod, Framer Motion, Google Sheets API, Resend, iClosed, Cal.com, libphonenumber-js, OGL, Vercel
Overview
Duration: 8/2025 - 1/2026
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.
Architecture
- 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
- The application shell 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.
Key Features
- 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
- Four-step onboarding walkthrough — connect, strategise, convert, scale
- 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
Performance Engineering
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
Craft & Conversion
- 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
Lead Qualification Funnel
Live: apptics-form-iclosed.vercel.app
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.
Funnel Engineering
- 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.