Merge branch 'main' of https://github.com/philipredstone/relnet

Increase node size and distance and fix error
Took 8 minutes Took 10 minutes
2025-07-09 07:06:41 +02:00 · 2025-04-17 15:24:34 +02:00 · 2025-04-17 15:23:45 +02:00 · 2025-04-17 14:49:32 +02:00 · 2025-04-17 14:37:07 +02:00 · 2025-04-17 14:14:01 +02:00
63 changed files with 825 additions and 868 deletions
--- a/6
+++ b/6
@ -44,6 +44,12 @@ LABEL "org.opencontainers.image.version"="1.0.0"
 LABEL "VERSION"="1.0.0"
 LABEL maintainer="Tobias Hopp and Philip Rothstein"

+# Install curl for healthcheck
+ARG DEBIAN_FRONTEND=noninteractive
+RUN apt-get update && \
+    apt-get -qq -y install curl && \
+    rm -rf /var/cache/apt/archives /var/lib/apt/lists/*
+

 WORKDIR /app

--- a/bun.lockb
+++ b/bun.lockb
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@ -0,0 +1 @@
+node_modules
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@ -0,0 +1,16 @@
+# Ignore build outputs
+/dist
+/build
+
+# Ignore dependencies
+/node_modules
+
+# Ignore coverage reports
+/coverage
+
+# Ignore logs
+*.log
+
+# Ignore configuration files
+.env
+.env.*
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false
+}
--- a/frontend/index.html
+++ b/frontend/index.html
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{tsx,ts,js,jsx,json,css,html}\"",
+    "format:check": "prettier --check \"src/**/*.{tsx,ts,js,jsx,json,css,html}\""
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@headlessui/react": "^2.2.1",
+    "@tailwindcss/vite": "^4.1.4",
+    "axios": "^1.8.4",
+    "framer-motion": "^12.7.3",
+    "react": "^19.1.0",
+    "react-datepicker": "^8.3.0",
+    "react-dom": "^19.1.0",
+    "react-force-graph-2d": "^1.27.1",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.5.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6"
+  },
+  "devDependencies": {
+    "@types/axios": "^0.14.4",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.4.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.4.32",
+    "prettier": "^3.5.3",
+    "tailwindcss": "^4.1.4",
+    "webpack": "^5.99.5",
+    "webpack-cli": "^6.0.1"
+  }
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -5,7 +5,7 @@ import { NetworkProvider } from './context/NetworkContext';
 import Login from './components/auth/Login';
 import Register from './components/auth/Register';
 import NetworkList from './components/networks/NetworkList';
-import FriendshipNetwork from './pages/FriendshipNetwork';
+import FriendshipNetwork from './components/FriendshipNetwork';
 import Header from './components/layout/Header';

 // Protected route component
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@ -1,7 +1,10 @@
 import axios from 'axios';
-import { getApiUrl } from './api';

-const API_URL = getApiUrl();
+const protocol = window.location.protocol;
+const hostname = window.location.hostname;
+const port = window.location.port;
+
+const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';

 // Configure axios
 axios.defaults.withCredentials = true;
--- a/frontend/src/api/network.ts
+++ b/frontend/src/api/network.ts
@ -1,7 +1,10 @@
 import axios from 'axios';
-import { getApiUrl } from './api';

-const API_URL = getApiUrl();
+const protocol = window.location.protocol;
+const hostname = window.location.hostname;
+const port = window.location.port;
+
+const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';

 // Types
 export interface NetworkOwner {
@ -41,7 +44,7 @@ export const getUserNetworks = async (): Promise<Network[]> => {
 export const createNetwork = async (data: CreateNetworkData): Promise<Network> => {
  const response = await axios.post<{ success: boolean; data: Network }>(
    `${API_URL}/networks`,
-    data,
+    data
  );
  return response.data.data;
 };
@ -49,7 +52,7 @@ export const createNetwork = async (data: CreateNetworkData): Promise<Network> =
 // Get a specific network
 export const getNetwork = async (id: string): Promise<Network> => {
  const response = await axios.get<{ success: boolean; data: Network }>(
-    `${API_URL}/networks/${id}`,
+    `${API_URL}/networks/${id}`
  );
  return response.data.data;
 };
@ -58,7 +61,7 @@ export const getNetwork = async (id: string): Promise<Network> => {
 export const updateNetwork = async (id: string, data: UpdateNetworkData): Promise<Network> => {
  const response = await axios.put<{ success: boolean; data: Network }>(
    `${API_URL}/networks/${id}`,
-    data,
+    data
  );
  return response.data.data;
 };
--- a/frontend/src/api/people.ts
+++ b/frontend/src/api/people.ts
@ -1,7 +1,10 @@
 import axios from 'axios';
-import { getApiUrl } from './api';

-const API_URL = getApiUrl();
+const protocol = window.location.protocol;
+const hostname = window.location.hostname;
+const port = window.location.port;
+
+const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';

 // Types
 export interface Person {
@ -41,7 +44,7 @@ export interface UpdatePersonData {
 // Get all people in a network
 export const getPeople = async (networkId: string): Promise<Person[]> => {
  const response = await axios.get<{ success: boolean; data: Person[] }>(
-    `${API_URL}/networks/${networkId}/people`,
+    `${API_URL}/networks/${networkId}/people`
  );
  return response.data.data;
 };
@ -50,7 +53,7 @@ export const getPeople = async (networkId: string): Promise<Person[]> => {
 export const addPerson = async (networkId: string, data: CreatePersonData): Promise<Person> => {
  const response = await axios.post<{ success: boolean; data: Person }>(
    `${API_URL}/networks/${networkId}/people`,
-    data,
+    data
  );
  return response.data.data;
 };
@ -59,11 +62,11 @@ export const addPerson = async (networkId: string, data: CreatePersonData): Prom
 export const updatePerson = async (
  networkId: string,
  personId: string,
-  data: UpdatePersonData,
+  data: UpdatePersonData
 ): Promise<Person> => {
  const response = await axios.put<{ success: boolean; data: Person }>(
    `${API_URL}/networks/${networkId}/people/${personId}`,
-    data,
+    data
  );
  return response.data.data;
 };
--- a/frontend/src/api/relationships.ts
+++ b/frontend/src/api/relationships.ts
@ -1,36 +1,29 @@
 import axios from 'axios';
-import { getApiUrl } from './api';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+import { Relationship } from '../interfaces/IRelationship';

-const API_URL = getApiUrl();
+const protocol = window.location.protocol;
+const hostname = window.location.hostname;
+const port = window.location.port;

-// Types
-export interface Relationship {
-  _id: string;
-  source: string;
-  target: string;
-  type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
-  customType?: string;
-  network: string;
-  createdAt: string;
-  updatedAt: string;
-}
+const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';

 export interface CreateRelationshipData {
  source: string;
  target: string;
-  type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+  type: RELATIONSHIP_TYPES;
  customType?: string;
 }

 export interface UpdateRelationshipData {
-  type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+  type?: RELATIONSHIP_TYPES;
  customType?: string;
 }

 // Get all relationships in a network
 export const getRelationships = async (networkId: string): Promise<Relationship[]> => {
  const response = await axios.get<{ success: boolean; data: Relationship[] }>(
-    `${API_URL}/networks/${networkId}/relationships`,
+    `${API_URL}/networks/${networkId}/relationships`
  );
  return response.data.data;
 };
@ -38,11 +31,11 @@ export const getRelationships = async (networkId: string): Promise<Relationship[
 // Add a relationship to the network
 export const addRelationship = async (
  networkId: string,
-  data: CreateRelationshipData,
+  data: CreateRelationshipData
 ): Promise<Relationship> => {
  const response = await axios.post<{ success: boolean; data: Relationship }>(
    `${API_URL}/networks/${networkId}/relationships`,
-    data,
+    data
  );
  return response.data.data;
 };
@ -51,11 +44,11 @@ export const addRelationship = async (
 export const updateRelationship = async (
  networkId: string,
  relationshipId: string,
-  data: UpdateRelationshipData,
+  data: UpdateRelationshipData
 ): Promise<Relationship> => {
  const response = await axios.put<{ success: boolean; data: Relationship }>(
    `${API_URL}/networks/${networkId}/relationships/${relationshipId}`,
-    data,
+    data
  );
  return response.data.data;
 };
@ -63,7 +56,7 @@ export const updateRelationship = async (
 // Remove a relationship
 export const removeRelationship = async (
  networkId: string,
-  relationshipId: string,
+  relationshipId: string
 ): Promise<void> => {
  await axios.delete(`${API_URL}/networks/${networkId}/relationships/${relationshipId}`);
 };
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
--- a/frontend/src/components/CanvasGraph.tsx
+++ b/frontend/src/components/CanvasGraph.tsx
@ -1,7 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { GraphData } from 'react-force-graph-2d';

-// Define types for graph elements
+interface GraphData {
+  nodes: any[];
+  links?: any[];
+}
+
 interface NodeData {
  id: string;
  firstName: string;
@ -26,30 +29,26 @@ interface CustomGraphData extends GraphData {
 }

 interface CanvasGraphProps {
-  data: CustomGraphData,
-  width: number,
-  height: number,
-  zoomLevel: number,
-  onNodeClick: (nodeId: string) => void,
-  onNodeDrag: (nodeId, x, y) => void
+  data: CustomGraphData;
+  width: number;
+  height: number;
 }

 // Physics constants
-const NODE_RADIUS = 30; // Node radius in pixels
-const MIN_DISTANCE = 100; // Minimum distance between any two nodes
-const MAX_DISTANCE = 300; // Maximum distance between connected nodes
-const REPULSION_STRENGTH = 500; // How strongly nodes repel each other when too close
+const NODE_RADIUS = 50; // Node radius in pixels
+const MIN_DISTANCE = 250; // Minimum distance between any two nodes
+const MAX_DISTANCE = 800; // Maximum distance between connected nodes
+const REPULSION_STRENGTH = 400; // How strongly nodes repel each other when too close
 const ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes
 const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints
 const DAMPING = 0.6; // Damping factor for velocity (0-1)
 const CENTER_GRAVITY = 0.01; // Force pulling nodes to the center
-const MAX_VELOCITY = 5; // Maximum velocity to prevent wild movement
+const MAX_VELOCITY = 4; // Maximum velocity to prevent wild movement
 const COOLING_FACTOR = 0.99; // System gradually cools down

-const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLevel, onNodeClick, onNodeDrag }) => {
+const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

-  // State for interactions
  const [draggedNode, setDraggedNode] = useState<string | null>(null);
  const [hoveredNode, setHoveredNode] = useState<string | null>(null);
  const [offsetX, setOffsetX] = useState(0);
@ -60,7 +59,6 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
  const [scale, setScale] = useState(1);
  const [autoLayout, setAutoLayout] = useState(true);

-  // Node physics state
  const [nodePositions, setNodePositions] = useState<
    Record<
      string,
@ -73,19 +71,16 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    >
  >({});

-  // Animation frame reference
  const animationRef = useRef<number | null>(null);

  useEffect(() => {
-    // Only run once when component mounts or when data.nodes changes
    if (width <= 0 || height <= 0 || !data.nodes || data.nodes.length === 0) return;

    console.log('Initializing node positions...');

-    // Skip if we already have positions for all nodes
    const allNodesHavePositions = data.nodes.every(
      node =>
-        nodePositions[node.id] && (nodePositions[node.id].x !== 0 || nodePositions[node.id].y !== 0),
+        nodePositions[node.id] && (nodePositions[node.id].x !== 0 || nodePositions[node.id].y !== 0)
    );

    if (allNodesHavePositions) {
@ -93,29 +88,21 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      return;
    }

-    // Create initial positions object
    const initialPositions: Record<string, { x: number; y: number; vx: number; vy: number }> = {};

-    // Determine the area to place nodes
    const padding = NODE_RADIUS * 2;
    const availableWidth = width - padding * 2;
    const availableHeight = height - padding * 2;

-    // Calculate a grid layout - find grid dimensions based on node count
    const nodeCount = data.nodes.length;
    const aspectRatio = availableWidth / availableHeight;
    const gridCols = Math.ceil(Math.sqrt(nodeCount * aspectRatio));
    const gridRows = Math.ceil(nodeCount / gridCols);

-    console.log(`Creating a ${gridCols}x${gridRows} grid for ${nodeCount} nodes`);
-
-    // Calculate cell size
    const cellWidth = availableWidth / gridCols;
    const cellHeight = availableHeight / gridRows;

-    // Position each node in a grid cell with random offset
    data.nodes.forEach((node, index) => {
-      // Only generate new position if node doesn't already have one
      if (
        nodePositions[node.id] &&
        nodePositions[node.id].x !== 0 &&
@ -129,15 +116,12 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
        return;
      }

-      // Calculate grid position
      const row = Math.floor(index / gridCols);
      const col = index % gridCols;

-      // Add randomness within cell (20% of cell size)
      const randomOffsetX = cellWidth * 0.4 * (Math.random() - 0.5);
      const randomOffsetY = cellHeight * 0.4 * (Math.random() - 0.5);

-      // Calculate final position
      const x = padding + cellWidth * (col + 0.5) + randomOffsetX;
      const y = padding + cellHeight * (row + 0.5) + randomOffsetY;

@ -147,22 +131,14 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
        vx: 0,
        vy: 0,
      };
-
-      console.log(`Node ${node.id} positioned at (${x.toFixed(2)}, ${y.toFixed(2)})`);
    });

-    // Set positions in one batch update
    setNodePositions(initialPositions);
-
-    console.log('Node positioning complete');
  }, [data.nodes, width, height]);

-  // Run physics simulation - FIX: Added proper dependencies
  useEffect(() => {
-    // Only proceed if we have valid dimensions and data
    if (width <= 0 || height <= 0 || !data.nodes || data.nodes.length === 0) return;

-    // Debug: Force at least one draw call to make sure graph is initially visible
    drawGraph();

    if (!autoLayout || draggedNode) {
@ -177,34 +153,28 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      setNodePositions(prevPositions => {
        const newPositions = { ...prevPositions };

-        // Apply forces to each node
        data.nodes.forEach(node => {
          if (!newPositions[node.id]) return;

-          // Skip if this node is being dragged
          if (node.id === draggedNode) return;

          let forceX = 0;
          let forceY = 0;

-          // Center gravity force
          const centerX = width / 2;
          const centerY = height / 2;
          forceX += (centerX - newPositions[node.id].x) * CENTER_GRAVITY;
          forceY += (centerY - newPositions[node.id].y) * CENTER_GRAVITY;

-          // Repulsion forces (from ALL other nodes to prevent overlapping)
          data.nodes.forEach(otherNode => {
            if (node.id === otherNode.id || !newPositions[otherNode.id]) return;

            const dx = newPositions[node.id].x - newPositions[otherNode.id].x;
            const dy = newPositions[node.id].y - newPositions[otherNode.id].y;
            const distanceSq = dx * dx + dy * dy;
-            const distance = Math.sqrt(distanceSq) || 1; // Avoid division by zero
+            const distance = Math.sqrt(distanceSq) || 1;

-            // Enforce minimum distance between any two nodes
            if (distance < MIN_DISTANCE) {
-              // Strong repulsion force that increases as nodes get closer
              const repulsionFactor = 1 - distance / MIN_DISTANCE;
              const repulsionForce = REPULSION_STRENGTH * repulsionFactor * repulsionFactor;

@ -213,7 +183,6 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
            }
          });

-          // Find connected nodes (neighbors) for the current node
          const connectedNodeIds = new Set<string>();
          data.edges.forEach(edge => {
            if (edge.source === node.id) {
@ -223,7 +192,6 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
            }
          });

-          // Attraction forces (only to connected nodes)
          connectedNodeIds.forEach(targetId => {
            if (!newPositions[targetId]) return;

@ -231,18 +199,13 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
            const dy = newPositions[targetId].y - newPositions[node.id].y;
            const distance = Math.sqrt(dx * dx + dy * dy) || 1;

-            // Enforce maximum distance constraint between connected nodes
            if (distance > MAX_DISTANCE) {
-              // Strong attractive force that increases as distance exceeds max
              const excessDistance = distance - MAX_DISTANCE;
              const constraintForce = CONSTRAINT_STRENGTH * excessDistance;

              forceX += (dx / distance) * constraintForce;
              forceY += (dy / distance) * constraintForce;
-            }
-            // Regular attraction between connected nodes (weaker when close)
-            else {
-              // Linear attraction normalized by MAX_DISTANCE
+            } else {
              const normalizedDistance = distance / MAX_DISTANCE;
              const attractionForce = ATTRACTION_STRENGTH * normalizedDistance;

@ -251,33 +214,28 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
            }
          });

-          // Update velocity with applied forces and damping
          newPositions[node.id].vx = newPositions[node.id].vx * DAMPING + forceX;
          newPositions[node.id].vy = newPositions[node.id].vy * DAMPING + forceY;

-          // Limit maximum velocity to prevent wild movement
          const speed = Math.sqrt(
            newPositions[node.id].vx * newPositions[node.id].vx +
-            newPositions[node.id].vy * newPositions[node.id].vy,
+              newPositions[node.id].vy * newPositions[node.id].vy
          );
          if (speed > MAX_VELOCITY) {
            newPositions[node.id].vx = (newPositions[node.id].vx / speed) * MAX_VELOCITY;
            newPositions[node.id].vy = (newPositions[node.id].vy / speed) * MAX_VELOCITY;
          }

-          // Apply cooling factor to gradually slow the system
          newPositions[node.id].vx *= COOLING_FACTOR;
          newPositions[node.id].vy *= COOLING_FACTOR;

-          // Update position
          newPositions[node.id].x += newPositions[node.id].vx;
          newPositions[node.id].y += newPositions[node.id].vy;

-          // Boundary constraints
          const padding = NODE_RADIUS;
          if (newPositions[node.id].x < padding) {
            newPositions[node.id].x = padding;
-            newPositions[node.id].vx *= -0.5; // Bounce back
+            newPositions[node.id].vx *= -0.5;
          }
          if (newPositions[node.id].x > width - padding) {
            newPositions[node.id].x = width - padding;
@ -307,28 +265,23 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
        animationRef.current = null;
      }
    };
-  }, [data.nodes, data.edges, width, height, autoLayout, draggedNode]); // FIX: Added proper dependencies
+  }, [data.nodes, data.edges, width, height, autoLayout, draggedNode]);

-  // Find node at position function
  const findNodeAtPosition = useCallback(
    (x: number, y: number): string | null => {
-      // Transform coordinates based on scale and pan
      const transformedX = (x - panOffset.x) / scale;
      const transformedY = (y - panOffset.y) / scale;

-      // Iterate through nodes in reverse order (top-most first)
      for (let i = data.nodes.length - 1; i >= 0; i--) {
        const node = data.nodes[i];
        const pos = nodePositions[node.id];

        if (!pos) continue;

-        // Calculate distance from click to node center
        const dx = pos.x - transformedX;
        const dy = pos.y - transformedY;
        const distance = Math.sqrt(dx * dx + dy * dy);

-        // If click is inside node radius, return node id
        if (distance <= NODE_RADIUS) {
          return node.id;
        }
@ -336,32 +289,27 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve

      return null;
    },
-    [data.nodes, nodePositions, panOffset, scale],
-  ); // FIX: Added proper dependencies
+    [data.nodes, nodePositions, panOffset, scale]
+  );

-  // Mouse event handlers
  const handleMouseDown = useCallback(
    (e: React.MouseEvent<HTMLCanvasElement>) => {
      const canvas = canvasRef.current;
      if (!canvas) return;

-      // Get click position relative to canvas
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

-      // Find if a node was clicked
      const nodeId = findNodeAtPosition(x, y);

      if (nodeId) {
-        // Set dragged node and calculate offset
        setDraggedNode(nodeId);
        const transformedX = (x - panOffset.x) / scale;
        const transformedY = (y - panOffset.y) / scale;
        setOffsetX(transformedX - nodePositions[nodeId].x);
        setOffsetY(transformedY - nodePositions[nodeId].y);

-        // Reset velocity when starting to drag
        setNodePositions(prev => ({
          ...prev,
          [nodeId]: {
@ -371,35 +319,29 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
          },
        }));
      } else {
-        // Start panning
        setIsPanning(true);
        setPanStart({ x, y });
      }
    },
-    [findNodeAtPosition, nodePositions, panOffset, scale],
-  ); // FIX: Added proper dependencies
+    [findNodeAtPosition, nodePositions, panOffset, scale]
+  );

  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLCanvasElement>) => {
      const canvas = canvasRef.current;
      if (!canvas) return;

-      // Get mouse position relative to canvas
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

-      // Update hovered node
      const nodeId = findNodeAtPosition(x, y);
      setHoveredNode(nodeId);

-      // Handle dragging a node
      if (draggedNode) {
-        // Transform coordinates based on scale and pan
        const transformedX = (x - panOffset.x) / scale;
        const transformedY = (y - panOffset.y) / scale;

-        // Update node position
        setNodePositions(prev => ({
          ...prev,
          [draggedNode]: {
@ -410,9 +352,7 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
            vy: 0,
          },
        }));
-      }
-      // Handle panning
-      else if (isPanning) {
+      } else if (isPanning) {
        const dx = x - panStart.x;
        const dy = y - panStart.y;
        setPanOffset(prev => ({
@ -422,11 +362,10 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
        setPanStart({ x, y });
      }
    },
-    [findNodeAtPosition, draggedNode, isPanning, offsetX, offsetY, panOffset, panStart, scale],
-  ); // FIX: Added proper dependencies
+    [findNodeAtPosition, draggedNode, isPanning, offsetX, offsetY, panOffset, panStart, scale]
+  );

  const handleMouseUp = useCallback(() => {
-    // End any drag or pan operation
    setDraggedNode(null);
    setIsPanning(false);
  }, []);
@ -435,37 +374,30 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    (e: React.WheelEvent<HTMLCanvasElement>) => {
      e.preventDefault();

-      // Get mouse position relative to canvas
      const rect = canvasRef.current?.getBoundingClientRect();
      if (!rect) return;

      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;

-      // Calculate zoom factor
      const scaleFactor = e.deltaY < 0 ? 1.1 : 0.9;
      const newScale = Math.max(0.1, Math.min(5, scale * scaleFactor));

-      // Calculate new pan offset so that point under mouse stays fixed
-      // This is the key part for zooming toward mouse position
      const newPanOffsetX = mouseX - (mouseX - panOffset.x) * (newScale / scale);
      const newPanOffsetY = mouseY - (mouseY - panOffset.y) * (newScale / scale);

-      // Update state
      setScale(newScale);
      setPanOffset({ x: newPanOffsetX, y: newPanOffsetY });
    },
-    [scale, panOffset],
+    [scale, panOffset]
  );

  const toggleAutoLayout = useCallback(() => {
    setAutoLayout(prev => !prev);
  }, []);

-  // Draw controls function
  const drawControls = useCallback(
    (ctx: CanvasRenderingContext2D) => {
-      // Auto layout toggle button
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillRect(width - 120, 20, 100, 40);

@ -475,10 +407,9 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      ctx.textBaseline = 'middle';
      ctx.fillText(autoLayout ? 'Physics: ON' : 'Physics: OFF', width - 70, 40);
    },
-    [autoLayout, width],
+    [autoLayout, width]
  );

-  // Draw function - FIX: Properly memoized with all dependencies
  const drawGraph = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
@ -486,26 +417,20 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

-    // Skip drawing if dimensions are invalid
    if (width <= 0 || height <= 0) return;

-    // Set canvas dimensions to match container
-    // NOTE: Setting canvas width/height clears the canvas, so only do this if needed
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }

-    // Clear canvas
    ctx.fillStyle = '#0f172a'; // Slate-900
    ctx.fillRect(0, 0, width, height);

-    // Apply transformation (scale and pan)
    ctx.save();
    ctx.translate(panOffset.x, panOffset.y);
    ctx.scale(scale, scale);

-    // Draw edges
    data.edges.forEach(edge => {
      const sourceNode = data.nodes.find(n => n.id === edge.source);
      const targetNode = data.nodes.find(n => n.id === edge.target);
@ -519,15 +444,12 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
          ctx.moveTo(sourcePos.x, sourcePos.y);
          ctx.lineTo(targetPos.x, targetPos.y);

-          // Edge styling
          let highlighted = false;
          if (hoveredNode) {
            highlighted = edge.source === hoveredNode || edge.target === hoveredNode;
          }

-          ctx.strokeStyle = highlighted
-            ? '#3b82f6' // bright blue for highlighted edges
-            : edge.color || 'rgba(255, 255, 255, 0.5)';
+          ctx.strokeStyle = highlighted ? '#3b82f6' : edge.color || 'rgba(255, 255, 255, 0.5)';

          ctx.lineWidth = highlighted ? (edge.width ? edge.width + 1 : 3) : edge.width || 1;

@ -536,36 +458,30 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      }
    });

-    // Draw nodes
    data.nodes.forEach(node => {
      const pos = nodePositions[node.id];
      if (!pos) return;

-      // Node styling based on state
      const isHovered = node.id === hoveredNode;
      const isDragged = node.id === draggedNode;

-      // Glow effect for hovered or dragged nodes
      if (isHovered || isDragged) {
        ctx.shadowColor = isDragged ? '#ff9900' : '#3b82f6';
        ctx.shadowBlur = 15;
      }

-      // Draw node circle
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, NODE_RADIUS, 0, 2 * Math.PI);

-      // Fill style based on state
      if (isDragged) {
-        ctx.fillStyle = '#ff9900'; // Orange for dragged node
+        ctx.fillStyle = '#ff9900';
      } else if (isHovered) {
-        ctx.fillStyle = '#3b82f6'; // Blue for hovered node
+        ctx.fillStyle = '#3b82f6';
      } else {
-        ctx.fillStyle = node.bgColor || '#475569'; // Default to slate-600
+        ctx.fillStyle = node.bgColor || '#475569';
      }
      ctx.fill();

-      // Draw border
      ctx.shadowColor = 'transparent';
      ctx.shadowBlur = 0;
      ctx.strokeStyle = 'white';
@ -573,19 +489,17 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      ctx.stroke();

      // Draw initials
-      const initials = `${node.firstName.charAt(0)}${node.lastName.charAt(0)}`;
+      const initials = `${node.firstName} ${node.lastName.charAt(0)}.`;
      ctx.fillStyle = 'white';
      ctx.font = 'bold 16px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(initials, pos.x, pos.y);

-      // Draw name label for hovered or dragged nodes
      if (isHovered || isDragged) {
        const fullName = `${node.firstName} ${node.lastName}`;
        ctx.font = '14px sans-serif';

-        // Add a background for the label
        const textMetrics = ctx.measureText(fullName);
        const textWidth = textMetrics.width;
        const textHeight = 20;
@ -596,7 +510,7 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
          pos.x - textWidth / 2 - padding,
          pos.y + NODE_RADIUS + 5,
          textWidth + padding * 2,
-          textHeight + padding * 2,
+          textHeight + padding * 2
        );

        ctx.fillStyle = 'white';
@ -604,10 +518,8 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      }
    });

-    // Restore canvas transformation
    ctx.restore();

-    // Draw UI controls
    drawControls(ctx);
  }, [
    data,
@ -619,25 +531,20 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    width,
    height,
    drawControls,
-  ]); // FIX: Added all dependencies
-
-  // Handle clicks on controls
+  ]);
  const handleControlClick = useCallback(
    (e: React.MouseEvent<HTMLCanvasElement>) => {
      const x = e.nativeEvent.offsetX;
      const y = e.nativeEvent.offsetY;

-      // Check if auto layout button was clicked
      if (x >= width - 120 && x <= width - 20 && y >= 20 && y <= 60) {
        toggleAutoLayout();
      }
    },
-    [width, toggleAutoLayout],
-  ); // FIX: Added proper dependencies
+    [width, toggleAutoLayout]
+  );

-  // FIX: Ensure continuous rendering with requestAnimationFrame
  useEffect(() => {
-    // Create a continuous rendering loop that doesn't depend on physics updates
    let animationFrameId: number;

    const renderLoop = () => {
@ -645,10 +552,8 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
      animationFrameId = requestAnimationFrame(renderLoop);
    };

-    // Start the render loop
    animationFrameId = requestAnimationFrame(renderLoop);

-    // Clean up
    return () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
@ -656,7 +561,6 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    };
  }, [drawGraph]);

-  // Get cursor style based on current state
  const getCursorStyle = useCallback(() => {
    if (draggedNode) return 'grabbing';
    if (hoveredNode) return 'grab';
@ -664,19 +568,16 @@ const CanvasGraph: React.FC<CanvasGraphProps> = ({ data, width, height, zoomLeve
    return 'default';
  }, [draggedNode, hoveredNode, isPanning]);

-  // FIX: Initial rendering - make sure canvas is properly initialized
  useEffect(() => {
-    // Force the initial draw
    if (width > 0 && height > 0 && canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        canvas.width = width;
        canvas.height = height;
-        ctx.fillStyle = '#0f172a'; // Slate-900
+        ctx.fillStyle = '#0f172a';
        ctx.fillRect(0, 0, width, height);

-        // Draw a loading message until nodes are positioned
        if (data.nodes.length > 0 && Object.keys(nodePositions).length === 0) {
          ctx.fillStyle = 'white';
          ctx.font = '16px sans-serif';
--- a/frontend/src/components/FriendshipNetwork.tsx
+++ b/frontend/src/components/FriendshipNetwork.tsx
@ -1,13 +1,9 @@
-// FriendshipNetwork.tsx - Main component for the friendship network visualization
-
-import React, { useCallback, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useFriendshipNetwork } from '../hooks/useFriendshipNetwork';
 import { useNetworks } from '../context/NetworkContext';
 import {
  FaArrowLeft,
-  FaChevronLeft,
-  FaChevronRight,
  FaExclamationTriangle,
  FaInfo,
  FaTimes,
@ -15,36 +11,30 @@ import {
  FaUserPlus,
 } from 'react-icons/fa';

-// Import components
-import { Button, ConfirmDialog, Toast } from '../components/FriendshipNetworkComponents';
-import NetworkSidebar from '../components/NetworkSidebar';
-import CanvasGraph from '../components/CanvasGraph';
+import { Button, ConfirmDialog, Toast } from './FriendshipNetworkComponents';
+import NetworkSidebar from './NetworkSidebar';
+import CanvasGraph from './CanvasGraph';
+
+import { getRelationshipColor } from '../types/RelationShipTypes';

-// Import types and constants
 import {
  PersonNode,
  RelationshipEdge,
  FormErrors,
  NewPersonForm,
  NewRelationshipForm,
-  RelationshipType,
-} from '../types/types';
+  ToastItem,
+} from '../types/network';

-const RELATIONSHIP_COLORS: Record<RelationshipType, string> = {
-  freund: '#60A5FA', // Light blue
-  partner: '#F472B6', // Pink
-  familie: '#34D399', // Green
-  arbeitskolleg: '#FBBF24', // Yellow
-  custom: '#9CA3AF', // Gray
-};
+import {
+  PersonFormModal,
+  RelationshipFormModal,
+  PersonDetailModal,
+  SettingsModal,
+  HelpModal,
+} from './Modals';

-const RELATIONSHIP_LABELS: Record<RelationshipType, string> = {
-  freund: 'Friend',
-  partner: 'Partner',
-  familie: 'Family',
-  arbeitskolleg: 'Colleague',
-  custom: 'Custom',
-};
+import { LoadingSpinner } from '../components/UIComponents';

 const DEFAULT_SETTINGS = {
  darkMode: true,
@ -55,22 +45,227 @@ const DEFAULT_SETTINGS = {
  nodeSize: 'medium',
 };

-import { useToastNotifications } from '../hooks/useToastNotifications';
-import { useGraphDimensions } from '../hooks/useGraphDimensions';
-import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
-import { useSmartNodePositioning } from '../hooks/useSmartNodePositioning';
+export const useToastNotifications = () => {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);

-// Import modals
-import {
-  PersonFormModal,
-  RelationshipFormModal,
-  PersonDetailModal,
-  SettingsModal,
-  HelpModal,
-} from '../components/Modals';
+  const addToast = useCallback(
+    (message: string, type: 'error' | 'success' | 'warning' | 'info' = 'success') => {
+      const id = Date.now();
+      const newToast = {
+        id,
+        message,
+        type,
+        onClose: () => removeToast(id),
+      };

-// Import UI components
-import { LoadingSpinner } from '../components/UIComponents';
+      setToasts(prevToasts => [...prevToasts, newToast]);
+
+      setTimeout(() => removeToast(id), 3000);
+    },
+    []
+  );
+
+  const removeToast = useCallback((id: number) => {
+    setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
+  }, []);
+
+  return { toasts, addToast, removeToast };
+};
+
+/**
+ * Hook for managing graph container dimensions and handling resize events
+ */
+export const useGraphDimensions = (
+  graphContainerRef: RefObject<HTMLDivElement>,
+  sidebarOpen: boolean
+) => {
+  const [graphDimensions, setGraphDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!graphContainerRef.current) return;
+
+    const updateDimensions = () => {
+      if (graphContainerRef.current) {
+        const { width, height } = graphContainerRef.current.getBoundingClientRect();
+
+        setGraphDimensions(prev => {
+          if (prev.width !== width || prev.height !== height) {
+            return { width, height };
+          }
+          return prev;
+        });
+      }
+    };
+
+    // Initial measurement
+    updateDimensions();
+
+    // Set up resize observer
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    if (graphContainerRef.current) {
+      resizeObserver.observe(graphContainerRef.current);
+    }
+
+    // Set up window resize listener
+    window.addEventListener('resize', updateDimensions);
+
+    // Clean up
+    return () => {
+      if (graphContainerRef.current) {
+        resizeObserver.unobserve(graphContainerRef.current);
+      }
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, []);
+
+  // Update dimensions when sidebar is toggled
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (graphContainerRef.current) {
+        const { width, height } = graphContainerRef.current.getBoundingClientRect();
+        setGraphDimensions({ width, height });
+      }
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [sidebarOpen]);
+
+  return graphDimensions;
+};
+
+/**
+ * Hook for setting up keyboard shortcuts
+ */
+export const useKeyboardShortcuts = (handlers: {
+  handleZoomIn: () => void;
+  handleZoomOut: () => void;
+  handleResetZoom: () => void;
+  toggleSidebar: () => void;
+  setPersonModalOpen: (open: boolean) => void;
+  setRelationshipModalOpen: (open: boolean) => void;
+  setHelpModalOpen: (open: boolean) => void;
+}) => {
+  useEffect(() => {
+    const {
+      handleZoomIn,
+      handleZoomOut,
+      handleResetZoom,
+      toggleSidebar,
+      setPersonModalOpen,
+      setRelationshipModalOpen,
+      setHelpModalOpen,
+    } = handlers;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only apply shortcuts when not in an input field
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
+
+      // Ctrl/Cmd + / to open help modal
+      if ((e.ctrlKey || e.metaKey) && e.key === '/') {
+        e.preventDefault();
+        setHelpModalOpen(true);
+      }
+
+      // + for zoom in
+      if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        handleZoomIn();
+      }
+
+      // - for zoom out
+      if (e.key === '-' || e.key === '_') {
+        e.preventDefault();
+        handleZoomOut();
+      }
+
+      // 0 for reset zoom
+      if (e.key === '0') {
+        e.preventDefault();
+        handleResetZoom();
+      }
+
+      // n for new person
+      if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        setPersonModalOpen(true);
+      }
+
+      // r for new relationship
+      if (e.key === 'r' && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        setRelationshipModalOpen(true);
+      }
+
+      // s for toggle sidebar
+      if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handlers]);
+};
+
+/**
+ * Hook to manage node positions in the graph
+ */
+export const useSmartNodePositioning = (
+  graphWidth: number,
+  graphHeight: number,
+  peopleCount: number
+) => {
+  return useCallback(() => {
+    const centerX = graphWidth / 2;
+    const centerY = graphHeight / 2;
+    const maxRadius = Math.min(graphWidth, graphHeight) * 0.4;
+    const totalNodes = peopleCount;
+    const index = totalNodes;
+
+    if (totalNodes <= 0) {
+      return { x: centerX, y: centerY };
+    } else if (totalNodes <= 4) {
+      const theta = index * 2.399;
+      const radius = maxRadius * 0.5 * Math.sqrt(index / (totalNodes + 1));
+      return {
+        x: centerX + radius * Math.cos(theta),
+        y: centerY + radius * Math.sin(theta),
+      };
+    } else if (totalNodes <= 11) {
+      const isOuterRing = index >= Math.floor(totalNodes / 2);
+      const ringIndex = isOuterRing ? index - Math.floor(totalNodes / 2) : index;
+      const ringTotal = isOuterRing
+        ? totalNodes - Math.floor(totalNodes / 2) + 1
+        : Math.floor(totalNodes / 2);
+      const ringRadius = isOuterRing ? maxRadius * 0.8 : maxRadius * 0.4;
+
+      const angle = (ringIndex / ringTotal) * 2 * Math.PI + (isOuterRing ? 0 : Math.PI / ringTotal);
+      return {
+        x: centerX + ringRadius * Math.cos(angle),
+        y: centerY + ringRadius * Math.sin(angle),
+      };
+    } else {
+      const clusterCount = Math.max(3, Math.floor(Math.sqrt(totalNodes)));
+      const clusterIndex = index % clusterCount;
+
+      const clusterAngle = (clusterIndex / clusterCount) * 2 * Math.PI;
+      const clusterDistance = maxRadius * 0.6;
+      const clusterX = centerX + clusterDistance * Math.cos(clusterAngle);
+      const clusterY = centerY + clusterDistance * Math.sin(clusterAngle);
+
+      const clusterRadius = maxRadius * 0.3;
+      const randomAngle = Math.random() * 2 * Math.PI;
+      const randomDistance = Math.random() * clusterRadius;
+
+      return {
+        x: clusterX + randomDistance * Math.cos(randomAngle),
+        y: clusterY + randomDistance * Math.sin(randomAngle),
+      };
+    }
+  }, [graphWidth, graphHeight, peopleCount]);
+};

 /**
 * Main FriendshipNetwork component
@ -102,11 +297,6 @@ const FriendshipNetwork: React.FC = () => {
    },
  } = useFriendshipNetwork(id || null) as any;

-  // Create a type-safe wrapper for updatePersonPosition
-  const updatePersonPosition = (id: string, position: { x: number; y: number }) => {
-    return updatePersonPositionImpl(id, position);
-  };
-
  // UI state
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [sidebarTab, setSidebarTab] = useState('people');
@ -116,7 +306,10 @@ const FriendshipNetwork: React.FC = () => {

  // Custom hooks
  const { toasts, addToast, removeToast } = useToastNotifications();
-  const graphDimensions = useGraphDimensions(graphContainerRef, sidebarOpen);
+  const graphDimensions = useGraphDimensions(
+    graphContainerRef as React.RefObject<HTMLDivElement>,
+    sidebarOpen
+  );
  const getSmartNodePosition = useSmartNodePositioning(
    graphDimensions.width,
    graphDimensions.height,
@ -152,7 +345,7 @@ const FriendshipNetwork: React.FC = () => {
  const [newRelationship, setNewRelationship] = useState<NewRelationshipForm>({
    source: '',
    target: '',
-    type: 'freund',
+    type: 'friend',
    customType: '',
    notes: '',
    bidirectional: true,
@ -249,8 +442,8 @@ const FriendshipNetwork: React.FC = () => {

    // Create edges
    const graphEdges = relationships.map((rel: RelationshipEdge) => {
-      const color = RELATIONSHIP_COLORS[rel.type] || RELATIONSHIP_COLORS.custom;
-      const width = rel.type === 'partner' ? 4 : rel.type === 'familie' ? 3 : 2;
+      const color = getRelationshipColor(rel.type);
+      const width = rel.type === 'partner' ? 4 : rel.type === 'family' ? 3 : 2;

      // Highlight edges connected to selected node
      const isHighlighted =
@ -417,7 +610,7 @@ const FriendshipNetwork: React.FC = () => {
    setNewRelationship({
      source: '',
      target: '',
-      type: 'freund',
+      type: 'friend',
      customType: '',
      notes: '',
      bidirectional: true,
@ -552,11 +745,6 @@ const FriendshipNetwork: React.FC = () => {
            data={graphData}
            width={graphDimensions.width}
            height={graphDimensions.height}
-            zoomLevel={zoomLevel}
-            onNodeClick={handleNodeClick}
-            onNodeDrag={(nodeId, x, y) => {
-              updatePersonPosition(nodeId, { x, y }).then();
-            }}
          />
        )}

@ -644,7 +832,6 @@ const FriendshipNetwork: React.FC = () => {
        errors={relationshipFormErrors}
        onSubmit={handleRelationshipSubmit}
        people={sortedPeople}
-        relationshipLabels={RELATIONSHIP_LABELS}
      />

      {editPerson && (
@ -665,8 +852,6 @@ const FriendshipNetwork: React.FC = () => {
          }}
          relationships={relationships}
          people={people}
-          relationshipColors={RELATIONSHIP_COLORS}
-          relationshipLabels={RELATIONSHIP_LABELS}
          onDeleteRelationship={deleteRelationship}
          onAddNewConnection={() => {
            setNewRelationship({
--- a/frontend/src/components/FriendshipNetworkComponents.tsx
+++ b/frontend/src/components/FriendshipNetworkComponents.tsx
@ -274,7 +274,7 @@ export const NetworkStats: React.FC<NetworkStatsProps> = ({ people, relationship
    people.length > 0 ? (relationships.length / people.length).toFixed(1) : '0.0';

  const isolatedPeople = people.filter(
-    person => !relationships.some(r => r.source === person._id || r.target === person._id),
+    person => !relationships.some(r => r.source === person._id || r.target === person._id)
  ).length;

  // Find most connected person
@ -286,7 +286,7 @@ export const NetworkStats: React.FC<NetworkStatsProps> = ({ people, relationship
  const mostConnected =
    personConnectionCounts.length > 0
      ? personConnectionCounts.reduce((prev, current) =>
-        prev.count > current.count ? prev : current,
+          prev.count > current.count ? prev : current
        )
      : null;

--- a/frontend/src/components/Modals.tsx
+++ b/frontend/src/components/Modals.tsx
@ -1,35 +1,18 @@
-// Modals.tsx - Modal components for the FriendshipNetwork
-
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import {
-  FaPlus,
-  FaRegCalendarAlt,
-  FaSave,
-  FaStar,
-  FaTrash,
-  FaUserFriends,
-  FaUserPlus,
-} from 'react-icons/fa';
+import { FaPlus, FaRegCalendarAlt, FaSave, FaStar, FaTrash, FaUserFriends, FaUserPlus } from 'react-icons/fa';

 import { Button, FormField, Modal } from '../components/FriendshipNetworkComponents';

-import {
-  PersonNode,
-  RelationshipEdge,
-  RelationshipType,
-  FormErrors,
-  NewPersonForm,
-  NewRelationshipForm,
-} from '../types/types';
+import { FormErrors, NewPersonForm, NewRelationshipForm, PersonNode, RelationshipEdge } from '../types/network';

 import {
-  KeyboardShortcut,
-  TipItem,
-  ToggleSetting,
-  OptionGroup,
-  ErrorMessage,
-} from './UIComponents';
+  getRelationshipColor,
+  getRelationshipLabel,
+  RELATIONSHIP_TYPES,
+  RELATIONSHIPS,
+} from '../types/RelationShipTypes';
+import { ErrorMessage, KeyboardShortcut, OptionGroup, TipItem, ToggleSetting } from './UIComponents';

 // ==============================
 // Person Form Modal
@ -88,7 +71,7 @@ export const PersonFormModal: React.FC<PersonFormModalProps> = ({
              id="birthday"
              selected={formData.birthday}
              onChange={(date: Date | null) => setFormData({ ...formData, birthday: date })}
-              dateFormat="MMMM d, yyyy"
+              dateFormat="dd.MM.yyyy"
              placeholderText="Select birthday"
              className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
              focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
@ -135,7 +118,6 @@ interface RelationshipFormModalProps {
  errors: FormErrors;
  onSubmit: (e: React.FormEvent) => void;
  people: PersonNode[];
-  relationshipLabels: Record<RelationshipType, string>;
 }

 export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
@ -146,7 +128,6 @@ export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
                                                                              errors,
                                                                              onSubmit,
                                                                              people,
-  relationshipLabels,
                                                                            }) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Add New Relationship">
@ -196,13 +177,13 @@ export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
            onChange={e =>
              setFormData({
                ...formData,
-                type: e.target.value as RelationshipType,
+                type: e.target.value as RELATIONSHIP_TYPES,
              })
            }
          >
-            {Object.entries(relationshipLabels).map(([value, label]) => (
+            {Object.entries(RELATIONSHIPS).map(([value, label]) => (
              <option key={value} value={value}>
-                {label}
+                {label.label}
              </option>
            ))}
          </select>
@ -282,8 +263,6 @@ interface PersonDetailModalProps {
  onDelete: (id: string) => void;
  relationships: RelationshipEdge[];
  people: PersonNode[];
-  relationshipColors: Record<RelationshipType, string>;
-  relationshipLabels: Record<RelationshipType, string>;
  onDeleteRelationship: (id: string) => void;
  onAddNewConnection: () => void;
  onNavigateToPerson: (id: string) => void;
@ -299,8 +278,6 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
                                                                      onDelete,
                                                                      relationships,
                                                                      people,
-  relationshipColors,
-  relationshipLabels,
                                                                      onDeleteRelationship,
                                                                      onAddNewConnection,
                                                                      onNavigateToPerson,
@ -340,7 +317,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
                  id="editBirthday"
                  selected={person.birthday ? new Date(person.birthday) : null}
                  onChange={(date: Date | null) => setPerson({ ...person, birthday: date })}
-                  dateFormat="MMMM d, yyyy"
+                  dateFormat="dd.MM.yyyy"
                  placeholderText="Select birthday"
                  className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
                  focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
@ -383,7 +360,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
          <h4 className="font-medium text-indigo-400 mb-2">Connections</h4>
          <div className="max-h-40 overflow-y-auto space-y-1 bg-slate-900 rounded-lg p-2">
            {relationships.filter(
-              (r: RelationshipEdge) => r.source === person._id || r.target === person._id
+              (r: RelationshipEdge) => r.source === person._id || r.target === person._id,
            ).length > 0 ? (
              relationships
                .filter((r: RelationshipEdge) => r.source === person._id || r.target === person._id)
@ -402,7 +379,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
                      <div className="flex items-center">
                        <span
                          className="inline-block w-2 h-2 rounded-full mr-2"
-                          style={{ backgroundColor: relationshipColors[rel.type] }}
+                          style={{ backgroundColor: getRelationshipColor(rel.type) }}
                        ></span>
                        <span className="text-sm">
                          {isSource ? 'To: ' : 'From: '}
@ -414,7 +391,7 @@ export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
                          </span>
                          {rel.type === 'custom'
                            ? ` (${rel.customType})`
-                            : ` (${relationshipLabels[rel.type]})`}
+                            : ` (${getRelationshipLabel(rel.type)})`}
                        </span>
                      </div>
                      <button
--- a/frontend/src/components/NetworkSidebar.tsx
+++ b/frontend/src/components/NetworkSidebar.tsx
@ -9,51 +9,15 @@ import {
  FaUserPlus,
 } from 'react-icons/fa';

-// Import custom UI components
 import { Button, EmptyState, Tooltip, NetworkStats } from './FriendshipNetworkComponents';
+import { PersonNode, RelationshipEdge } from '../types/network';
+import {
+  getRelationshipColor,
+  getRelationshipLabel,
+  RELATIONSHIP_TYPES,
+  RELATIONSHIPS,
+} from '../types/RelationShipTypes';

-// Types
-type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
-
-interface PersonNode {
-  _id: string;
-  firstName: string;
-  lastName: string;
-  birthday?: Date | string | null;
-  notes?: string;
-  position?: {
-    x: number;
-    y: number;
-  };
-}
-
-interface RelationshipEdge {
-  _id: string;
-  source: string;
-  target: string;
-  type: RelationshipType;
-  customType?: string;
-  notes?: string;
-}
-
-// Graph appearance constants
-const RELATIONSHIP_COLORS = {
-  freund: '#60A5FA', // Light blue
-  partner: '#F472B6', // Pink
-  familie: '#34D399', // Green
-  arbeitskolleg: '#FBBF24', // Yellow
-  custom: '#9CA3AF', // Gray
-};
-
-const RELATIONSHIP_LABELS = {
-  freund: 'Friend',
-  partner: 'Partner',
-  familie: 'Family',
-  arbeitskolleg: 'Colleague',
-  custom: 'Custom',
-};
-
-// NetworkSidebar component props
 interface NetworkSidebarProps {
  isOpen: boolean;
  currentNetwork: any;
@ -332,7 +296,7 @@ const NetworkSidebar: React.FC<NetworkSidebarProps> = ({
              >
                All Types
              </button>
-              {Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (
+              {Object.entries(RELATIONSHIPS).map(([type, relationship]) => (
                <button
                  key={type}
                  className={`px-3 py-1 text-xs rounded-full whitespace-nowrap flex items-center ${
@ -340,14 +304,14 @@ const NetworkSidebar: React.FC<NetworkSidebarProps> = ({
                      ? 'bg-indigo-600 text-white'
                      : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                  }`}
-                  onClick={() => onRelationshipTypeFilterChange(type as RelationshipType)}
+                  onClick={() => onRelationshipTypeFilterChange(type as RELATIONSHIP_TYPES)}
                >
                  <span
                    className="w-2 h-2 rounded-full mr-1"
-                    style={{ backgroundColor: color }}
+                    style={{ backgroundColor: relationship.color }}
                  ></span>
                  <span className="capitalize">
-                    {RELATIONSHIP_LABELS[type as RelationshipType]}
+                    {getRelationshipLabel(type as RELATIONSHIP_TYPES)}
                  </span>
                </button>
              ))}
@ -398,12 +362,12 @@ const NetworkSidebar: React.FC<NetworkSidebarProps> = ({
                          <div className="flex items-center text-xs text-slate-400 mt-1">
                            <span
                              className="inline-block w-2 h-2 rounded-full mr-1"
-                              style={{ backgroundColor: RELATIONSHIP_COLORS[rel.type] }}
+                              style={{ backgroundColor: getRelationshipColor(rel.type) }}
                            ></span>
                            <span className="capitalize">
                              {rel.type === 'custom'
                                ? rel.customType
-                                : RELATIONSHIP_LABELS[rel.type]}
+                                : getRelationshipLabel(rel.type)}
                            </span>
                          </div>
                        </div>
--- a/frontend/src/components/UIComponents.tsx
+++ b/frontend/src/components/UIComponents.tsx
@ -1,7 +1,5 @@
-// UIComponents.tsx - Small UI components used in the FriendshipNetwork
-
 import React from 'react';
-import { FormErrors } from '../types/types';
+import { FormErrors } from '../types/network';

 /**
 * Toggle setting component with a switch-style toggle
--- a/frontend/src/components/auth/Login.tsx
+++ b/frontend/src/components/auth/Login.tsx
--- a/frontend/src/components/auth/Register.tsx
+++ b/frontend/src/components/auth/Register.tsx
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@ -17,9 +17,11 @@ const Header: React.FC = () => {
    }
  };

+  // Check if we're on the login or register page
  const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
+
  if (isAuthPage) {
-    return null;
+    return null; // Don't show header on auth pages
  }

  return (
@ -27,10 +29,11 @@ const Header: React.FC = () => {
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center">
-            <Link to="/" className="flex-shrink-0 flex items-center -ml-2">
+            <Link to="/" className="flex-shrink-0 flex items-center">
              <FaNetworkWired className="h-6 w-6 text-indigo-400" />
              <span className="ml-2 text-white font-bold text-xl">RelNet</span>
            </Link>
+
            {user && (
              <nav className="ml-8 flex space-x-4">
                <Link
@ -46,6 +49,7 @@ const Header: React.FC = () => {
              </nav>
            )}
          </div>
+
          <div className="flex items-center">
            {user ? (
              <div className="flex items-center space-x-4">
@ -58,6 +62,7 @@ const Header: React.FC = () => {
                      <FaUser />
                    </div>
                  </button>
+
                  <div className="absolute right-0 mt-2 w-48 bg-slate-800 rounded-md shadow-lg py-1 z-10 border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                    <button
                      onClick={handleLogout}
--- a/frontend/src/components/networks/NetworkList.tsx
+++ b/frontend/src/components/networks/NetworkList.tsx
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
--- a/frontend/src/context/NetworkContext.tsx
+++ b/frontend/src/context/NetworkContext.tsx
--- a/frontend/src/hooks/useFriendshipNetwork.ts
+++ b/frontend/src/hooks/useFriendshipNetwork.ts
@ -3,10 +3,11 @@ import { addPerson, getPeople, Person, removePerson, updatePerson } from '../api
 import {
  addRelationship,
  getRelationships,
-  Relationship,
  removeRelationship,
  updateRelationship,
 } from '../api/relationships';
+import { Relationship } from '../interfaces/IRelationship';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';

 interface PersonNode extends Person {
  // Additional properties needed for the visualization
@ -24,7 +25,7 @@ const DEFAULT_POLL_INTERVAL = 5000;
 // Custom hook to manage friendship network data
 export const useFriendshipNetwork = (
  networkId: string | null,
-  pollInterval = DEFAULT_POLL_INTERVAL,
+  pollInterval = DEFAULT_POLL_INTERVAL
 ) => {
  const [people, setPeople] = useState<PersonNode[]>([]);
  const [relationships, setRelationships] = useState<RelationshipEdge[]>([]);
@ -70,7 +71,7 @@ export const useFriendshipNetwork = (
        // Generate hashes to detect changes
        const positionsHash = JSON.stringify(peopleNodes.map(p => ({ id: p.id, pos: p.position })));
        const relationshipsHash = JSON.stringify(
-          relationshipEdges.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })),
+          relationshipEdges.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type }))
        );

        // Handle people updates
@ -187,7 +188,7 @@ export const useFriendshipNetwork = (
        }
      }
    },
-    [networkId],
+    [networkId]
  );

  // Set up polling for network data
@ -234,7 +235,7 @@ export const useFriendshipNetwork = (

      // Update the reference hash to avoid unnecessary state updates on next poll
      lastPeopleUpdateRef.current = JSON.stringify(
-        updatedPeople.map(p => ({ id: p.id, pos: p.position })),
+        updatedPeople.map(p => ({ id: p.id, pos: p.position }))
      );

      return newPersonNode;
@ -252,7 +253,7 @@ export const useFriendshipNetwork = (
      lastName?: string;
      birthday?: string | null;
      position?: { x: number; y: number };
-    },
+    }
  ): Promise<PersonNode> => {
    if (!networkId) throw new Error('No network selected');

@ -262,14 +263,14 @@ export const useFriendshipNetwork = (

      // Update the local state
      const updatedPeople = people.map(person =>
-        person._id === personId ? updatedPersonNode : person,
+        person._id === personId ? updatedPersonNode : person
      );
      setPeople(updatedPeople);

      // Update the reference hash if position changed to avoid unnecessary state updates on next poll
      if (personData.position) {
        lastPeopleUpdateRef.current = JSON.stringify(
-          updatedPeople.map(p => ({ id: p.id, pos: p.position })),
+          updatedPeople.map(p => ({ id: p.id, pos: p.position }))
        );
      }

@ -293,16 +294,16 @@ export const useFriendshipNetwork = (

      // Remove all relationships involving this person
      const updatedRelationships = relationships.filter(
-        rel => rel.source !== personId && rel.target !== personId,
+        rel => rel.source !== personId && rel.target !== personId
      );
      setRelationships(updatedRelationships);

      // Update both reference hashes to avoid unnecessary state updates on next poll
      lastPeopleUpdateRef.current = JSON.stringify(
-        updatedPeople.map(p => ({ id: p.id, pos: p.position })),
+        updatedPeople.map(p => ({ id: p.id, pos: p.position }))
      );
      lastRelationshipsUpdateRef.current = JSON.stringify(
-        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })),
+        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type }))
      );
    } catch (err: any) {
      setError(err.message || 'Failed to delete person');
@ -314,7 +315,7 @@ export const useFriendshipNetwork = (
  const createRelationship = async (relationshipData: {
    source: string;
    target: string;
-    type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+    type: RELATIONSHIP_TYPES;
    customType?: string;
  }): Promise<RelationshipEdge> => {
    if (!networkId) throw new Error('No network selected');
@ -328,7 +329,7 @@ export const useFriendshipNetwork = (

      // Update the relationship hash to avoid unnecessary state updates on next poll
      lastRelationshipsUpdateRef.current = JSON.stringify(
-        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })),
+        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type }))
      );

      return newRelationshipEdge;
@ -342,9 +343,9 @@ export const useFriendshipNetwork = (
  const updateRelationshipData = async (
    relationshipId: string,
    relationshipData: {
-      type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+      type?: RELATIONSHIP_TYPES;
      customType?: string;
-    },
+    }
  ): Promise<RelationshipEdge> => {
    if (!networkId) throw new Error('No network selected');

@ -352,7 +353,7 @@ export const useFriendshipNetwork = (
      const updatedRelationship = await updateRelationship(
        networkId,
        relationshipId,
-        relationshipData,
+        relationshipData
      );
      const updatedRelationshipEdge: RelationshipEdge = {
        ...updatedRelationship,
@ -360,13 +361,13 @@ export const useFriendshipNetwork = (
      };

      const updatedRelationships = relationships.map(rel =>
-        rel._id === relationshipId ? updatedRelationshipEdge : rel,
+        rel._id === relationshipId ? updatedRelationshipEdge : rel
      );
      setRelationships(updatedRelationships);

      // Update the relationship hash to avoid unnecessary state updates on next poll
      lastRelationshipsUpdateRef.current = JSON.stringify(
-        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })),
+        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type }))
      );

      return updatedRelationshipEdge;
@ -387,7 +388,7 @@ export const useFriendshipNetwork = (

      // Update the relationship hash to avoid unnecessary state updates on next poll
      lastRelationshipsUpdateRef.current = JSON.stringify(
-        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type })),
+        updatedRelationships.map(r => ({ id: r.id, src: r.source, tgt: r.target, type: r.type }))
      );
    } catch (err: any) {
      setError(err.message || 'Failed to delete relationship');
--- a/frontend/src/interfaces/IPersonNode.tsx
+++ b/frontend/src/interfaces/IPersonNode.tsx
@ -0,0 +1,16 @@
+export interface PersonNode {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  birthday?: Date | string | null;
+  notes?: string;
+  position?: {
+    x: number;
+    y: number;
+  };
+}
+
+// Type for form errors
+export interface FormErrors {
+  [key: string]: string;
+}
--- a/frontend/src/interfaces/IRelationship.ts
+++ b/frontend/src/interfaces/IRelationship.ts
@ -0,0 +1,13 @@
+// Types
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+
+export interface Relationship {
+  _id: string;
+  source: string;
+  target: string;
+  type: RELATIONSHIP_TYPES;
+  customType?: string;
+  network: string;
+  createdAt: string;
+  updatedAt: string;
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -11,7 +11,7 @@ if (rootElement) {
  root.render(
    <React.StrictMode>
      <App />
-    </React.StrictMode>,
+    </React.StrictMode>
  );
 } else {
  console.error('Root element not found');
--- a/frontend/src/types/RelationShipTypes.ts
+++ b/frontend/src/types/RelationShipTypes.ts
@ -0,0 +1,24 @@
+export type RELATIONSHIP_TYPES =
+  | 'acquaintance'
+  | 'friend'
+  | 'partner'
+  | 'family'
+  | 'secondDegree'
+  | 'colleague'
+  | 'teacher'
+  | 'exPartner'
+  | 'custom';
+
+export const RELATIONSHIPS: Record<RELATIONSHIP_TYPES, { label: string; color: string }> = {
+  acquaintance: { label: 'Bekannter', color: '#60A5FA' }, // Light blue
+  friend: { label: 'Freund', color: '#60A5FA' }, // Light blue
+  partner: { label: 'Partner', color: '#F472B6' }, // Pink
+  family: { label: 'Familie', color: '#34D399' }, // Green
+  secondDegree: { label: 'Verwandter', color: '#34D399' }, // Green
+  colleague: { label: 'Kollege/Klassenkamerad', color: '#FBBF24' }, // Yellow
+  teacher: { label: 'Lehrer', color: '#FBBF24' }, // Yellow
+  exPartner: { label: 'Ex-Partner', color: '#ce8c13' }, // Orange
+  custom: { label: 'Benutzerdefiniert', color: '#9CA3AF' }, // Gray
+};
+export const getRelationshipLabel = (type: RELATIONSHIP_TYPES): string => RELATIONSHIPS[type].label;
+export const getRelationshipColor = (type: RELATIONSHIP_TYPES): string => RELATIONSHIPS[type].color;
--- a/frontend/src/types/network.ts
+++ b/frontend/src/types/network.ts
@ -1,4 +1,4 @@
-export type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+import { RELATIONSHIP_TYPES } from './RelationShipTypes';

 export interface PersonNode {
  _id: string;
@ -16,7 +16,7 @@ export interface RelationshipEdge {
  _id: string;
  source: string;
  target: string;
-  type: RelationshipType;
+  type: RELATIONSHIP_TYPES;
  customType?: string;
  notes?: string;
 }
@ -38,14 +38,14 @@ export interface GraphEdge {
  target: string;
  color: string;
  width: number;
-  type: RelationshipType;
+  type: RELATIONSHIP_TYPES;
  customType?: string;
 }

 export interface CanvasGraphData {
  nodes: GraphNode[];
  edges: GraphEdge[];
-  links: GraphEdge[]; // Added for compatibility with CustomGraphData
+  links: GraphEdge[];
 }

 export interface FormErrors {
@ -71,7 +71,7 @@ export interface NewPersonForm {
 export interface NewRelationshipForm {
  source: string;
  target: string;
-  type: RelationshipType;
+  type: RELATIONSHIP_TYPES;
  customType: string;
  notes: string;
  bidirectional: boolean;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,113 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "libReplacement": true,                           /* Enable lib replacement. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    "noEmitOnError": false,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+    // "erasableSyntaxOnly": true,                       /* Do not allow runtime constructs that are not part of ECMAScript. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    "noImplicitAny": false,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  build: {
+    outDir: 'dist',
+  },
+});
--- a/package.json
+++ b/package.json
@ -1,53 +1,51 @@
 {
  "name": "relnet",
  "version": "1.0.0",
-  "type": "module",
+  "main": "dist/main.js",
  "scripts": {
-    "dev": "vite",
-    "server": "bun run server/dev.ts",
-    "dev:all": "concurrently \"bun run dev\" \"bun run server\"",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "start": "NODE_ENV=production bun run dist/server/index.js",
-    "format": "prettier --write \"src/**/*.{tsx,ts,js,jsx,json,css,html}\"",
-    "format:check": "prettier --check \"src/**/*.{tsx,ts,js,jsx,json,css,html}\""
+    "start": "node dist/server.js",
+    "dev": "nodemon --exec ts-node src/server.ts",
+    "build": "tsc",
+    "build:all": "npm run build && cd frontend && npm run build",
+    "format": "prettier --write \"src/**/*.{ts,js,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,js,json}\"",
+    "format:all": "npm run format && cd frontend && npm run format"
  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/philipredstone/relnet.git"
+  },
+  "author": "Tobias Hopp <tobstr02> & Philip Rothstein <philipredstone>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/philipredstone/relnet/issues"
+  },
+  "homepage": "https://github.com/philipredstone/relnet#readme",
+  "description": "Visualize your network among you and your friends",
  "dependencies": {
-    "@headlessui/react": "^2.2.1",
-    "axios": "^1.8.4",
-    "cookie-parser": "^1.4.6",
+    "bcryptjs": "^3.0.2",
+    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
-    "framer-motion": "^12.7.3",
-    "helmet": "^7.1.0",
-    "react": "^19.1.0",
-    "react-datepicker": "^8.3.0",
-    "react-dom": "^19.1.0",
-    "react-force-graph-2d": "^1.27.1",
-    "react-icons": "^5.5.0",
-    "react-router-dom": "^7.5.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.0"
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0",
+    "express-validator": "^7.2.1",
+    "helmet": "^8.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "mongoose": "^8.13.2"
  },
  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.4",
-    "@types/axios": "^0.14.4",
-    "@types/cookie-parser": "^1.4.6",
+    "@types/bcryptjs": "^3.0.0",
+    "@types/cookie-parser": "^1.4.8",
    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
+    "@types/dotenv": "^8.2.3",
+    "@types/express": "^5.0.1",
+    "@types/helmet": "^4.0.0",
+    "@types/jsonwebtoken": "^9.0.9",
+    "@types/mongoose": "^5.11.97",
    "@types/node": "^22.14.1",
-    "@types/react": "^19.1.2",
-    "@types/react-datepicker": "^4.19.6",
-    "@types/react-dom": "^19.1.2",
-    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^4.4.0",
-    "autoprefixer": "^10.4.21",
-    "concurrently": "^8.2.2",
-    "postcss": "^8.4.32",
+    "nodemon": "^3.1.9",
    "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.4",
-    "vite-plugin-node": "^5.0.1"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
--- a/server/dev.ts
+++ b/server/dev.ts
@ -1,7 +0,0 @@
-// This file is used for starting the server in development mode
-import app from './index';
-
-const PORT = process.env.PORT || 3001;
-app.listen(PORT, () => {
-  console.log(`Server running on port ${PORT}`);
-});
--- a/src/api/api.ts
+++ b/src/api/api.ts
@ -1,14 +0,0 @@
-export const getApiUrl = (): string => {
-  // const protocol = window.location.protocol;
-  // const hostname = window.location.hostname;
-  // const port = window.location.port;
-
-  // // @ts-ignore
-  // if (import.meta.env.DEV) {
-  //   return protocol + '//' + hostname + ':5000' + '/api';
-  // } else {
-  //   return protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
-  // }
-
-  return '/api';
-};
--- a/server/index.ts
+++ b/server/index.ts
@ -8,12 +8,9 @@ import peopleRoutes from './routes/people.routes';
 import relationshipRoutes from './routes/relationship.routes';
 import path from 'node:path';
 import helmet from 'helmet';
-import connectDB from './config/db';

 dotenv.config();

-connectDB();
-
 const app: Application = express();

 // Middleware
@ -43,7 +40,7 @@ app.use(express.json());
 app.use(cookieParser());
 app.use(
  cors({
-    origin: 'http://0.0.0.0:3000',
+    origin: process.env.APP_URL || 'http://localhost:3000',
    credentials: true,
  })
 );
@ -59,25 +56,10 @@ app.get('/api/health', (req, res) => {
  res.send('OK');
 });

-// In development, Vite handles static files
-// In production, we serve static files from the dist directory
-if (process.env.NODE_ENV === 'production') {
-  app.use(express.static(path.resolve(__dirname, '../dist')));
+app.use(express.static(path.join(__dirname, '../frontend/dist/')));

-  // Always return the main index.html for any route that doesn't match an API endpoint
-  app.get('*', (req, res) => {
-    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
+app.use((req, res, next) => {
+  res.sendFile(path.join(__dirname, '..', 'frontend/dist/index.html'));
 });
-} else {
-  // This will be handled by the Vite dev server
-}
-
-// This setup allows the server to be used both standalone and with Vite
-if (import.meta.env?.PROD) {
-  const PORT = process.env.PORT || 3001;
-  app.listen(PORT, () => {
-    console.log(`Server running on port ${PORT}`);
-  });
-}

 export default app;
--- a/server/config/db.ts
+++ b/server/config/db.ts
--- a/server/controllers/auth.controller.ts
+++ b/server/controllers/auth.controller.ts
@ -4,7 +4,7 @@ import User, { IUser } from '../models/user.model';
 import Network from '../models/network.model';
 import Person from '../models/person.model';
 import Relationship from '../models/relationship.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';
 import { validationResult } from 'express-validator';
 import mongoose from 'mongoose';

@ -217,12 +217,12 @@ const createSampleDemoNetwork = async (userId: mongoose.Types.ObjectId | string)

    // Create relationships between people
    const relationships = [
-      { source: 'JohnSmith', target: 'EmmaJohnson', type: 'freund' },
-      { source: 'EmmaJohnson', target: 'MichaelWilliams', type: 'familie' },
-      { source: 'MichaelWilliams', target: 'SarahBrown', type: 'arbeitskolleg' },
-      { source: 'SarahBrown', target: 'DavidJones', type: 'freund' },
+      { source: 'JohnSmith', target: 'EmmaJohnson', type: 'friend' },
+      { source: 'EmmaJohnson', target: 'MichaelWilliams', type: 'family' },
+      { source: 'MichaelWilliams', target: 'SarahBrown', type: 'colleague' },
+      { source: 'SarahBrown', target: 'DavidJones', type: 'friend' },
      { source: 'DavidJones', target: 'LisaGarcia', type: 'partner' },
-      { source: 'JohnSmith', target: 'DavidJones', type: 'arbeitskolleg' },
+      { source: 'JohnSmith', target: 'DavidJones', type: 'colleague' },
    ];

    // Create each relationship
--- a/server/controllers/network.controller.ts
+++ b/server/controllers/network.controller.ts
@ -1,6 +1,6 @@
 import { Response } from 'express';
 import Network from '../models/network.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';
 import { validationResult } from 'express-validator';

 // Get all networks for current user and all public networks
--- a/server/controllers/people.controller.ts
+++ b/server/controllers/people.controller.ts
@ -1,7 +1,7 @@
 import { Response } from 'express';
 import Person from '../models/person.model';
 import Relationship from '../models/relationship.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';
 import { validationResult } from 'express-validator';

 // Get all people in a network
--- a/server/controllers/relationship.controller.ts
+++ b/server/controllers/relationship.controller.ts
@ -1,7 +1,7 @@
 import { Response } from 'express';
 import Relationship from '../models/relationship.model';
 import Person from '../models/person.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';
 import { validationResult } from 'express-validator';

 // Get all relationships in a network
--- a/src/hooks/useGraphDimensions.ts
+++ b/src/hooks/useGraphDimensions.ts
@ -1,63 +0,0 @@
-import { useState, useEffect, useCallback, RefObject } from 'react';
-import { ToastItem } from '../types/types';
-
-/**
- * Hook for managing graph container dimensions and handling resize events
- */
-export const useGraphDimensions = (
-  graphContainerRef: RefObject<HTMLDivElement>,
-  sidebarOpen: boolean
-) => {
-  const [graphDimensions, setGraphDimensions] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!graphContainerRef.current) return;
-
-    const updateDimensions = () => {
-      if (graphContainerRef.current) {
-        const { width, height } = graphContainerRef.current.getBoundingClientRect();
-
-        setGraphDimensions(prev => {
-          if (prev.width !== width || prev.height !== height) {
-            return { width, height };
-          }
-          return prev;
-        });
-      }
-    };
-
-    // Initial measurement
-    updateDimensions();
-
-    // Set up resize observer
-    const resizeObserver = new ResizeObserver(updateDimensions);
-    if (graphContainerRef.current) {
-      resizeObserver.observe(graphContainerRef.current);
-    }
-
-    // Set up window resize listener
-    window.addEventListener('resize', updateDimensions);
-
-    // Clean up
-    return () => {
-      if (graphContainerRef.current) {
-        resizeObserver.unobserve(graphContainerRef.current);
-      }
-      window.removeEventListener('resize', updateDimensions);
-    };
-  }, []);
-
-  // Update dimensions when sidebar is toggled
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      if (graphContainerRef.current) {
-        const { width, height } = graphContainerRef.current.getBoundingClientRect();
-        setGraphDimensions({ width, height });
-      }
-    }, 300);
-
-    return () => clearTimeout(timeoutId);
-  }, [sidebarOpen]);
-
-  return graphDimensions;
-};
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@ -1,78 +0,0 @@
-import { useState, useEffect, useCallback, RefObject } from 'react';
-import { ToastItem } from '../types/types';
-
-/**
- * Hook for setting up keyboard shortcuts
- */
-export const useKeyboardShortcuts = (handlers: {
-  handleZoomIn: () => void;
-  handleZoomOut: () => void;
-  handleResetZoom: () => void;
-  toggleSidebar: () => void;
-  setPersonModalOpen: (open: boolean) => void;
-  setRelationshipModalOpen: (open: boolean) => void;
-  setHelpModalOpen: (open: boolean) => void;
-}) => {
-  useEffect(() => {
-    const {
-      handleZoomIn,
-      handleZoomOut,
-      handleResetZoom,
-      toggleSidebar,
-      setPersonModalOpen,
-      setRelationshipModalOpen,
-      setHelpModalOpen,
-    } = handlers;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only apply shortcuts when not in an input field
-      const target = e.target as HTMLElement;
-      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
-
-      // Ctrl/Cmd + / to open help modal
-      if ((e.ctrlKey || e.metaKey) && e.key === '/') {
-        e.preventDefault();
-        setHelpModalOpen(true);
-      }
-
-      // + for zoom in
-      if (e.key === '+' || e.key === '=') {
-        e.preventDefault();
-        handleZoomIn();
-      }
-
-      // - for zoom out
-      if (e.key === '-' || e.key === '_') {
-        e.preventDefault();
-        handleZoomOut();
-      }
-
-      // 0 for reset zoom
-      if (e.key === '0') {
-        e.preventDefault();
-        handleResetZoom();
-      }
-
-      // n for new person
-      if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        setPersonModalOpen(true);
-      }
-
-      // r for new relationship
-      if (e.key === 'r' && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        setRelationshipModalOpen(true);
-      }
-
-      // s for toggle sidebar
-      if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        toggleSidebar();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handlers]);
-};
--- a/src/hooks/useSmartNodePositioning.ts
+++ b/src/hooks/useSmartNodePositioning.ts
@ -1,60 +0,0 @@
-import { useState, useEffect, useCallback, RefObject } from 'react';
-import { ToastItem } from '../types/types';
-
-/**
- * Hook to manage node positions in the graph
- */
-export const useSmartNodePositioning = (
-  graphWidth: number,
-  graphHeight: number,
-  peopleCount: number
-) => {
-  return useCallback(() => {
-    const centerX = graphWidth / 2;
-    const centerY = graphHeight / 2;
-    const maxRadius = Math.min(graphWidth, graphHeight) * 0.4;
-    const totalNodes = peopleCount;
-    const index = totalNodes;
-
-    if (totalNodes <= 0) {
-      return { x: centerX, y: centerY };
-    } else if (totalNodes <= 4) {
-      const theta = index * 2.399;
-      const radius = maxRadius * 0.5 * Math.sqrt(index / (totalNodes + 1));
-      return {
-        x: centerX + radius * Math.cos(theta),
-        y: centerY + radius * Math.sin(theta),
-      };
-    } else if (totalNodes <= 11) {
-      const isOuterRing = index >= Math.floor(totalNodes / 2);
-      const ringIndex = isOuterRing ? index - Math.floor(totalNodes / 2) : index;
-      const ringTotal = isOuterRing
-        ? totalNodes - Math.floor(totalNodes / 2) + 1
-        : Math.floor(totalNodes / 2);
-      const ringRadius = isOuterRing ? maxRadius * 0.8 : maxRadius * 0.4;
-
-      const angle = (ringIndex / ringTotal) * 2 * Math.PI + (isOuterRing ? 0 : Math.PI / ringTotal);
-      return {
-        x: centerX + ringRadius * Math.cos(angle),
-        y: centerY + ringRadius * Math.sin(angle),
-      };
-    } else {
-      const clusterCount = Math.max(3, Math.floor(Math.sqrt(totalNodes)));
-      const clusterIndex = index % clusterCount;
-
-      const clusterAngle = (clusterIndex / clusterCount) * 2 * Math.PI;
-      const clusterDistance = maxRadius * 0.6;
-      const clusterX = centerX + clusterDistance * Math.cos(clusterAngle);
-      const clusterY = centerY + clusterDistance * Math.sin(clusterAngle);
-
-      const clusterRadius = maxRadius * 0.3;
-      const randomAngle = Math.random() * 2 * Math.PI;
-      const randomDistance = Math.random() * clusterRadius;
-
-      return {
-        x: clusterX + randomDistance * Math.cos(randomAngle),
-        y: clusterY + randomDistance * Math.sin(randomAngle),
-      };
-    }
-  }, [graphWidth, graphHeight, peopleCount]);
-};
--- a/src/hooks/useToastNotifications.ts
+++ b/src/hooks/useToastNotifications.ts
@ -1,30 +0,0 @@
-import { useState, useEffect, useCallback, RefObject } from 'react';
-import { ToastItem } from '../types/types';
-
-export const useToastNotifications = () => {
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-
-  const addToast = useCallback(
-    (message: string, type: 'error' | 'success' | 'warning' | 'info' = 'success') => {
-      const id = Date.now();
-      const newToast = {
-        id,
-        message,
-        type,
-        onClose: () => removeToast(id),
-      };
-
-      setToasts(prevToasts => [...prevToasts, newToast]);
-
-      // Auto-remove after 3 seconds
-      setTimeout(() => removeToast(id), 3000);
-    },
-    []
-  );
-
-  const removeToast = useCallback((id: number) => {
-    setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
-  }, []);
-
-  return { toasts, addToast, removeToast };
-};
--- a/server/middleware/auth.middleware.ts
+++ b/server/middleware/auth.middleware.ts
@ -1,7 +1,7 @@
 import { Response, NextFunction } from 'express';
 import jwt from 'jsonwebtoken';
 import User from '../models/user.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';

 // JWT secret from environment variables
 const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key_change_this';
--- a/server/middleware/network-access.middleware.ts
+++ b/server/middleware/network-access.middleware.ts
@ -1,6 +1,6 @@
 import { Response, NextFunction } from 'express';
 import Network from '../models/network.model';
-import { UserRequest } from '../../frontend/types/express';
+import { UserRequest } from '../types/express';

 export const checkNetworkAccess = async (
  req: UserRequest,
--- a/server/models/network.model.ts
+++ b/server/models/network.model.ts
--- a/server/models/person.model.ts
+++ b/server/models/person.model.ts
--- a/server/models/relationship.model.ts
+++ b/server/models/relationship.model.ts
@ -1,5 +1,10 @@
 import mongoose, { Document, Schema } from 'mongoose';

+
+export const RELATIONSHIP_TYPES = [
+  'acquaintance', 'friend', 'partner', 'family', 'secondDegree', 'colleague', 'teacher', 'exPartner', 'custom',
+];
+
 export interface IRelationship extends Document {
  _id: string;
  source: mongoose.Types.ObjectId;
@ -24,7 +29,7 @@ const RelationshipSchema = new Schema(
    type: {
      type: String,
      required: [true, 'Relationship type is required'],
-      enum: ['freund', 'partner', 'familie', 'arbeitskolleg', 'custom'],
+      enum: RELATIONSHIP_TYPES,
    },
    customType: {
      type: String,
@ -36,7 +41,7 @@ const RelationshipSchema = new Schema(
      required: true,
    },
  },
-  { timestamps: true }
+  { timestamps: true },
 );

 // Create compound index to ensure unique relationships in a network
--- a/server/models/user.model.ts
+++ b/server/models/user.model.ts
--- a/server/routes/auth.routes.ts
+++ b/server/routes/auth.routes.ts
--- a/server/routes/network.routes.ts
+++ b/server/routes/network.routes.ts
--- a/server/routes/people.routes.ts
+++ b/server/routes/people.routes.ts
--- a/server/routes/relationship.routes.ts
+++ b/server/routes/relationship.routes.ts
@ -3,6 +3,8 @@ import { check } from 'express-validator';
 import * as relationshipController from '../controllers/relationship.controller';
 import { auth } from '../middleware/auth.middleware';
 import { checkNetworkAccess } from '../middleware/network-access.middleware';
+import { RELATIONSHIP_TYPES } from '../models/relationship.model';
+

 const router = express.Router();

@ -22,13 +24,7 @@ router.post(
  [
    check('source', 'Source person ID is required').not().isEmpty().isMongoId(),
    check('target', 'Target person ID is required').not().isEmpty().isMongoId(),
-    check('type', 'Relationship type is required').isIn([
-      'freund',
-      'partner',
-      'familie',
-      'arbeitskolleg',
-      'custom',
-    ]),
+    check('type', 'Relationship type is required').isIn(RELATIONSHIP_TYPES),
    check('customType', 'Custom type is required when type is custom')
      .if(check('type').equals('custom'))
      .not()
@ -45,7 +41,7 @@ router.put(
  [
    check('type', 'Relationship type must be valid if provided')
      .optional()
-      .isIn(['freund', 'partner', 'familie', 'arbeitskolleg', 'custom']),
+      .isIn(RELATIONSHIP_TYPES),
    check('customType', 'Custom type is required when type is custom')
      .if(check('type').equals('custom'))
      .not()
--- a/src/server.ts
+++ b/src/server.ts
@ -0,0 +1,15 @@
+import app from './app';
+import connectDB from './config/db';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const PORT = process.env.PORT || 5000;
+
+// Connect to MongoDB
+connectDB();
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});
--- a/src/types/express.d.ts
+++ b/src/types/express.d.ts
@ -0,0 +1,8 @@
+import { Request } from 'express';
+import { IUser } from '../models/user.model';
+import { INetwork } from '../models/network.model';
+
+export interface UserRequest extends Request {
+  user?: IUser;
+  network?: INetwork;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,36 +1,15 @@
 {
  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
+    "target": "es2018",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["frontend/*"],
-      "@server/*": ["server/*"]
-    },
-
-    /* For Node.js compatibility */
    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
  },
-  "include": ["frontend", "server", "src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.test.ts"]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,39 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { resolve } from 'path';
-import tailwindcss from '@tailwindcss/vite';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src'),
-      '@server': resolve(__dirname, 'server'),
-    },
-  },
-  optimizeDeps: {
-    include: [
-      'react',
-      'react-dom',
-      'react-router-dom',
-      'framer-motion',
-      'react-icons',
-      'react-force-graph-2d',
-    ],
-  },
-  server: {
-    port: 3000,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:5000',
-        changeOrigin: true,
-        secure: false,
-      },
-    },
-  },
-  build: {
-    outDir: 'dist',
-    manifest: true,
-  },
-});
Author	SHA1	Message	Date
Tobias Hopp	c71593ffd5	Merge branch 'main' of https://github.com/philipredstone/relnet	2025-04-17 15:24:34 +02:00
Tobias Hopp	b89f6b19a4	Increase node size and distance and fix error Took 8 minutes Took 10 minutes	2025-04-17 15:23:45 +02:00
Tobias Hopp	47ef38df75	Increase node size and distance Took 8 minutes	2025-04-17 14:49:32 +02:00
Tobias Hopp	f1ead87340	Fixed philips fixes Took 15 minutes	2025-04-17 14:37:07 +02:00
philipredstone	581433612b	refactor ui	2025-04-17 14:14:01 +02:00
Tobias Hopp	d55e58d099	Reformat Took 18 minutes	2025-04-17 13:08:27 +02:00
Tobias Hopp	006b648dd0	Update width for relationship edges Took 6 minutes	2025-04-16 16:18:24 +02:00
Tobias Hopp	c31b5c5b14	Refactor relationship types to single class and add more Took 38 minutes	2025-04-16 15:39:13 +02:00
Tobias Hopp	0333d37aae	Refactor to interfaces and type classes Took 5 minutes	2025-04-16 13:59:15 +02:00
Tobias Hopp	3da29516ec	Refactor friendship types to one type Took 10 minutes	2025-04-16 13:49:58 +02:00
Tobias Hopp	00e7294f41	Set name to firstname and first letter of lastname and increase node size Took 3 hours 34 minutes	2025-04-16 13:25:47 +02:00
Tobias Hopp	b054d55018	add autofocus for modals	2025-04-16 11:27:39 +02:00
Tobias Hopp	bbb3645d99	Fix birthdate input	2025-04-16 11:17:50 +02:00
Tobias Hopp	9ce80b4c59	Fix Dockerfile healthcheck, add curl	2025-04-16 10:53:55 +02:00