Skip to content

flexsurfer/reflex-demo

Repository files navigation

Issue Triage Board

A demo app showcasing the Reflex state management architecture for React.

Built in One Prompt

This app was built in one go from a single prompt during a live generation session.

Prompt used:

Create a complete demo app called “Issue Triage Board” using the architectural and state management rules defined in this file: https://raw.githubusercontent.com/flexsurfer/reflex/main/llms.txt

You must strictly follow the conventions, folder structure, and architectural constraints described in that document. Do not restate or reinterpret the rules. Implement them exactly as written.

Tech stack: Latest Vite, React, TypeScript, Vitest for tests

Functional requirements:
Data source
Use a static mock JSON dataset (local file or in-code constant).
Simulate API calls using a timeout to mimic latency.
No real network calls.
App behavior
On startup, hydrate state from localStorage cache.
Mark data as stale after hydration.
Provide a “Refresh” button to fetch mock data again.
Persist normalized data to localStorage after successful fetch.

UI layout
Left sidebar:
Multi-select label filters
Status filter (open / closed / all)
Search input
Top bar:
Counts (open, closed, visible)
Per-label counts
Main panel:
List of issues (title, labels, status, updated date)
Sort options (updated, created, comments count)
Detail drawer or modal:
Show selected issue
“Load comments” button to fetch comments (mock, simulated latency)

State modeling
Normalize entity-like data.
Keep state shallow and horizontally structured.
Include derived view-ready data via the architecture rules from llms.txt.
Required behaviors to demonstrate architecture strengths
Deterministic event handling.
All I/O isolated from pure state transitions.
Derived data built from subscriptions/selectors only.
No filtering, sorting, reshaping, or counting inside React components.
Parameterized selectors for entity-by-id access.
Optional but recommended: optimistic close/reopen issue with rollback on simulated failure.

Devtools
Set up the corresponding devtools described by llms.txt.
Enable them only in development mode.
Wire them directly in the application bootstrap code.

Testing
Add minimal Vitest tests:
At least two state transition tests.
At least two derived data tests using fixed state fixtures.

Deliverables:
Output full repository structure first.
Then provide every file with complete content.

Include:
package.json
vite config
tsconfig
src/ structure
state folder following llms.txt rules
mock data
components
tests

run instructions (npm install, npm run dev, npm test)

Constraints:
Strictly follow llms.txt for architecture and conventions.
Keep UI minimal but functional.
Keep code deterministic and clear.
Do not explain architecture rules in comments. Implement them.

Goal of the app:
A small but strong demo that clearly showcases the strengths of the architecture defined in llms.txt.

Live generation video:

Watch the live app generation

Quick Start

npm install
npm run dev

Open http://localhost:5173.

Testing

npm test

Architecture

This app follows the Reflex architecture (re-frame inspired):

  • Events — synchronous, deterministic state transitions
  • Effects / Coeffects — isolated I/O (localStorage, mock API)
  • Subscriptions — derived, view-ready data (filtering, sorting, counting)
  • Components — subscribe + dispatch + render (no business logic)

State is normalized (byId + allIds), UI state is separate from domain entities, and all data reshaping happens in the subscription layer.

Devtools

Reflex Devtools are enabled automatically in development mode.

About

Issue Triage Board (Building Production Ready Apps with AI Confidently Using Reflex Architecture)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors