Added further deployment infos

Dockerfile

@@ -0,0 +1,15 @@
+# Build stage
+FROM node:20-alpine as build
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,2 +1,49 @@
-# investment-portfolio-simulator
+# Investment Portfolio Simulator
-Portfolio Simulator for Investing, using real data provided by yahoo finance with sleek modern Design. 
+
+A modern web application for simulating and tracking investment portfolios with real-time data. Built with React, TypeScript, and Tailwind CSS.
+
+Why this Project?
+- I wanted to see how my portfolio would perform if I had invested in something else, and thus with savings plan(s)
+- The main issue with other saving-plan calculators is, that they calculate based on the p.a. performance, i wanted further insights however, and thus this projected was created.
+- It allows you to see how single-investments and savings plans would have performed, and how they would have affected your portfolio.
+- There are multiple indicators and design choices made:
+  - TTWOR (Time Travel Without Risk) calculations
+  - Average Portfolio Performance
+  - Portfolio Performance & Value
+  - All assets (except the TTWOR and Portfolio-Value) are scaled by percentage of their price. Thus their referenced, scale is on the right. The referenced scale on the left is only for the portfolio-value
+
+![Dark Mode Preview](./preview-dark.png)
+![Light Mode Preview](./preview-light.png)
+
+## Features
+
+- 📈 Real-time stock data from Yahoo Finance
+- 💰 Track multiple assets and investments
+- 📊 Interactive charts with performance visualization
+- 🌓 Dark/Light mode support
+- 📱 Responsive design
+- 📅 Historical data analysis
+- 💹 TTWOR (Time Travel Without Risk) calculations
+- 🔄 Support for one-time and periodic investments
+- 📊 Detailed performance metrics
+
+## Tech Stack
+
+- React 18
+- TypeScript
+- Tailwind CSS
+- Vite
+- Recharts
+- date-fns
+- Lucide Icons
+
+## Self Hosting
+
+### Prerequisites
+
+- Node.js 20 or higher
+- npm or yarn
+
+### Local Development
+
+1. Clone the repository

nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Support for SPA routing
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import { Moon, Plus, Sun } from "lucide-react";
+import { Heart, Moon, Plus, Sun } from "lucide-react";
 import React, { useState } from "react";
 
 import { AddAssetModal } from "./components/AddAssetModal";
@@ -13,7 +13,7 @@ export default function App() {
 
     return (
         <div className={`app ${isDarkMode ? 'dark' : ''}`}>
-            <div className="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 transition-colors">
+            <div className="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 transition-colors relative">
                 <div className="max-w-7xl mx-auto">
                     <div className="flex justify-between items-center mb-8">
                     <h1 className="text-2xl font-bold dark:text-white">Portfolio Simulator</h1>
@@ -51,6 +51,15 @@ export default function App() {
                 <PortfolioTable />
                 {isAddingAsset && <AddAssetModal onClose={() => setIsAddingAsset(false)} />}
                 </div>
+
+                <a
+                    href="https://github.com/Tomato6966/investment-portfolio-simulator"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="fixed bottom-4 left-4 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center gap-1 transition-colors"
+                >
+                    Built with <Heart className="w-4 h-4 text-red-500 inline animate-pulse" /> by Tomato6966
+                </a>
             </div>
         </div>
     );