dev

.gitignore

@@ -13,3 +13,6 @@ node_modules/
 
 .env
 .vscode
+
+
+kernelboard/static/kb

README.md

@@ -68,7 +68,6 @@ these steps to run the test suite:
    ```shell
    pip install -e .
    ```
-
    This tells `pip` to install the project in editable mode, so that as you make
    changes to your local sandbox, you only need to reinstall if you make
    metadata changes such as adding new dependencies.
@@ -115,4 +114,43 @@ heroku local web
 ```
 
 The gunicorn server will use port 8000, so visit http://localhost:8000/health
-(instead of port 5000, used by the Flask server).
+(instead of port 5000, used by the Flask server).
+
+## React Web App [WIP]
+
+The React frontend is currently under development. Here's how to run it and view your changes locally.
+
+### Build for Flask (Static Mode)
+To build the React app and serve it through the Flask backend at `http://localhost:5000/kb/`:
+
+1. Make changes to your React code.
+2. Run the following command to rebuild the static assets:
+
+```bash
+cd frontend && npm run build
+```
+or at root:
+```bash
+```
+npm run heroku-postbuild
+```
+
+then run the Flask server:
+```
+flask --app kernelboard run --debug
+```
+
+> **Note:** You need to re-run this command **every time** you update the React code, as Flask serves from the generated `build/` folder.
+
+### Development Mode (Live Reload)
+To preview React changes instantly (without rebuilding manually each time):
+1. Start the Flask backend server as shown above.
+2. In a new terminal, run:
+
+```bash
+cd frontend && npm run dev
+```
+
+3. Open the React dev server (e.g. `http://localhost:5173/kb/about`) in your browser.
+
+> In this mode, the React app is served separately with hot-reloading. Use it for faster iteration during development.

frontend/.gitignore

@@ -0,0 +1,24 @@
+# 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
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@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
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // 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,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+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:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kernel Leaderboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="/src/main.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>