Migrate frontend from Vue to React + TypeScript + react-query

.dockerignore

@@ -0,0 +1,28 @@
+# Copyright 2026 Open Reaction Database Project Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Keep local dev artifacts out of the image; the Dockerfile installs deps
+# itself and a macOS-built node_modules contains the wrong platform's
+# rollup binary (see Dockerfile comment about npm cli#4828).
+**/node_modules/
+**/dist/
+**/.venv/
+**/__pycache__/
+**/.pytest_cache/
+**/.ruff_cache/
+**/.DS_Store
+**/dump.rdb
+.git/
+.idea/
+.vscode/

.gitignore

@@ -15,7 +15,7 @@ __pycache__/
 .venv/
 
 # Redis dumps.
-dump.rdb
+**/dump.rdb
 # vim swap files
 *.sw[a-z]
 # build output

.nvmrc

@@ -0,0 +1 @@
+20.19.4

README.md

@@ -4,8 +4,8 @@ Web interface and FastAPI server for the [Open Reaction Database](https://open-r
 
 ## Project layout
 
-- **`app/`** — Vue single-page application (frontend), built with Vite
-  - `src/components/` — reusable Vue components
+- **`app/`** — React single-page application (frontend), built with Vite
+  - `src/components/` — reusable React components
   - `src/views/` — routed pages (browse, search, dataset/reaction views)
   - `src/router/`, `src/styles/`, `src/utils/`, `src/assets/`
 - **`ord_interface/`** — Python backend
@@ -14,7 +14,7 @@ Web interface and FastAPI server for the [Open Reaction Database](https://open-r
   - `visualization/` — Jinja filters and helpers for rendering reactions and molecules
   - `editor/` — legacy reaction-submission UI (being removed)
 
-The Vue frontend talks to the FastAPI server, so both processes need to be running for the UI to work. On Windows, use WSL.
+The React frontend talks to the FastAPI server, so both processes need to be running for the UI to work. On Windows, use WSL.
 
 ## Local development
 
@@ -57,6 +57,7 @@ docker compose up
 
 #### Option B: Local (in-process testing database)
 
+In your local conda environment
 ```shell
 # Redis (the API uses it for search-task state); leaves it daemonized.
 redis-server --daemonize yes
@@ -73,9 +74,9 @@ ORD_INTERFACE_TESTING=TRUE uv run uvicorn ord_interface.api.main:app --port 5000
 > proxy target in `app/vite.config.js`. Uvicorn binds `127.0.0.1` only, so
 > `http://127.0.0.1:5000/...` will reach uvicorn regardless.
 
-### 3. Run the Vue SPA
+### 3. Run the React SPA
 
-Download [Ketcher v2.5.1](https://github.com/epam/ketcher/releases/download/v2.5.1/ketcher-standalone-2.5.1.zip), extract it, and place the `standalone/` directory's contents inside `./app/src/ketcher/` (so that `app/src/ketcher/static/` and `app/src/ketcher/templates/` exist). Then:
+Download [Ketcher v2.5.1](https://github.com/epam/ketcher/releases/download/v2.5.1/ketcher-standalone-2.5.1.zip), extract it, and place the `standalone/` directory's contents inside `./app/public/ketcher/` (so that `app/public/ketcher/static/` and `app/public/ketcher/asset-manifest.json` exist). Then:
 
 ```shell
 cd app
@@ -99,4 +100,4 @@ Production deployment is managed via Pulumi/ECS in the [`ord-infrastructure`](ht
 
 ### Major changes (new message types, etc.)
 
-The Vue app needs to be updated to surface new fields. Please discuss any such proposals with the ORD team before opening a PR.
+The React app needs to be updated to surface new fields. Please discuss any such proposals with the ORD team before opening a PR.

app/.gitignore

@@ -1,21 +1,22 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

app/.prettierignore

@@ -1,5 +1,4 @@
 dist/
 node_modules/
 public/
-src/ketcher/
 package-lock.json

app/README.md

@@ -1,29 +1,73 @@
-# app
+# React + TypeScript + Vite
 
-## Project setup
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-```
-npm install
-```
+Currently, two official plugins are available:
 
-### Compiles and hot-reloads for development
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-```
-npm run serve
-```
+## React Compiler
 
-### Compiles and minifies for production
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-```
-npm run build
-```
+## Expanding the ESLint configuration
 
-### Lints and fixes files
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 
-```
-npm run lint
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
 ```
 
-### Customize configuration
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
+```

app/eslint.config.js

@@ -15,31 +15,32 @@
  */
 
 import js from '@eslint/js';
-import vue from 'eslint-plugin-vue';
 import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
 
-export default [
-  {
-    ignores: ['dist/', 'node_modules/', 'src/ketcher/'],
-  },
-  js.configs.recommended,
-  ...vue.configs['flat/essential'],
+export default defineConfig([
+  globalIgnores(['dist/', 'node_modules/', 'public/ketcher/']),
   {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
     languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'module',
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
+      ecmaVersion: 2020,
+      globals: globals.browser,
     },
     rules: {
       // GitHub Actions sets CI=true; ESLint itself never sets NODE_ENV, so the
       // CI variable is the reliable way to make these noisy in CI and quiet
       // during local iteration.
       'no-console': process.env.CI ? 'warn' : 'off',
       'no-debugger': process.env.CI ? 'warn' : 'off',
-      'no-unused-vars': 'warn',
     },
   },
-];
+]);

app/index.html

@@ -15,21 +15,20 @@
  limitations under the License.
 -->
 
-<html lang="">
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
     <meta
       http-equiv="X-UA-Compatible"
       content="IE=edge"
     />
     <meta
       name="viewport"
-      content="width=device-width,initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0"
     />
-    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
     <link
       rel="icon"
-      href="https://avatars2.githubusercontent.com/u/60754754?s=200&v=4"
+      href="/favicon.ico"
     />
     <title>Open Reaction Database</title>
     <meta
@@ -86,10 +85,10 @@
         to continue.</strong
       >
     </noscript>
-    <div id="app"></div>
+    <div id="root"></div>
     <script
       type="module"
-      src="/src/main.js"
+      src="/src/main.tsx"
     ></script>
   </body>
 </html>