chore: frontend fsd

frontend/package.json

@@ -10,9 +10,13 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.1",
     "keycloak-js": "^26.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",
@@ -20,10 +24,13 @@
     "css-loader": "^7.1.2",
     "dotenv": "^16.4.7",
     "html-webpack-plugin": "^5.6.3",
+    "sass": "^1.83.4",
+    "sass-loader": "^16.0.4",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.2",
     "typescript": "^5.7.3",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.0"
   }
-}
+}

frontend/src/App.tsx

@@ -1,14 +0,0 @@
-import React, { useEffect } from 'react';
-import keycloak from './keycloak';
-
-const App: React.FC = () => {
-  return (
-    <div>
-      <button onClick={() => keycloak.login()}>Login</button>
-      <button onClick={() => alert(keycloak.token)}>Token</button>
-      <button onClick={() => keycloak.logout()}>Logout</button>
-    </div>
-  );
-};
-
-export default App;

frontend/src/app/app.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Root } from '../pages/root';
+import { Search } from '../pages/search';
+
+export const App: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/search' element={<Search />} />
+        <Route path='/' element={<Root />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};

frontend/src/app/index.ts

@@ -0,0 +1 @@
+export * from './app'

frontend/src/entities/record.ts

@@ -0,0 +1,8 @@
+export type DBRecord = {
+    id: number,
+    date: Date,
+    description: string,
+    weight: number,
+    calories: number,
+    calspergram: number
+};

frontend/src/features/createRecord/createRecord.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { TextareaAutosize } from '@mui/material'
+
+export const CreateRecord: React.FC = () => {
+    return (
+        <TextareaAutosize />
+    )
+}

frontend/src/features/createRecord/index.ts

@@ -0,0 +1 @@
+export * from './createRecord';

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import { App } from './app';
 
 const container = document.getElementById('root');
 

frontend/src/pages/root.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CreateRecord } from '../features/createRecord';
+
+export const Root: React.FC = () => {
+    return (
+        <div>
+            <CreateRecord />
+        </div>
+    )
+}

frontend/src/pages/search.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Search: React.FC = () => {
+    return (
+        <div>
+            Search
+        </div>
+    )
+}

frontend/src/shared/keycloak.ts

@@ -1,6 +1,6 @@
 import Keycloak from 'keycloak-js';
 
-let kc = new Keycloak({
+const kc = new Keycloak({
     url: process.env.KEYCLOAK_URL as string,
     realm: process.env.KEYCLOAK_REALM as string,
     clientId: process.env.KEYCLOAK_CLIENT as string,
@@ -17,5 +17,4 @@ kc.init({
     }
 })
 
-
 export default kc;

frontend/webpack.config.js

@@ -15,6 +15,20 @@ module.exports = {
                 use: 'ts-loader',
                 exclude: /node_modules/,
             },
+            {
+                test: /\.scss$/,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: { sourceMap: true }
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: { sourceMap: true }
+                    }
+                ]
+            },
         ],
     },
     resolve: {
@@ -26,11 +40,12 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: './src/index.html',
+            template: './index.html',
         }),
         new HtmlWebpackPlugin({
             filename: 'silent-check-sso.html',
             template: './silent-check-sso.html',
+            inject: false,
         }),
         new webpack.DefinePlugin({
             'process.env': {