This folder contains the React-based frontend shell for Cohorter.

It keeps the existing Alpine-style template/data model behavior, while using React for mounting and app lifecycle.

• React 18 app bootstrapped with react-scripts
• Custom lightweight Alpine-like runtime (src/alpine-runtime.js)
• Data/state layer in src/alpine-data.js
• HTML template composition using reusable partials in public/components/

• Node.js 14+
• npm
• Cohorter backend server running (same origin by default)

npm install

npm start

By default CRA serves on http://localhost:3000.

This frontend expects backend endpoints on the same origin (for example /get_query_result, /keywords, /nl2dsl, etc.). If your backend runs on a different host/port, add a proxy strategy before local development.

npm run build

Build output is produced by CRA and then moved to dist/:

• build/ is generated by CRA
• dist/ is the final deployable folder for this project

npm test

client-react/
├── public/
│   ├── app-template.html
│   ├── components/
│   │   ├── topbar.html
│   │   ├── sidebar-desktop.html
│   │   ├── sidebar-mobile.html
│   │   ├── query-v1.html
│   │   ├── query-nl.html
│   │   ├── results-main.html
│   │   ├── overlays.html
│   │   └── busy-pill.html
│   └── assets/
├── src/
│   ├── index.js
│   ├── App.js
│   ├── alpine-runtime.js
│   ├── alpine-data.js
│   └── template-components.js
├── package.json
└── dist/

1. src/index.js mounts React app.
2. src/App.js calls mountCohorterApp().
3. Runtime fetches public/app-template.html.
4. coh-include nodes are expanded from public/components/*.html.
5. Alpine-like directives are compiled and bound to state from createAppState().
6. Initial query submission runs automatically.

The frontend currently calls:

• POST /keywords
• POST /nl2dsl
• POST /get_query_result
• POST /get_filter_result
• POST /get_age
• POST /get_top_terms
• POST /compare_query
• POST /export

• This is an incremental migration: React hosts the app, while template behavior is still Alpine-style.
• Reusable UI sections are maintained as HTML partials in public/components/.