Merge pull request #22 from MDE/GUI

MDE/GUI

GUI/README.md

@@ -0,0 +1,72 @@
+# Kath UI Repository
+
+Welcome to the Kath UI repository! This repository contains the front-end and back-end code for the Kath project.
+
+## Front-end
+
+The front-end is built with Vite, a next-generation frontend tooling. To run the front-end, follow these steps:
+
+1. Navigate to the `front-end` directory:
+
+   ```
+   cd front-end
+   ```
+
+2. Install dependencies using npm:
+
+   ```
+   npm install
+   ```
+
+3. Run the development server:
+   ```
+   npm run dev
+   ```
+
+This will start the development server and open the application in your default web browser at [http://localhost:3000](http://localhost:3000).
+
+## Back-end
+
+The back-end is built with Flask, a lightweight WSGI web application framework. To run the back-end, follow these steps:
+
+1. Navigate to the `back-end` directory:
+
+   ```
+   cd back-end
+   ```
+
+2. Create a virtual environment (venv):
+
+   ```
+   python -m venv venv
+   ```
+
+3. Activate the virtual environment:
+
+   - On Windows:
+     ```
+     venv/Scripts/activate
+     ```
+   - On macOS/Linux:
+     ```
+     source venv/bin/activate
+     ```
+
+4. Once the virtual environment is activated, install dependencies using pip:
+
+   ```
+   pip install -r requirements.txt
+   ```
+
+5. Select the interpreter from the virtual environment in your code editor or IDE:
+
+   - [VS Code](https://code.visualstudio.com/docs/python/environments): Click on the interpreter version in the bottom right corner and select the one from the `venv` directory.
+
+6. Run the Flask application:
+   ```
+   python main.py
+   ```
+
+This will start the Flask development server, and your back-end will be up and running.
+
+The back-end will be accessible at [http://localhost:8080](http://localhost:8080).

GUI/back-end/.env.development

@@ -0,0 +1 @@
+ORIGINS=http://localhost:3000

GUI/back-end/.env.production

@@ -0,0 +1 @@
+ORIGINS=http://website.com

GUI/back-end/main.py

@@ -0,0 +1,32 @@
+from flask import Flask
+from flask_cors import CORS
+from dotenv import load_dotenv
+import os
+
+from router import router_bp
+
+# Determine the environment
+environment = os.getenv('ENVIRONMENT', 'development')
+if environment == 'production':
+  dotenv_path = '.env.production'
+else:
+  dotenv_path = '.env.development'
+
+# Load environment variables
+load_dotenv(dotenv_path)
+
+# Set environment variables
+origins = os.getenv('ORIGINS')
+
+# Create a Flask app
+app = Flask(__name__)
+
+# Routing
+app.register_blueprint(router_bp('/api/v1'))
+
+# Configurations
+cors = CORS(app, origins=origins)
+
+# Run the app
+if __name__ == '__main__':
+  app.run(debug=True, port=8080)

GUI/back-end/router.py

@@ -0,0 +1,13 @@
+from flask import Blueprint
+from routes import route_users_bp, route_profiles_bp
+
+def router_bp(prefix):
+  router_bp = Blueprint('router', __name__, url_prefix=prefix)
+
+  # Register routes
+  ### THESE LINES ARE ONLY FOR EXAMPLE PURPOSES ###
+  router_bp.register_blueprint(route_users_bp)
+  router_bp.register_blueprint(route_profiles_bp)
+  #################################################
+
+  return router_bp

GUI/back-end/routes/__init__.py

@@ -0,0 +1,4 @@
+### THESE LINES ARE ONLY FOR EXAMPLE PURPOSES ###
+from .profiles import route_profiles_bp
+from .users import route_users_bp
+#################################################

GUI/back-end/routes/profiles.py

@@ -0,0 +1,16 @@
+### THIS FILE IS ONLY FOR EXAMPLE PURPOSES ###
+from flask import Blueprint, jsonify
+
+route_profiles_bp = Blueprint('profiles', __name__)
+
+@route_profiles_bp.route('/profiles', methods=['GET'])
+def get_profiles():
+  return jsonify(
+    {
+      'profiles': [
+        'Dom',
+        'Helo',
+        'Syn'
+      ]
+    }
+  )

GUI/back-end/routes/users.py

@@ -0,0 +1,16 @@
+### THIS FILE IS ONLY FOR EXAMPLE PURPOSES ###
+from flask import Blueprint, jsonify
+
+route_users_bp = Blueprint('users', __name__)
+
+@route_users_bp.route('/users', methods=['GET'])
+def get_users():
+  return jsonify(
+    {
+      'users': [
+        'Mantvydas',
+        'Tomas',
+        'Lukas'
+      ]
+    }
+  )

GUI/front-end/.env.development

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080/api/v1

GUI/front-end/.env.production

@@ -0,0 +1 @@
+VITE_API_URL=http://website.com/api/v1

GUI/front-end/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

GUI/front-end/.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?

GUI/front-end/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/svgs/Logo.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>kath</title>
+	</head>
+	<body style="margin: 0">
+		<div id="root"></div>
+		<script>
+			// Retrieve color mode from localStorage
+			const colorMode = localStorage.getItem('color-mode');
+
+			// Function to set background color based on color mode
+			function setBackgroundColor(colorMode) {
+				if (colorMode === 'dark') {
+					document.body.style.backgroundColor = '#292C34'; // Dark background color
+				} else {
+					document.body.style.backgroundColor = '#F3F3F3'; // Light background color
+				}
+			}
+
+			// Check if color mode is stored in localStorage
+			if (colorMode) {
+				setBackgroundColor(colorMode);
+			} else {
+				// Retrieve system's preferred color mode using matchMedia
+				const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+				// Set color mode based on system preference
+				const systemColorMode = prefersDarkMode ? 'dark' : 'light';
+
+				// Store the system color mode in localStorage
+				localStorage.setItem('color-mode', systemColorMode);
+
+				// Set background color based on system color mode
+				setBackgroundColor(systemColorMode);
+			}
+		</script>
+		<script type="module" src="/src/main/main.tsx"></script>
+	</body>
+</html>