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

Dockerfile

@@ -33,14 +33,14 @@ RUN yarn run build
 
 
 # Final stage
-FROM node:22
+FROM node:22-slim
-COPY --from=frontend-builder /frontend/dist/ /app/frontend/dist
+COPY --from=frontend-builder /frontend/dist/ frontend/dist
-COPY --from=backend-builder /app/dist /app/dist
+COPY --from=backend-builder /app/dist/ dist/
+COPY --from=backend-builder /app/node_modules node_modules
 COPY package.json .
 
 ENV PORT=80
 ENV MONGODB_URI=mongodb://db:27017/friendship-network
-ENV JWT_SECRET=7hPqh6pS91WCQY
 ENV APP_URL=http://localhost:80
 ENV ENABLE_REGISTRATION=true
 

LICENSE.txt

@@ -0,0 +1,16 @@
+Copyright (c) 2025 Tobias Hopp and Philip Rothstein
+
+All rights reserved.
+
+Permission is hereby granted to use the software as is for personal and internal organizational purposes only. Any modification, redistribution (whether modified or unmodified), or commercial exploitation of the software, including incorporation into other products or services, is strictly prohibited unless a written permission has been obtained from the copyright owner.
+
+Restrictions:
+
+    Modification: You may not modify, alter, or create derivative works of the software without prior written consent.
+
+    Redistribution: You may not redistribute or sublicense any version of the software without obtaining explicit permission.
+
+    Commercial Use: Any form of commercial exploitation, including selling or licensing the software or its derivatives, is not allowed without a separate licensing agreement.
+
+Disclaimer:
+This software is provided "as is", without warranty of any kind, express or implied. In no event shall the copyright owner be liable for any claim, damages, or other liability.

README.md

@@ -0,0 +1,137 @@
+# Relnet: Friendship Connection Visualizer
+
+A dynamic web application for visualizing and managing a friendship network. This project uses React Flow to display interactive connection graphs between friends, and includes a backend server built with Node.js, TypeScript, Express, and Mongoose for data persistence.
+
+## Overview
+
+The Friendship Connection Visualizer lets you easily map out your social network. You can add people with their first and last names (with an optional birthday), establish relationships between them, and interact with the network through a draggable graph interface. When a node (representing a person) is clicked, a popup appears displaying a detailed list of all relationships for that individual.
+
+## Features
+
+- **User Management**
+    - **Add Person:** Use the sidebar form to add individuals by entering first and last names. An optional field for birthday is also available.
+    - **Display Format:** On the graph, each person is represented by their first name and the first character of their last name.
+    - **Deletion:** Remove people easily from your network with a dedicated delete button.
+
+- **Relationship Management**
+    - **Create Relationships:** Build connections by selecting a person from the dropdown and then choosing one or more individuals from a multi-select box for establishing relationships.
+    - **Relationship Types:** Visualize different kinds of relationships with unique colors:
+        - Blue for friends
+        - Green for family
+        - Yellow for colleagues
+        - Gray for acquaintances
+
+- **Interactive Visualization**
+    - **Dynamic Graph:** Use React Flow to view an interactive network graph where nodes are draggable, allowing you to reorganize the display.
+    - **Popups:** When clicking on a person in the graph, a popup appears with a detailed list of all their connections and relationship details.
+
+## Tech Stack
+
+- **Backend:**
+    - **Node.js & TypeScript:** Server-side development with strong typing.
+    - **Express:** Web framework for handling routes and middleware.
+    - **Mongoose:** ODM for MongoDB, providing schema-based data management.
+
+- **Frontend:**
+    - **React:** User interface library to create interactive components.
+    - **Vite:** Fast development environment and build tool.
+    - **React Flow:** Library for creating interactive node-based diagrams.
+
+## Project Structure
+
+```plaintext
+frontend/
+├── src/
+│   ├── api/
+│   ├── components/
+│   ├── context/
+│   ├── hooks/
+│   ├── App.tsx     
+│   ├── main.tsx     
+│   ├── index.html     
+backend/
+├── src/
+│   ├── config/          # Configuration files
+│   ├── controllers/     # API controllers
+│   ├── middleware/      # Authentication middleware
+│   ├── models/          # MongoDB models
+│   ├── routes/          # API routes
+│   ├── types/           # TypeScript interfaces
+│   ├── app.ts           # Express app setup
+│   └── server.ts        # Entry point
+├── .env                 # Environment variables
+├── .gitignore           # Git ignore file
+├── package.json         # Dependencies
+└── tsconfig.json        # TypeScript configuration
+```
+
+## Installation
+
+### Prerequisites
+
+- **Node.js** (v22 recommended)
+- **npm** or **yarn**
+- **MongoDB** for the database
+
+### Backend Setup
+
+1. Clone repo
+2. Install dependencies:
+    ```bash
+    yarn install
+    ```
+3. Create a `.env` file to store configuration variables (e.g., MongoDB URI, PORT, etc.).
+4. Start the server in development mode:
+    ```bash
+    npm run dev
+    ```
+
+### Frontend Setup
+
+1. Navigate to the frontend folder:
+    ```bash
+    cd frontend
+    ```
+2. Install dependencies:
+    ```bash
+    yarn install
+    ```
+3. Start the development server:
+    ```bash
+    npm run dev
+    ```
+
+## Usage
+
+1. **Adding People:**
+    - Use the sidebar to enter the first name, last name, and optionally, a birthday.
+    - Click the **Add** button to add the person to your network.
+
+2. **Creating Relationships:**
+    - In the relationship menu, select the first person.
+    - Use the multi-select dropdown to choose one or more people for the relationship.
+    - Choose the relationship type (friends, family, colleagues, or acquaintances) and create the connection.
+
+3. **Interacting with the Graph:**
+    - Drag nodes around the visualization area to reorganize your network.
+    - Click a node to open a popup displaying the person’s detailed relationship list.
+
+4. **Deleting People:**
+    - Click the delete button on a node or in the popup to remove a person from the network.
+
+## Future Enhancements
+
+- **Enhanced User Profiles:** Additional fields and profile pictures.
+- **Search and Filter:** Advanced search capabilities to quickly find people or relationships.
+- **Real-time Updates:** Incorporate WebSockets for live network updates.
+- **Mobile Responsiveness:** Optimizations for mobile devices.
+
+## Contributing
+
+Contributions are welcome! If you have any ideas, bug reports, or feature requests, please open an issue or submit a pull request.  
+Ensure that all code and comments in the source code remain in English to maintain consistency.
+
+## License
+
+This project is licensed under the Custom Proprietary License – see the [LICENSE.txt](LICENSE.txt) file for details.
+

docker-compose.traefik.yml

@@ -4,9 +4,12 @@ networks:
   traefik:
     external: true
 
+volumes:
+  db:
+
 services:
   relnet:
-    image: github.com/philipredstone/relnet:latest
+    image: ghcr.io/philipredstone/relnet:latest
     build: .
     networks:
       - internal

docker-compose.yml

@@ -2,9 +2,12 @@ networks:
   internal:
     internal: true
 
+volumes:
+  db:
+
 services:
   relnet:
-    image: github.com/philipredstone/relnet:latest
+    image: ghcr.io/philipredstone/relnet:latest
     build: .
     ports:
       - "80:80"

frontend/app.css

@@ -1 +0,0 @@
-@import "tailwindcss";

frontend/index.html

@@ -4,7 +4,6 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Relnet</title>
-    <link href="./app.css" rel="stylesheet">
   <!--<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>-->
 </head>
 <body>

frontend/package.json

@@ -30,6 +30,7 @@
     "@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",
     "prettier": "^3.5.3",

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 './components/FriendshipNetwork'; // Your existing component
+import FriendshipNetwork from './components/FriendshipNetwork';
 import Header from './components/layout/Header';
 
 // Protected route component

frontend/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './app.css';
 
 // Create root and render the App component into the HTML element with ID 'root'
 const rootElement = document.getElementById('root');