horvathmarton / stock-buddy-dashboard

Web app for the Stock Buddy portfolio monitoring platform.

Welcome to My GitHub Profile! 👋

I really appreciate that you took the time to visit my profile.

About Me

I'm a software engineer and engineering manager passionate about crafting innovative solutions and leading cross-functional teams to deliver high-impact projects. With a strong track record in developing energy and financial trading systems, I'm dedicated to making a meaningful impact in the world of software engineering.

Some of My Favorite Technologies

During my career, I worked with many different technologies here is the list that I'm currently the most productive with and use in my pet projects:

• Node.js
• TypeScript
• NestJS
• SvelteKit

Projects

Here are some of my personal projects I've been working on:

• Brief Me: A service to get personalized audio news digest.
• Stock Buddy: A platform for investors to monitor their portfolios.

Get in Touch

• LinkedIn

Feel free to explore my repositories, and don't hesitate to get in touch if you have any questions or collaboration opportunities!

stock-buddy-dashboard's Issues

Add performance view (portfolio, market, position)

Description

Create a new where the user could monitor the performance of a single position or an entire portfolio.

Technical details

• Add a placeholder chart for a selected market index.
• The user could select a time range and a portfolio/position.
• The view should have two tabs, one for a portfolio and one for a position (the universe is the positions owned by the user).
• Display the timeslot, total, and annualized performance.
• Display the dividend paid out in each timeslot.
• Display the total paid-out dividend and annualized and total return as a KPI.
• Create a pie chart of the total return distribution.

Display the date of the last update on every price in portfolio view

Description

We need to display the information when was the information for a given stock last updated. This represents how much are we behind in information relative to the market.

Technical details

• Extend the /stocks/portfolios endpoints with an extra field where we send when was the price information last updated for the given position.
• Display that information in the portfolio overview table (with a toolbar or extra column).

Imlement a feature flagging system

Description

Technical details

Wireframes

Display error messages properly

Description

We need to display error messages in a unified manner throughout the application.

Technical details

• We need a design concept on how to display error messages that are coming from the server.
• The error message component should be used but updated because the current solution is ugly.
• After the component is updated, we need to check each user to see if the display is correct.

Wireframes

Portfolio comment cannot be blank

Expected Behavior

When creating a new portfolio, the description field is optional.

Actual Behavior

When creating a new portfolio, I have to enter something into the description field. Otherwise, I can't submit it.

Steps to Reproduce the Problem

1. Navigate to the portfolio page.
2. Start creating a new portfolio.
3. Try to submit it without a description.

Specifications

• Version: 1.0.0
• Platform: MacOS
• Browser: Chrome

Screenshots

Add bonds view

Description

We need a bonds portfolio management view similar to the stocks base data. We should display the current portfolio status for the user and enable them to add new transactions and portfolios.

Technical details

• Create a table view based on the stocks view Base data tab.
• The user could add a new transaction.
• The user could add end edit existing bond portfolios.
• An extra property on this view should be the full value of the current holding.
• We need to display the next payments on a chart.

Crypto view

Description

Technical details

Wireframes

Add hierarchical table to portfolio view to display each transaction

Select target strategy flow

Description

The user should be able to select a targeted strategy. This issue is containing the proper handling of the empty case on the dashboard view.

Technical details

• The API endpoints already exist here (GET /dashboard/strategies and POST /dashboard/strategies/select-strategy)
• The payload format is { strategy: number (ID) }
• Theoretically, the strategies list cannot be empty as we create some default public strategies on every system, so the fronted don't have to prepare for that use-case.
• If the user has no selected target strategy, we should display an explanation message and an option to select.
• The functionality should be placed on the dashboard view.
• When the user tries to select a target strategy, they should be presented with a list of their strategies and the public strategies.
• After the user selected a strategy, update the UI on dashboard to present the new target and current strategy (/dashboard/strategies/me)
• Loading state should be handled properly.
• Possible errors:
  • 400 - malformed payload
  • 401 - the user is not autheticated (this is a possible error, but should not happen in this state of the frontend)
  • 403 - the user is not allowed to list/select strategies
  • 500 - unhandled error

Handle empty states properly

Description

We want to handle empty states on each view properly.

Technical details

• The particular handling method is up to the implementor, just follow the current design.
• Dashboard view, when the user has no strategy selected.
• Dashboard view, when the portfolio indicators are not applicable for the user (requires API change too).
• Portfolio view, when the user has no portfolio or no item on the current portfolio.
• Watchlist view when the user has no watchlist or no item on the current watchlist.

Custom styling is disabled

Expected Behavior

We use our custom styling in the app, and the components work properly.

• Select, date picker and modal has a background.
• The color property works within the modal's context (e.g. I can color a button as primary).
• The days are formatted properly in the date picker.

Actual Behavior

We have a prebuilt style enabled, if we enable our custom styling the above mentioned components break.

Specifications

• Version: 1.0
• Platform: MacOS
• Browser: Chrome

Add the stock portfolio summary and details view

Description

This is the core view for the app where the user could oversee its portfolios one by one and a summary of every portfolio.

Technical details

We are going to need a detailed design for this view, but for now, we just create a list of the data that should be displayed on the page and a list of ideas about the layout of the UI:

Layout

• We need a view that has two functions, it has to be a portfolio detail view where detailed information about a selected portfolio is displayed and it also has to be a summary view where all the portfolios could be displayed as a summary.
• We could use a dropdown to select which portfolio should be active (in the long run we could transform it to a dropdown with checkboxes so the user could see a summary from a subset of its portfolios).
• We need another selector to select the date snapshot when the portfolio should be viewed (defaults to now).
• There is a ton of table format data on this page so to be more user-friendly and avoid horizontal scroll we should tab the view by main topics.
• We have a couple of charts in this view that could replace some columns in the view. Also, we wouldn't want to scroll to access the charts, so the space has to be divided between the table and the chart.
• Display when was the data last updated somehow.
• The table could be hierarchical (in the long run) to display each transaction and the position as a summary.
• The table should contain a min, avg, max, and sum row for each column where applicable.
• The purchases could be displayed in a calendar view.

Data

• base data
  • stock symbol
  • company name
  • sector
• price info
  • current price (display the date of the last info)
• purchase info
  • average purchase price
  • shares count
  • purchase date (first and latest)
• dividend info
  • dividend per share
  • dividend yield (%)
  • yield on capital (%) <- chartable (column chart?)
  • dividend income <- chartable (column chart?)
  • dividend (%) <- chartable (piechart?)
  • total dividend income (annually, after tax, monthly)
• risk
  • size @ cost (?)
  • size of position (?)
  • exposure @ cost (%) <- chartable (heatmap?)
  • position exposure (%) <- chartable (heatmap?)
  • sector exposure (%) <- chartable (piechart?)
• PnL
  • % from purchase price (%) <- chartable (column chart?)
  • PnL since inception <- chartable (column chart?)
  • annualized return <- chartable (column chart?)

Create and edit stock portfolio flow

Description

We need a way for the user to create new stock portfolios and edit the name and descriptions of existing ones.

Technical details

• The API endpoints already exist here (POST/PATCH - /stocks/portfolios).
• The payload format is { name: string; description: string }.
• This functionality should be placed on the portfolio view.
• Probably a modal is the easiest way to introduce the creation flow.
• Loading state should be handled properly.
• Possible errors:
  • 400 - malformed payload
  • 401 - the user is not autheticated (this is a possible error, but should not happen in this state of the frontend)
  • 403 - the user is not allowed to create portfolios
  • 500 - unhandled error

Change password flow

Description

We want to enable logged-in users to change their passwords.

Technical details

1. Add an endpoint to update an authenticated user's password.
2. Add the change password as an option to the profile menu.
3. Create a basic profile view with a change password section.

Share my portfolio

Description

Technical details

Wireframes

Configure charts properly

Description

Unify the chart components and make them display in a more user-friendly way.

Technical details

• Unify the interface of the chart components.
• Add a color hashing mechanism to always match the same label with the same color throughout charts.
• Add rounding to the chart tooltips.
• Add a switch if the chart should display in percentage or value.
• Align the tree chart to the center.
• Fix bar chart flickering.
• Filter data before passing it to the return chart to ignore positions bought within the last N days.
• Extract chart configurations.

Add the dashboard view

Description

The dashboard view is the main page of the app. It gives a macro-level overview of the investor's current status.

• It contains the global asset allocation strategy.
• It contains performance metrics for the total AUM.
• It contains key indicators for the stock portfolio.
• It contains performance metrics for the stock portfolio.
• In the future, it is going to contain macro indicators, key indicators about other asset classes, and a general market overview (e.g. index prices).

Technical details

• This view is going to contain a lot of information and it is going to be extended many times. So have to be extra careful with the UX here. We have to think of a structure that could be easily extended and drive the focus to the relevant parts, but is easy to use for extracting other information.

Add profile/settings view

Target information on watchlist table

Description

Add valid next target information to the watchlist table.

Technical details

• Add an endpoint to fetch current stock prices for a list of stocks.
• Add a service for target calculation.
• We should match the current price with the closest target price (if applicable).
• We should match the current position size with the closest position size target (if applicable).
• Display the result on the watchlist table.

Content overflow is not handled properly

Expected behavior

The app is always matched to the screen size. There is no overflow and scrollbar on the top level. If the content section overflows it handles it by displaying scrollbars as necessary. So there is no scrollbar on the main component but on e.g. tables that are longer than expected.

Actual behavior

The portfolio summary view is cut its bottom content on smaller screens. The height of the component had to be reduced manually and it only works on larger screens.

Steps to Reproduce the Problem

1. Log in as a user with an existing portfolio.
2. Open the portfolio summary view.

Screenshots

This is a full screenshot, the bottom of the page is cut down:

Add Sentry to the dashboard project

Description

We need error collection for the dashboard project too, so we should introduce Sentry.

Technical details

1. Create a project for the dashboard on Sentry.
2. Use the API project as a template on how to wire up Sentry in a project.
3. Check the documentation on how to use Sentry in an Angular project.

Add E2E testing with Cypress

Description

Technical details

Wireframes

The views render empty state randomly

Expected Behavior

When the user navigates to a site and the API responds to the XHR calls with 200, the content should be rendered.

Actual Behavior

In some cases (possibly the first time after refresh) the content is not loaded or just partially loaded. The view displays an empty state.

Steps to Reproduce the Problem

1. Logout of the app
2. Log in as a user with an existing portfolio
3. Navigate to the Portfolio or Dashboard view

Specifications

• Version: 1.0
• Platform: MacOS
• Browser: Chrome

Screenshots

Add cash view

Description

We need a new view where the user could manage their cash position.

It should contain:

• A per portfolio view for the free cash.
• A summarized cash position for the total AUM.

Technical details

• We should enhance the cash service so we could use it in the strategy view.
• We already have full CRUD for cash (/transactions/cash) and forex (/transactions/forex) transactions.
• The user should be able to oversee the current status in each portfolio and global in every supported currency.
• The user could add new in and outflows and forex transactions.

The annualized return chart contains placeholder data

Expected Behavior

The annualized return chart shows the annualized return of each position in the selected portfolio.

Actual Behavior

The annualized return chart shows the same data as the total return chart.

Steps to Reproduce the Problem

1. Log in as a user with an existing portfolio.
2. Navigate to the Portfolio view.
3. Open the PnL tab.
4. The two charts on the right side show the same data.

Technical details

This fix requires API change because the annualized return data is currently not sent.

Specifications

• Version: 1.0
• Platform: MacOS
• Browser: Chrome

Enhance strategy editor dialog

Description

1. add the remaining asset part to the cash item (cash = 100% - everything else)
2. display a small piechart that shows the current distribution

Technical details

Wireframes

Watchlist is not sortable and filterable

Expected Behavior

I'm able to sort the watchlist tables by any of the columns. I can click a checkbox on the top that filters out items without current ownership (can't calculate position target distance).

Actual Behavior

When I click a column the ordering indicator appears, but no ordering takes place. I can't see a filtering checkbox at the top.

Steps to Reproduce the Problem

1. Navigate to the watchlist view.
2. Try to order the table by clicking a column header.

Specifications

• Version: 1.2.1
• Platform: MacOS
• Browser: Chrome

Dropdown backgrounds are transparent

Expected behavior

When I open a dropdown, the background is using the same design as the whole app.

Actual behavior

When I open a dropdown, the background is transparent.

Steps to reproduce the problem

1. Log into the application as any user.
2. Navigate to the portfolio view.
3. Open any of the dropdowns in the top right corner of the main section.

Screenshots

Display the total dividend income of the portfolio

• annual
• monthly
• after tax
• cash balance in each currency

Create new strategy flow

Description

The user should be able to create new public and private asset allocation strategies on the dashboard.

Technical details

• The values of the strategy items should be restricted to the following (stock, bond, real-estate, crypto, gold, commodity, cash)
• The API endpoints already exist here (POST/PUT/DELETE /dashboard/strategies).
• The payload format is { name: string; items: { name: string; size: number }[] }.
• The sum size of the items must be 1.0.
• The strategy visibility is set to private for now, public strategies will be created in the database directly or via the admin dashboard. The sharing of strategies will be implemented later.
• We don't need editing functionality for now. If the user wants to modify a strategy, they should delete and recreate it.
• This functionality should be placed on the dashboard view.
• Probably a modal is the easiest way to introduce the creation flow, but other ideas are also welcome (e.g.: some kind of piechart editor).
• Loading state should be handled properly.
• Possible errors:
  • 400 - malformed payload
  • 401 - the user is not autheticated (this is a possible error, but should not happen in this state of the frontend)
  • 403 - the user is not allowed to create strategies
  • 500 - unhandled error

Fix jumping form error message on the login view

Expected behavior

When the Invalid username or password error message is displayed on the login form it doesn't change the layout of the other elements.

Actual behavior

When the Invalid username or password error message is displayed on the login form it pushes the login button down, thus the form "jumps".

Steps to Reproduce the Problem

1. Logout if logged in.
2. Enter an invalid username and password pair.
3. Hit the login button.

Screenshots

Differentiate between instances by theming

Description

Create different themes for the three instances of the app:

• dev
• staging
• production

Make the difference obvious so it is not easy to confuse the instances.

Add aggregate data to the portfolio view

• min
• max
• mean
• median
• sum

Refactor notes

Description

• Move disposablility into a decorator.
• Move error handling to a decorator.
• Outsource dialog config and move dialogs to a custom operator.
• Abstract general API request to a custom operator.
• Move query operations to queries.
• Move get error message to util function.
• Inline feature module routing.

Stock scorecard

Description

Technical details

Wireframes

Add watchlist management view

Description

We need a view where the user could create watchlists. These lists are served as a different base set (universe of stocks) for further analysis and portfolio building.

Technical details

• We already have full CRUD for the watchlist resource /stocks/watchlists.
• We need to create a new join table on the backend and expose an API where the user could add stocks to a watchlist.
• We also need a new resource for target price and position size target for a given position within the watchlist.
• On the dashboard, we need a list of the watchlists belonging to the user. From here the user could see the details of a watchlist, where they could inspect the separate items on that.
• The user could add and remove entries from the the watchlist.
• The user could define upper and lower target prices for an entry on the watchlist.
• The user could define target position sizes (both at cost and current) for an entry on the watchlist (or portfolio).

Add the macro trends section to the dashboard

Visualize transactions and broker costs

Create and edit stock transaction flow

Description

We need a way for the user to create, edit and delete stock transactions on their own portfolios.

Technical details

• The API endpoints already exist here (POST/PUT/DELETE /transactions/stocks)
• The payload format is { ticker: string; amount: number (int); price: number; date: Date; portfolio: number (ID); comment?: string }
• The functionality should be placed on the portfolio view.
• Probably a modal is the easiest way to introduce the creation flow, but other ideas are also welcome (e.g.: a placeholder at the end of the table).
• If a specific portfolio is selected at the top-right controls the portfolio should be automatically set during the creation flow, if the summary is selected, the user should select which portfolio is targeted.
• Loading state should be handled properly.
• Possible errors:
  • 400 - malformed payload
  • 401 - the user is not autheticated (this is a possible error, but should not happen in this state of the frontend)
  • 403 - the user is not allowed to create a position (for the selected portfolio)
  • 500 - unhandled error

Add a calendar view to display stock transactions

Sidebar is kept open when logging out

Expected Behavior

When logging out with an open sidebar, the sidebar dissappears.

Actual Behavior

When logging out with an open sidebar, the sidebar is kept open.

Steps to Reproduce the Problem

1. Log in as any user.
2. Open the sidebar.
3. Click the logout button.

Specifications

• Version: 1.0
• Platform: MacOS
• Browser: Chrome

Screenshots

Add version and commit hash info

Description

We need to be able to check the current version and deployed the commit hash of both the dashboard and the API in stock buddy.

Technical details

• Use some developer-friendly display mode that doesn't bother the general user with unnecessary information (e.g.: tooltip on the version number to display the hash info).
• Fetch the version and hash information from the API. (horvathmarton/stock-buddy-api#64)
• Parse the version information from the package.json file.
• Research how to determine the latest commit hash from code.