132 lines
8.3 KiB
Markdown
132 lines
8.3 KiB
Markdown
# Execution Plan — React Frontend (SLP Software Marketing Site)
|
|
|
|
## Detailed Analysis Summary
|
|
|
|
### Change Impact Assessment
|
|
- **User-facing changes**: Yes — the entire marketing site is user-facing; net-new capability is the red/purple theme switcher with persisted preference.
|
|
- **Structural changes**: Yes (greenfield) — establishing the whole application structure (Vite + React + TypeScript, Tailwind, TanStack Router, TanStack Query, theming).
|
|
- **Data model changes**: Minor — a small static data model for package/pricing content and a theme-token model; no backend data model yet.
|
|
- **API changes**: None — no backend/API exists yet; TanStack Query is scaffolded but not wired to a real endpoint.
|
|
- **NFR impact**: Yes — Security Baseline extension is enabled and must be assessed rule-by-rule for a static frontend; deployment target (FTP/static hosting) affects routing and build configuration.
|
|
|
|
### Risk Assessment
|
|
- **Risk Level**: Low — greenfield, single static page, no backend, well-defined reference design to copy from.
|
|
- **Rollback Complexity**: Easy — no production system yet; this is the initial build.
|
|
- **Testing Complexity**: Simple — mostly component rendering/visual + a small amount of interaction logic (theme toggle, persistence).
|
|
|
|
## Workflow Visualization
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
Start(["User Request"])
|
|
|
|
subgraph INCEPTION["INCEPTION PHASE"]
|
|
WD["Workspace Detection<br/><b>COMPLETED</b>"]
|
|
RA["Requirements Analysis<br/><b>COMPLETED</b>"]
|
|
US["User Stories<br/><b>SKIPPED</b>"]
|
|
WP["Workflow Planning<br/><b>IN PROGRESS</b>"]
|
|
AD["Application Design<br/><b>SKIP</b>"]
|
|
UG["Units Generation<br/><b>SKIP</b>"]
|
|
end
|
|
|
|
subgraph CONSTRUCTION["CONSTRUCTION PHASE"]
|
|
FD["Functional Design<br/><b>EXECUTE</b>"]
|
|
NFRA["NFR Requirements<br/><b>EXECUTE</b>"]
|
|
NFRD["NFR Design<br/><b>EXECUTE</b>"]
|
|
ID["Infrastructure Design<br/><b>SKIP</b>"]
|
|
CG["Code Generation<br/><b>EXECUTE</b>"]
|
|
BT["Build and Test<br/><b>EXECUTE</b>"]
|
|
end
|
|
|
|
subgraph OPERATIONS["OPERATIONS PHASE"]
|
|
DS["Deployment Setup<br/><b>EXECUTE</b>"]
|
|
MS["Monitoring Setup<br/><b>EXECUTE</b>"]
|
|
PRV["Production Readiness Validation<br/><b>EXECUTE</b>"]
|
|
end
|
|
|
|
Start --> WD
|
|
WD --> RA
|
|
RA --> US
|
|
US --> WP
|
|
WP --> AD
|
|
AD --> UG
|
|
UG --> FD
|
|
FD --> NFRA
|
|
NFRA --> NFRD
|
|
NFRD --> ID
|
|
ID --> CG
|
|
CG --> BT
|
|
BT --> DS
|
|
DS --> MS
|
|
MS --> PRV
|
|
PRV --> End(["Complete"])
|
|
|
|
style WD fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style RA fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style US fill:#BDBDBD,stroke:#424242,stroke-width:2px,stroke-dasharray: 5 5,color:#000
|
|
style WP fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style AD fill:#BDBDBD,stroke:#424242,stroke-width:2px,stroke-dasharray: 5 5,color:#000
|
|
style UG fill:#BDBDBD,stroke:#424242,stroke-width:2px,stroke-dasharray: 5 5,color:#000
|
|
style FD fill:#FFA726,stroke:#E65100,stroke-width:3px,stroke-dasharray: 5 5,color:#000
|
|
style NFRA fill:#FFA726,stroke:#E65100,stroke-width:3px,stroke-dasharray: 5 5,color:#000
|
|
style NFRD fill:#FFA726,stroke:#E65100,stroke-width:3px,stroke-dasharray: 5 5,color:#000
|
|
style ID fill:#BDBDBD,stroke:#424242,stroke-width:2px,stroke-dasharray: 5 5,color:#000
|
|
style CG fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style BT fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style DS fill:#FFA726,stroke:#E65100,stroke-width:3px,stroke-dasharray: 5 5,color:#000
|
|
style MS fill:#FFA726,stroke:#E65100,stroke-width:3px,stroke-dasharray: 5 5,color:#000
|
|
style PRV fill:#4CAF50,stroke:#1B5E20,stroke-width:3px,color:#fff
|
|
style Start fill:#CE93D8,stroke:#6A1B9A,stroke-width:3px,color:#000
|
|
style End fill:#CE93D8,stroke:#6A1B9A,stroke-width:3px,color:#000
|
|
style INCEPTION fill:#BBDEFB
|
|
style CONSTRUCTION fill:#C8E6C9
|
|
style OPERATIONS fill:#FFF59D
|
|
|
|
linkStyle default stroke:#333,stroke-width:2px
|
|
```
|
|
|
|
Text alternative: Workspace Detection, Requirements Analysis and Workflow Planning are completed (green). User Stories is skipped (gray, dashed). Application Design and Units Generation are skipped (gray, dashed) in Inception. In Construction, Functional Design, NFR Requirements and NFR Design are set to execute (orange, dashed border denotes conditional-but-selected), Infrastructure Design is skipped (gray), while Code Generation and Build and Test always execute (green). In Operations, Deployment Setup and Monitoring Setup execute (orange) and Production Readiness Validation always executes (green) as the final wrap-up stage.
|
|
|
|
## Phases to Execute
|
|
|
|
### 🔵 INCEPTION PHASE
|
|
- [x] Workspace Detection (COMPLETED)
|
|
- [x] Requirements Analysis (COMPLETED)
|
|
- [x] User Stories (SKIPPED — single visitor persona, low complexity, no acceptance-criteria ambiguity beyond what requirements.md already captures)
|
|
- [x] Execution Plan (IN PROGRESS)
|
|
- [ ] Application Design - SKIP
|
|
- **Rationale**: No backend services or service-layer design needed. Component decomposition (Nav, Hero, PackageCard, ThemeProvider, etc.) is already outlined in requirements.md and will be finalized during Functional Design.
|
|
- [ ] Units Generation - SKIP
|
|
- **Rationale**: Single, straightforward unit of work (one React frontend application) — no decomposition into multiple units needed.
|
|
|
|
### 🟢 CONSTRUCTION PHASE (single unit: `react-frontend-app`)
|
|
- [ ] Functional Design - EXECUTE
|
|
- **Rationale**: New data models needed — theme/color-token model and static package/pricing content model — plus the component tree and route structure need to be defined before code generation.
|
|
- [ ] NFR Requirements - EXECUTE
|
|
- **Rationale**: Security Baseline extension is enabled and must be assessed rule-by-rule for applicability to a static, no-backend frontend (e.g. HTTP security headers, dependency/supply-chain scanning, Subresource Integrity for Google Fonts CDN links). Browser-support and deployment-target NFRs from requirements.md also need to be carried into concrete design decisions.
|
|
- [ ] NFR Design - EXECUTE
|
|
- **Rationale**: NFR Requirements is executing, so applicable NFR patterns (security headers config, lockfile/scanning setup) need to be incorporated into the design.
|
|
- [ ] Infrastructure Design - SKIP
|
|
- **Rationale**: No cloud infrastructure to design at this stage — the site is a static bundle. Concrete hosting/deployment mechanics (FTP upload, routing fallback strategy) are handled by Deployment Setup in the Operations phase.
|
|
- [ ] Code Generation - EXECUTE (ALWAYS)
|
|
- **Rationale**: Implementation planning and code generation needed to produce the actual React application.
|
|
- [ ] Build and Test - EXECUTE (ALWAYS)
|
|
- **Rationale**: Build, test, and verification needed across the (single) unit.
|
|
|
|
### 🟡 OPERATIONS PHASE
|
|
- [ ] Deployment Setup - EXECUTE
|
|
- **Rationale**: `Operations Configuration = Yes` (decided in Requirements Analysis). Deployment method (FTP/traditional web host, per NFR-4) needs concrete setup: build/export steps and upload process.
|
|
- [ ] Monitoring Setup - EXECUTE
|
|
- **Rationale**: `Operations Configuration = Yes`. Even for a static site, basic uptime/availability monitoring or analytics may be relevant — the stage will ask the user what's actually needed.
|
|
- [ ] Production Readiness Validation - EXECUTE (ALWAYS once Operations phase is reached)
|
|
- **Rationale**: Final wrap-up checklist for the feature.
|
|
|
|
## Estimated Timeline
|
|
- **Total Stages**: 10 (2 skipped, 8 executed) across Inception (remaining), Construction, and Operations
|
|
- **Estimated Duration**: Single focused session — small, well-scoped greenfield frontend
|
|
|
|
## Success Criteria
|
|
- **Primary Goal**: A working, statically-buildable React application that reproduces the reference marketing page 1-to-1, with a red-default/purple-selectable theme switcher, scaffolded with TanStack Router and TanStack Query for future growth.
|
|
- **Key Deliverables**: React + TypeScript + Vite + Tailwind project; theme system with persistence; ported page content/components; TanStack Router route shell; TanStack Query provider shell; build/test instructions; deployment instructions for FTP/static hosting; production readiness checklist.
|
|
- **Quality Gates**: Successful production build; passing component/unit tests; applicable Security Baseline rules satisfied (or explicitly marked N/A with rationale).
|