Development: Webapp Implementation (#14)

* Implement foundation of webapp

* Add documentation and introduce config

* Update package.json

* Fix button props

* Fix warnings

* Fix linting

* Format with prettier and other fixes

* Remove console messages

* Clean up code, substitute useEffect for tanstack

* Fix prettier

Author: alextopalova

package-lock.json

@@ -1,11 +1,42 @@
-# React + TypeScript + Vite
+# Harmonia Client-Side Docs
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Local Development
 
-Currently, two official plugins are available:
+1. Install dependencies:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) 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
+```bash
+npm install
+```
+
+2. Run the development server:
+
+```bash
+npm run dev
+```
+
+## Project Structure
+
+The important folders and structures of the projects are defined as follows:
+
+```text
+webapp/
+├─ src/                         # Main application source code
+│  ├─ assets/                   # Static assets (images, fonts, icons, etc.)
+│  ├─ components/               # Reusable React components (self-implemented and generated with shadcn)
+│  │  └─ ui/                    # UI components, generated with shadcn
+│  ├─ data/                     # Data loaders (API-related utilities) and mock data
+│  ├─ hooks/                    # Custom React hooks used across the project
+│  ├─ lib/                      # Utilities
+│  ├─ pages/                    # Application pages used by the router
+│  ├─ types/                    # TypeScript types, interfaces, and shared definitions
+│  ├─ config.ts                 # Global configuration (e.g., flags, environment settings)
+│  ├─ main.ts                   # App entry point that initializes React
+│  ├─ index.css                 # Global stylesheet for the application
+│  └─ App.tsx                   # Root component that sets up app structure/layout
+├─ package.json                 # Project dependencies and scripts
+└─ README.md                    # Project documentation
+
+```
 
 ## React Compiler
 
@@ -40,15 +71,15 @@ export default defineConfig([
       // other options...
     },
   },
-])
+]);
 ```
 
 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'
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -69,5 +100,5 @@ export default defineConfig([
       // other options...
     },
   },
-])
+]);
 ```

src/main/webapp/README.md

@@ -1,28 +1,25 @@
-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'
+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', '**/generated/**'] },
-    {
-      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 },
-        ],
-      },
+  { ignores: ['dist', '**/generated/**'] },
+  {
+    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 }],
+    },
+  },
+);