New Portal Architecture Plan

Last Updated: December 11, 2025

Overview

This document outlines the new simplified architecture for the Reformer Platform portals using Cursor Visual Editor. The goal is to make UI/UX updates VERY SIMPLE and easy to control.

Problem Statement

Current Issues

Figma Make + Cloudflare Pages NOT Working - Complex sync workflow unreliable
Dual Portal Complexity - Separate deployments for dash.reformer.la and my.reformer.la
No Visual Editing - Design changes require code edits

Solution: Cursor Visual Editor Approach

Key Insight: Cursor now has a visual editor! This changes everything.

New Workflow

Design in Cursor Visual Editor → Generate Code → Deploy

Benefits

✅ Design and code in one place
✅ Instant visual feedback
✅ No sync delays
✅ Easy UI/UX updates
✅ One tool for everything

Architecture Overview

Unified Portal Application

dashboard/
├── src/
│   ├── App.jsx                    # Main app router
│   ├── components/
│   │   ├── ui/                     # Reusable UI components
│   │   ├── admin/                  # Admin-specific components
│   │   └── portal/                 # Client portal components
│   ├── pages/
│   │   ├── AdminRoutes.jsx         # /admin/* routes
│   │   └── PortalRoutes.jsx        # /portal/* routes
│   └── styles/
│       ├── theme.css               # Unified theme
│       └── components.css         # Component styles

Component Library Strategy

Core UI Components

Create reusable components using Cursor Visual Editor:

Button - Primary, secondary, ghost variants
Card - Container with header, body, footer
Input - Text, email, password, textarea
Sidebar - Navigation sidebar
Header - Page header with title and actions

Location: dashboard/src/components/ui/

Deployment Strategy

Single Build, Multiple Deployments

Keep single codebase, use environment variables for differences:

npm run deploy
# Deploys to both dash.reformer.la and my.reformer.la

Implementation Plan

Phase 1: Component Library (Days 1-2)

Create component library structure
Build 5 core components using visual editor
Document component usage

Phase 2: Portal Refactor (Days 3-4)

Replace hardcoded components
Extract portal sections
Reduce code duplication

Phase 3: Unified Routing (Day 5)

Consolidate admin and client portals
Route-based separation
Single codebase

Phase 4: Deployment Automation (Day 6)

Automate build process
Set up deployment scripts
Environment variable management

Visual Editor Workflow

Design in Cursor Visual Editor - Open component file, design visually
Generate Code - Visual editor generates React code
Test Locally - Run npm run dev
Deploy - Run npm run deploy

Time: ~5 minutes from design to deployed

Next Steps

Review architecture plan
Set up component library structure
Create first component using visual editor
Test workflow end-to-end
Begin refactoring