Ziel ist es, eine Webapp zu entwickeln, mit der eine Privatperson sein Investitionsportfolio an einem zentralen Ort überwachen kann. Die App soll die Möglichkeit bieten, Aktien, Immobilien, Fahrzeuge, Kryptowährungen und andere Investitionen einzutragen und deren Performance zu überwachen.
- Aktien im Portfolio eintragen / löschen
- Aktien API anbinden um echt Zeit Preise anzuzeigen
- Andere Investitionen eintragen / löschen / bearbeiten (Immobilien, Fahrzeuge, Kryptowährungen, etc.)
- Statistiken über die Performance der Investitionen anzeigen (Gewinn oder Verlust, Kursdiagramm)
- Dashboard mit Gesamtperformance des Portfolios anzeigen (Gewinn oder Verlust, Kursdiagramm)
- Preis Benachrichtigung (bei Aktienpreis x E-Mail versenden)
UC01: Als Benutzer möchte die Startseite sehen, um mich über die App zu informieren.
UC02: Als Benutzer möchte ich die Datenschutzerklärung sehen, um mich über die Verarbeitung meiner Daten zu informieren.
UC03: Als Benutzer möchte ich eine Seite sehen, welche die Betreiber der App vorstellt, um mich über die App zu informieren.
UC04: Als Benutzer möchte ich Kontakt zu den Betreibern der App aufnehmen können, um Fragen zu stellen.
UC05: Als Benutzer möchte ich mich über Google anmelden können, um die App zu nutzen.
UC06: Als Benutzer möchte ich mein Portfolio einsehen können, um meine Investitionen zu überwachen.
UC07: Als Benutzer möchte ich mein Portfolio filtern können, um nur bestimmte Investitionen anzuzeigen.
UC08: Als Benutzer möchte ein neues Investment hinzufügen können, um dieses zu überwachen.
UC09: Als Benutzer möchte ich auf ein Investment klicken können, um die Performance des Investments zu sehen.
UC10: Als Benutzer möchte ich ein Investment bearbeiten können, um die Daten zu aktualisieren.
UC11: Als Benutzer möchte ich ein Investment als verkauft markieren können, um den Verkauf zu dokumentieren.
UC12: Als Benutzer möchte ich ein Investment löschen können, um es aus meinem Portfolio zu entfernen.
UC13: Als Benutzer möchte ich mich ausloggen können, um die App zu verlassen.
Noch keine Use Cases vorhanden.
Frontend: Typescript, React, Chakra UI, Firebase SDK
Datenbank: Firestore
Hosting: Firebase Hosting
Bei der Landing Page haben wir uns für eine einfache und übersichtliche Darstellung entschieden.
Auch die Login Page soll einfach und übersichtlich sein.
Über das Dashboard haben wir lange diskutiert, wie wir es gestalten und welche Informationen wir darstellen sollten. Hier sieht man alle Investments und deren gesamt Performance. Um die Performance eines einzelnen Investments zu sehen, kann man auf das Investment klicken und gelangt zur Seite Single Investment.
Hier soll es möglich sein, sein neues Investment so gut wie möglich zu beschreiben und hinzuzufügen. Wenn man diesen Prozess durchgeht gelangt man zur Single Investment Seite.
Hier sollen alle Informationen zu einem Investment dargestellt werden. Dabei ist es möglich das Investment zu bearbeiten oder als verkauft zu markieren.
Den Prototyp haben wir mit Figma erstellt.
Für die Landing/ Welcome Page haben wir eine Auswahl an verschiedenen Komponenten erstellt, welche belibig verwedet werden können, um eine Interesante Landing Seite zu erstellen.
Hier haben wir uns bereits mit den Farben auseinander gesetzt und ausprobiert, schlussendlich kamen wir zu diesen grünlichem Farbthmeme. Beim Dashboard war es uns ausserdem wichtig relevante Infos so anschaulich wie möglich darzustellen.
Beim New Investment geht man ein Forms durch, bei dem man seine Investition eintragen kann. Auch hier war es uns wichtig es so anschaulich wie möglich zu machen.
Auch wenn sich das Single Investment nicht sehr unterscheidet vom Dashboard, sind einige Details anderst gestaltet. Man sieht Infos wie Marketvalue oder auch die Haltedauer der Investition.
Dieser Schritt ist essenziell, damit unsere Datenstruktur einheitlich und konsistent bleibt. Hiermit können wir sicherstellen, dass alle den User oder auch das Investment gleich "Interpretieren".
interface User {
uid: string;
email: string;
displayName?: string;
photoURL?: string;
}interface Investment {
id: string;
name: string;
symbol: string;
type: string;
purchase: Transaction;
sale?: Transaction;
historicalData: PriceRecord[];
}
interface Transaction {
pricePerUnit: number;
date: string;
units: number;
}
interface PriceRecord {
date: string;
pricePerUnit: number;
}