--- title: React + Cursor + Vercel + Supabase Stack type: article created: '2025-11-07' updated: '2025-11-07' source_docs: - raw/2025-11-07-weekly-end-of-week-call-w-melissa-100085399.md tags: - tech-stack - react - cursor - vercel - supabase - wordpress - ai - development - website layer: 2 client_source: null industry_context: null transferable: true --- # 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 [[meetings/2025-11-07-weekly-end-of-week-call-w-melissa|2025-11-07 weekly ops call]], 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: | Tier | Platform | When to Use | |------|----------|-------------| | Standard | WordPress | Simple marketing sites, blogs, straightforward service pages | | Complex | React + Cursor + Vercel + Supabase | Custom features, complex UX, booking/scheduling, data-heavy applications | 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 [[wiki/operations/sops/website-sop|Website SOP]] 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 - [[wiki/knowledge/website/wordpress-standard-stack|WordPress Standard Stack]] - [[wiki/operations/sops/website-sop|Website SOP]] - [[meetings/2025-11-07-weekly-end-of-week-call-w-melissa|2025-11-07 Weekly Ops Call]]