React + Cursor + Vercel + Supabase Stack

Overview

A modern development stack adopted for complex, custom website and application projects where WordPress falls short. The stack pairs React (frontend framework) with Cursor (AI-assisted code editor), Vercel (hosting), Supabase (database), and Git (version control). It is not a replacement for WordPress — it is a second tier reserved for projects with unusual feature requirements or high customization demands.

The decision to adopt this stack was made in the ^[1], where Mark demonstrated a prototype site and walked through each component.

The Problem This Solves

WordPress works well for straightforward marketing sites, but it struggles when a project requires:

• Custom booking or scheduling logic (e.g., forcing workarounds with plugins like Bookly)
• Complex B2B portals or multi-step user flows
• Precise UI behavior that doesn't map cleanly to available themes or page builders
• Enterprise-grade data handling

When these needs arise, the team ends up fighting the platform — engineering around plugin limitations rather than building what the client actually needs. The React stack eliminates that constraint by working directly in code.

"I could probably code that site and make it do exactly what we want instead of trying to make the plugin work." — Mark Hope

Stack Components

React

• Modern JavaScript framework for building fast, lightweight frontends
• Sites are roughly one-tenth the size of an equivalent WordPress build
• No plugins, no overhead — just compiled code
• Supports headless CMS patterns: content is authored in a separate tool and pushed to the site via template

Cursor

• AI-powered code editor; the primary development interface
• Developer describes desired behavior in natural language; Cursor generates or modifies the code
• Requires precise, technically-informed prompts — vague instructions produce poor results
• Used for ongoing edits post-launch (replaces the Elementor drag-and-drop workflow)

Vercel

• Hosting platform purpose-built for React/Next.js sites
• Handles deployments automatically when code is pushed to Git
• Stores environment variables (API keys, webhook secrets) securely outside the codebase
• Provides a deployment history with rollback capability

Supabase

• Enterprise-grade SQL database (PostgreSQL under the hood)
• Described via natural language + SQL; Cursor assists with schema generation
• Handles scale that WordPress's native database cannot — millions of records, instant queries
• Used for any project requiring structured data storage (user accounts, submissions, product catalogs, etc.)

Git

• Version control for all code
• Every change is committed with an AI-generated description of what was done
• Supports branching: new features are developed on isolated branches and merged into the main branch only after testing
• AI can search commit history to locate previous versions of specific functionality

Development Workflow

1. Define requirements — Describe the site's purpose, features, and reference designs
2. Scaffold in Cursor — AI generates an initial wireframe/structure; developer iterates with prompts
3. Connect to Figma (optional) — Mockups can be fed directly to Cursor to accelerate build
4. Configure Vercel — Set environment variables, connect Git repo, enable auto-deploy
5. Set up Supabase — Define database schema; Cursor assists with SQL
6. Test — Write code-level tests (e.g., simulate traffic to verify analytics integration)
7. Deploy — Push to main branch; Vercel publishes automatically
8. Maintain — Use Cursor for post-launch edits; commit all changes to Git

"The AI is not good enough that you can just say 'make me a website' and it'll do it well. But if you can talk to it in a way that it understands you, it'll do exactly what you want." — Mark Hope

Two-Tier Website Strategy

This stack creates a deliberate two-tier system for website projects:

The choice of platform should be made at project kickoff, before design begins. Designers should not produce complex, animation-heavy mockups before the build approach is confirmed — the design scope must match the chosen platform's capabilities.

The ^[2] is being updated to include this decision point as a formal step in the kickoff process. See action item assigned to Isalia Ramirez.

Known Limitations

• Editing requires code access — There is no drag-and-drop interface. All post-launch changes go through Cursor and Git. Clients cannot self-edit.
• Steeper learning curve — Developers must understand enough about the underlying technology to prompt Cursor effectively. "Telling your hammer to build a house" — the tool assists, but a skilled human must direct it.
• Not yet fully productized — As of November 2025, Mark is still prototyping and refining the workflow. Teaching this to other developers is a near-term goal, not yet complete.

Real-World Examples

• LaMaurie — Complex site requirements that WordPress/Elementor couldn't cleanly support; identified as a candidate for this stack in retrospect
• Doodle B2B site — Custom portal functionality that would have been cleaner to build in React than to force through a plugin
• Label Check app — Internal tool Mark built using this stack; analyzes FDA compliance for product labels; includes user accounts, subscription billing, team management, and a Supabase-backed ingredients registry

Related

• ^[3]
• ^[2]
• ^[4]