✨ Add client in frontend and client generation

src/backend/app/app/main.py

@@ -1,11 +1,19 @@
 from fastapi import FastAPI
+from fastapi.routing import APIRoute
 from starlette.middleware.cors import CORSMiddleware
 
 from app.api.api_v1.api import api_router
 from app.core.config import settings
 
+
+def custom_generate_unique_id(route: APIRoute):
+    return f"{route.tags[0]}-{route.name}"
+
+
 app = FastAPI(
-    title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+    title=settings.PROJECT_NAME,
+    openapi_url=f"{settings.API_V1_STR}/openapi.json",
+    generate_unique_id_function=custom_generate_unique_id,
 )
 
 # Set all CORS enabled origins

src/new-frontend/README.md

@@ -1,30 +1,17 @@
-# React + TypeScript + Vite
+# Full Stack FastAPI and PostgreSQL - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Generate Client
 
-Currently, two official plugins are available:
+- Start the Docker Compose stack.
+- Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` next to the `package.json` file.
+- To simplify the names in the generated frontend client code, modifying the `openapi.json` file, run:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-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:
+```bash
+node modify-openapi-operationids.js
+```
 
-- Configure the top-level `parserOptions` property like this:
+- To generate or update the frontend client, run:
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+```bash
+npm run generate-client
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/new-frontend/modify-openapi-operationids.js

@@ -0,0 +1,29 @@
+import * as fs from "fs";
+
+const filePath = "./openapi.json";
+
+fs.readFile(filePath, (err, data) => {
+  const openapiContent = JSON.parse(data);
+  if (err) throw err;
+
+  const paths = openapiContent.paths;
+
+  Object.keys(paths).forEach((pathKey) => {
+    const pathData = paths[pathKey];
+    Object.keys(pathData).forEach((method) => {
+      const operation = pathData[method];
+      if (operation.tags && operation.tags.length > 0) {
+        const tag = operation.tags[0];
+        const operationId = operation.operationId;
+        const toRemove = `${tag}-`;
+        if (operationId.startsWith(toRemove)) {
+          const newOperationId = operationId.substring(toRemove.length);
+          operation.operationId = newOperationId;
+        }
+      }
+    });
+  });
+  fs.writeFile(filePath, JSON.stringify(openapiContent, null, 2), (err) => {
+    if (err) throw err;
+  });
+});