From e1aff7af2cd1b686df7d9f3d6be8e10dc26df41d Mon Sep 17 00:00:00 2001 From: Tobias Hopp Date: Tue, 15 Apr 2025 16:19:19 +0200 Subject: [PATCH 1/3] Update README.md, add license and update Dockerfile --- LICENSE.txt | 16 +++++ README.md | 137 +++++++++++++++++++++++++++++++++++++ docker-compose.traefik.yml | 2 +- docker-compose.yml | 2 +- 4 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 LICENSE.txt diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..f822b88 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md index e69de29..c1864e1 100644 --- a/README.md +++ b/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. + diff --git a/docker-compose.traefik.yml b/docker-compose.traefik.yml index 6f8ecd6..d5f8074 100644 --- a/docker-compose.traefik.yml +++ b/docker-compose.traefik.yml @@ -6,7 +6,7 @@ networks: services: relnet: - image: github.com/philipredstone/relnet:latest + image: ghcr.io/philipredstone/relnet:latest build: . networks: - internal diff --git a/docker-compose.yml b/docker-compose.yml index 03d0aa4..1c37ea0 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,7 +4,7 @@ networks: services: relnet: - image: github.com/philipredstone/relnet:latest + image: ghcr.io/philipredstone/relnet:latest build: . ports: - "80:80" From a0843a46b252dfeee6af0045468cbd97119a24ce Mon Sep 17 00:00:00 2001 From: Tobias Hopp Date: Tue, 15 Apr 2025 16:33:22 +0200 Subject: [PATCH 2/3] Fix Dockerfile --- Dockerfile | 8 ++++---- docker-compose.traefik.yml | 3 +++ docker-compose.yml | 3 +++ frontend/index.html | 10 +++++----- frontend/src/App.tsx | 2 +- 5 files changed, 16 insertions(+), 10 deletions(-) diff --git a/Dockerfile b/Dockerfile index 29edec8..e458bbf 100644 --- a/Dockerfile +++ b/Dockerfile @@ -33,14 +33,14 @@ RUN yarn run build # Final stage -FROM node:22 -COPY --from=frontend-builder /frontend/dist/ /app/frontend/dist -COPY --from=backend-builder /app/dist /app/dist +FROM node:22-slim +COPY --from=frontend-builder /frontend/dist/ frontend/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 diff --git a/docker-compose.traefik.yml b/docker-compose.traefik.yml index d5f8074..0780889 100644 --- a/docker-compose.traefik.yml +++ b/docker-compose.traefik.yml @@ -4,6 +4,9 @@ networks: traefik: external: true +volumes: + db: + services: relnet: image: ghcr.io/philipredstone/relnet:latest diff --git a/docker-compose.yml b/docker-compose.yml index 1c37ea0..06ba5be 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,6 +2,9 @@ networks: internal: internal: true +volumes: + db: + services: relnet: image: ghcr.io/philipredstone/relnet:latest diff --git a/frontend/index.html b/frontend/index.html index 4ef752a..3eb38d5 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,11 +1,11 @@ - - - Relnet - - + + + Relnet + +
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6d735be..ac7ea11 100644 --- 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 './components/FriendshipNetwork'; // Your existing component +import FriendshipNetwork from './components/FriendshipNetwork'; import Header from './components/layout/Header'; // Protected route component From 331cae67207918e8e282b2bb2b19231545492ad5 Mon Sep 17 00:00:00 2001 From: Tobias Hopp Date: Tue, 15 Apr 2025 16:44:23 +0200 Subject: [PATCH 3/3] Fix tailwind --- frontend/app.css | 1 - frontend/index.html | 1 - frontend/package.json | 1 + frontend/src/app.css | 3 +++ frontend/src/main.tsx | 1 + 5 files changed, 5 insertions(+), 2 deletions(-) delete mode 100644 frontend/app.css create mode 100644 frontend/src/app.css diff --git a/frontend/app.css b/frontend/app.css deleted file mode 100644 index a461c50..0000000 --- a/frontend/app.css +++ /dev/null @@ -1 +0,0 @@ -@import "tailwindcss"; \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 3eb38d5..67ad3f2 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,6 @@ Relnet - diff --git a/frontend/package.json b/frontend/package.json index b33a72f..6b5e3bd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,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", diff --git a/frontend/src/app.css b/frontend/src/app.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/frontend/src/app.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 801b9cd..88c053a 100644 --- a/frontend/src/main.tsx +++ b/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');