Optivest Price Calculator SPA
WordPress React single page app with secured API data feeding a price calculator inside the existing site.
Single Page Apps | Cape Town
I build single page apps
that run entirely in your browser.
For businesses that need a focused tool, not a full platform. Three shapes: browser-only when the data should stay on the device, API-connected when the workflow needs live data, and platform-embedded inside WordPress, WooCommerce, Shopify or a CRM when the business already has a system. 9 years building SPAs since 2017, with eight shipped tools you can use right now as proof.
9 years
Building SPAs since 2017
8
Shipped tools you can use today
2-10 weeks
Typical SPA timeline
3 lanes
Browser-only, API-connected, embedded
When This Is the Right Service
When a single page app is the right shape
Most software work falls into platforms or stacks of plugins. Single page apps are the middle: one focused workflow, delivered as a browser-only tool, an API-connected interface, or an embedded screen inside the platform the business already uses.
Productise the spreadsheet
The calculator, the estimator, the comparison sheet that everyone keeps a copy of. Make it a tool the team can use without training. The spreadsheet stops being the documentation; the tool itself does the job.
Embed in an existing site
Drop it into your WordPress, Shopify, Webflow or Next.js site at a tools path, shortcode, page section, or admin screen. Keep it browser-only when possible; connect it to APIs when the workflow needs live data.
Free tool as a lead magnet
A public free version drives search traffic and demonstrates expertise. An internal version with private data serves your team. Both are single page apps, built once.
Browser-only POPIA posture
When the workflow fits the browser-only lane, client data does not leave the device. Useful for legal, medical, financial and brand-team operators where compliance posture matters. Backups are JSON files you control.
The Problem
For businesses that need a focused tool, not a platform.
Most buyers asking for "custom software" are choosing between a SaaS subscription with per-seat fees, a stack of plugins held together with effort, and a full custom platform that may be overkill. Single page apps are a fourth option: one workflow done well in a focused interface.
The Solution
Purpose-built. Not patched together.
The page you are reading is the offer. The eight tools at /tools are public proof of the browser-only lane. The client projects below show the API-connected and platform-embedded lanes. When you outgrow what a single page app can do, the upgrade path is Custom Platform Applications.
What I Build
Single page app shapes I have shipped
Form-rich workflow apps
Multi-section forms with live preview, multi-project workspaces, browser-local persistence, PDF export and JSON backup. The app does the work; the user fills in the inputs.
Typical work: Examples: Free South African Billing App, Free Payslip Generator. Stack: Next.js + IndexedDB + localStorage + browser print.
See the Billing App›Compute-heavy calculators
PERT three-point, weighted, parametric, analogous and fixed estimation methods. Risk register with probability and impact. Amortisation tables. Apples-to-apples comparison from published inputs.
Typical work: Examples: Free Project Estimator, Compound Interest Calculator, Payment Gateway Fee Comparator.
See the Project Estimator›Visual editors with drag-and-drop
Section / column / block trees with sortable behaviour, undo and redo, inline property panels, and a custom block-tree-to-output compiler. The user edits visually; the tool emits the right output format.
Typical work: Example: Email Signature & Template Generator with the drag-and-drop Designer. Stack: @dnd-kit + custom in-browser HTML compiler.
See the Email Signature Designer›Lightweight utilities
Single-purpose tools that do one thing in one screen. URL builders, QR generators, link shorteners, share-link generators. Often the right shape for embedding inside an existing marketing page.
Typical work: Example: PayPal.Me Link Generator with QR code and WhatsApp / email share.
See the PayPal.Me Generator›Single page apps for WordPress
Standalone calculators, configurators, estimators, intake forms and admin screens hosted on a tools path or embedded inside WordPress. Delivered as a small plugin, static page bundle, shortcode app or custom admin view.
Typical work: Stack: React + WordPress REST API or custom PHP API + shortcode delivery + plugin packaging. Browser-only when local state is enough; API-connected when the workflow needs data or write-back.
WordPress Expertise›Single page apps for WooCommerce
Product selectors, configurators and pricing tools that help the shopper before they reach cart, plus focused admin or operations screens when WooCommerce needs one custom workflow.
Typical work: Stack: React + WooCommerce APIs + shortcode or page-template delivery. Read-only for simple selectors; API-connected for orders, pricing logic, ERP sync or write-back.
WooCommerce Services›Single page apps for Shopify
Custom calculators, comparison tools, ROI tools, configurators and customer-facing workflows delivered as a Shopify page section, theme block, static page or embedded React app.
Typical work: Stack: React + Shopify APIs or a custom Node API + theme section / page section delivery. Storefront-only when simple; API-connected when the workflow needs live data or write-back.
Shopify Expertise›Looking for the Cape Town local page?
Cape Town role and locality page for single page app work. Local-intent searches, in-person scope calls if useful, same nine years of SPA work framed for a Cape Town buyer.
Typical work: Best entry point if you are searching for a Cape Town single page app developer specifically.
Single Page App Developer Cape Town›Looking for the national page?
National service page for single page app work across South Africa. Remote delivery as the default, ZAR pricing, POPIA-friendly browser-only tools where the workflow allows it.
Typical work: Best entry point for South African operators outside Cape Town, or for buyers searching nationally.
Single Page App Developer South Africa›Why This Works
Why a focused SPA works for one business workflow
The data model matches the job
Browser-only SPAs keep data in IndexedDB or localStorage. API-connected SPAs use a server or third-party system as the source of truth. Embedded SPAs follow the host platform rules.
The platform stays in place
A focused SPA can sit inside WordPress, WooCommerce, Shopify, a CRM or a static tools path. The business gets the missing workflow without a full platform rebuild.
Honest scope
A single page app does one workflow well. It is not a multi-user platform. The page tells you that up front so the build matches the buyer expectation. When you outgrow the shape, the upgrade path is Custom Platform Applications.
Projects
Eight shipped single page apps as proof
Next.js | IndexedDB | localStorage | browser-print PDFFree South African Billing App
Multi-project workspace for invoices, quotes and credit notes. Logo upload, reusable client and item libraries, browser print to PDF, JSON backup with validation on import.
Open the Billing App›
Next.js | IndexedDB | UIF compute | A4 PDFFree South African Payslip Generator
BCEA Section 33 payslip information with statutory UIF calculation against the SARS monthly UIFable-income ceiling. PDF and JSON backup. Built for South African small employers.
Open the Payslip Generator›
Next.js | PERT compute | gantt rendering | A4 PDFFree Project Estimator
PERT three-point, weighted, parametric, analogous and fixed methods. Risk register with probability and impact. Working calendar with weekends and public holidays. Milestone payment schedule, gantt timeline, printable A4 PDF estimate.
Open the Project Estimator›
Next.js | localStorage | scenario computeFree Profit Margin Calculator
Margin, markup, and pricing analyzer with VAT, sales tax, landed cost, and scenario compare. Computed in the browser. For micro to large businesses pricing products or services.
Open the Profit Margin Calculator›
Next.js | @dnd-kit | custom HTML compiler | IndexedDBEmail Signature & Template Generator
Sixteen signature layouts, ten branded email templates, ten disclaimer templates including a POPIA notice, and a drag-and-drop Designer for fully custom email layouts. Custom block-tree-to-email-safe-HTML compiler I wrote because off-the-shelf engines kept silently bailing.
Open the Email Signature Designer›
Next.js | computed comparison | published inputsPayment Gateway Fee Comparator
Yoco, iKhokha, Payfast, Peach, Ozow, Paystack, Zapper, SnapScan and Shopify, side by side, from published inputs. Apples-to-apples pricing comparison without the SaaS pricing-page games.
Open the Comparator›
Next.js | amortisation compute | SVG chartCompound Interest Calculator
Loan repayment breakdown with service fees, finance costs, monthly amortisation tables and an interactive graph. Stateless; nothing persists between sessions.
Open the Calculator›
Next.js | QR generation | clipboard sharePayPal.Me Link Generator
Build a PayPal.Me payment link from a handle, an optional amount and currency. QR code generation. Share by WhatsApp or email.
Open the Generator›Client SPAs
Client single page apps already shipped (API-connected and embedded)
Eight client SPAs in production. The tools above are the browser-only lane; these are the API-connected and platform-embedded lanes.
Optivest MedXpert SPA
Medical aid plan selection inside WordPress. Embedded React SPA, REST API, multi-step decision flow.
Storewell Parking Booking Dashboard
WordPress admin React SPA with custom REST API. Booking dashboard, calendar, role-aware screens.
ICA Custom Course/Product Selector
Public and admin React SPAs inside WordPress with custom MySQL and REST API. Course and product selection journey.
Truly Essential Shopify Credit System
Embedded React SPA in Shopify pages with Node API and ERP integration. Credit logic, customer portal, write-back to ERP.
Proficient Auto VIN Lookup App
JavaScript single page app inside a WordPress plugin. External VIN API lookup for an auto-transport workflow.
School Lookup App
React search single page app inside WordPress, using the Google Custom Search JSON API as the data layer.
Find-a-Surgeon-in-Your-Area App
React search SPA with PHP APIs, SQL, geolocation and map APIs. Practical pattern for "find one near me" tools.
Technology
Production-Grade Stack
These are not theoretical skills — I have shipped production applications with all of them.
Stack
Technologies I Use
ReactNext.jsTypeScriptIndexedDBlocalStorage@dnd-kitWordPress REST APIWooCommerce APIsShopify APIsWordPress shortcode deliveryShopify theme section / page sectionPostgreSQL (when SPA needs a thin API)Node.js (when SPA needs a thin API)Static hostingBrowser print to PDF
The Practical Frame
A single page app is the version of "custom software" that ships in weeks, not months.
Most "do you build software" conversations end in "let me write you a proposal for a six-month project". A single page app is the smaller, faster answer when the workflow is focused. 2 to 10 weeks depending on whether it is browser-only, API-connected, or embedded. The eight tools at /tools are the public receipts.
Process
How It Works
1
Discovery first
A 25-minute call. We confirm the workflow, the input, the output, the data lane (browser-only, API-connected, or embedded), and the timeline. That is enough to scope and quote in writing.
2
Scope and price in 48 hours
Written proposal: scope, output format, storage, browser support, timeline, fixed price. No estimate-then-overrun. The price you sign is the price you pay.
3
Build in 2 to 10 weeks
Static deployment for browser-only tools, or API/platform deployment notes for connected work. Source handed over with a written manual. Your repository, your hosting, your team. When you outgrow what a single page app can do, the upgrade path is documented.
Timeline
Typical Engagements
Most single page app projects fall into one of these three buckets:
- Productise an internal spreadsheet: a calculator, estimator or comparison sheet that the team uses weekly. Build cost: middle band.
- Embed a free tool inside an existing site: drives search traffic, demonstrates expertise, captures buyer-intent. Build cost: lower-to-middle band.
- API-connected or embedded workflow: WordPress, WooCommerce, Shopify, CRM, ERP or custom API screens where live data or write-back matters. Build cost: middle-to-upper band.
Direct Access
You do not need a generalist selling a six-month build.
You need someone who has shipped eight of these in public, can scope-and-quote in writing, and will hand over source code you actually own. 9 years building SPAs since 2017.
FAQ
Frequently Asked Questions
What is a single page app, in plain terms?
A focused web app that loads a React or Next.js interface once, then updates the screen without full page reloads. It can be browser-only, connected to an API, or embedded inside an existing platform such as WordPress, WooCommerce, Shopify or a CRM.
How long have you been building single page apps?
9 years. I have been building production single page apps since 2017, across React, Next.js and earlier-generation SPA stacks. The eight shipped tools at /tools are the most recent body of public work.
How is this different from Custom Platform Applications?
Custom Platform Applications are full-stack, multi-user systems with a server, database, accounts and operational workflows. Single page apps are focused interfaces for one workflow. They may be browser-only, API-connected, or embedded in an existing platform. SPA scope is one screen or workflow; platform scope is a full operating system for the business.
Where does the data live?
It depends on the lane. Browser-only SPAs keep data in IndexedDB or localStorage and use JSON export for backup. API-connected SPAs read and write through a server or third-party API. Embedded SPAs follow the host platform data rules.
Can I embed it in my existing WordPress, Shopify or Webflow site?
Yes. A browser-only SPA can ship as static HTML, JavaScript and CSS at a tools path. An API-connected or embedded SPA can also read or write through WordPress REST, WooCommerce, Shopify, CRM, ERP, Node or PHP APIs when the workflow requires it.
How much does it cost?
Typical single page apps ship in 2 to 10 weeks. Browser-only calculators and document tools sit at the lower end. API-connected and platform-embedded SPAs cost more because authentication, integration, testing and error handling matter. The exact price is fixed in writing after a discovery call.
What can a single page app not do?
A single page app is not the right label for a full multi-user operating platform, tenant-wide deployment, per-seat billing product, or real-time collaborative system. Those move into Custom Platform Applications. An SPA can still connect to an API when the focused workflow needs shared data or write-back.
Is it POPIA-friendly?
Browser-only SPAs are the cleanest POPIA posture because client data can stay on the device. API-connected and embedded SPAs need normal POPIA treatment around data flow, access, storage and third-party processors. I separate those lanes clearly during scope.
Can a single page app live on my WordPress site?
Yes. It can ship as a small plugin, static page bundle, shortcode app or admin screen. Browser-only tools can avoid the database. API-connected tools can read or write through WordPress REST or a custom API when that is the actual requirement.
What about WooCommerce?
Product selectors, configurators and pricing tools can read catalog data through WooCommerce APIs. If the workflow needs orders, pricing changes, ERP sync or write-back, that belongs in the API-connected or embedded SPA lane.
What about Shopify?
Storefront tools can run as theme sections, page sections or static pages. Customer portals, configurators and admin-side tools can connect through Shopify APIs or a custom Node API when the workflow needs live data or write-back.
Why not use a marketplace plugin instead of a custom SPA?
Marketplace plugins handle 80% of common cases. The 20% that does not match your buyer's decision tree is where the marketplace fails. A custom single page app models your specific decision tree exactly and looks like your brand. No per-seat subscription. No vendor lock-in.
Can a single page app connect to an external API?
Yes. That is one of the three SPA shapes. The SPA holds the UI; the API holds the data. REST and GraphQL are most common. Shipped examples include the school lookup app (Google Custom Search JSON API) and the VIN lookup app (external API inside a WordPress plugin).
Can a single page app write data to WordPress, Shopify, or a CRM?
Yes. The Optivest MedXpert and ICA selector both write through WordPress REST. The Truly Essential Shopify credit system writes through a Node API into the client ERP. The Storewell parking dashboard writes through a custom WordPress REST API. Write-back SPAs sit in the API-connected or platform-embedded lanes, not the browser-only lane.
Can a single page app be a public SEO lead magnet?
Yes. The eight free tools at /tools are exactly that. They rank for their own keywords and pull leads through to the rest of the site. A free public SPA can later become the paid version of the same tool with accounts and an API.
Can it start browser-only and later become a platform?
Yes. The cheapest path is to start with the smallest useful version of the tool in the browser and add an API and accounts when there is a reason to. The Free Billing App is the public version of that decision. The upgrade path is Custom Platform Applications.
Have a workflow your team is doing in a spreadsheet?
Tell me what your team is doing today. I will tell you whether a single page app is the right shape, what scope band it sits in, and how soon I can ship it. No-obligation 25-minute discovery call. Written proposal in 48 hours.