diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..ee47d5c --- /dev/null +++ b/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;"] diff --git a/README.md b/README.md index 6f69b7f..669594a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,49 @@ -# investment-portfolio-simulator -Portfolio Simulator for Investing, using real data provided by yahoo finance with sleek modern Design. +# Investment Portfolio Simulator + +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 + + + + +## 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 diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..0ff48c7 --- /dev/null +++ b/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"; + } +} diff --git a/src/App.tsx b/src/App.tsx index f17e05f..13d14e2 100644 --- a/src/App.tsx +++ b/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 (