Project Overview

The primary goal of Portfolio Hub was to create a user-friendly SaaS app that consolidates stock investment information from various sources into a single platform. By eliminating the need for cumbersome spreadsheets, users can conveniently monitor and analyze their portfolio's performance in real-time. The application also includes a range of financial tools, such as a retire early calculator, compound interest calculator, and after-tax earnings calculator, to enhance the overall user experience.

To attract traffic and build SEO presence, Portfolio Hub features a blog section where I regularly posted insightful content related to investment strategies, market trends, and personal finance. As a result, the site has gained approximately 300 monthly clicks and garnered over 80k impressions to date.

My Role and Responsibilities

As the sole developer of Portfolio Hub, I was responsible for the end-to-end implementation of the project. I began by creating wireframes using Figma to visualize the application's design and layout. Throughout the development process, I coded, tested, and deployed the application to a live server. To ensure seamless integration and testing of new features, I also set up a staging server on DigitalOcean.

Additionally, I took charge of the blog's content creation, regularly publishing three posts per week in 2022, covering a wide range of investment-related topics. This effort not only contributed to the website's SEO strategy but also provided valuable resources for users to enhance their financial knowledge.

Project Duration

The development of Portfolio Hub commenced in February 2022, following the completion of my degree project, which was also developed in Laravel. Over the course of 2022, I dedicated significant time to periodic updates and improvements to the site, refining its functionalities and optimizing the user experience.

Unique Features and Functionalities

Visualization with Apex Charts: To present data in an engaging manner, I incorporated Apex Charts, which allowed for dynamic visualization of portfolio performance. The compound interest calculator, for instance, relied on this library to present data in visually appealing chart formats, offering users a more interactive experience.

Efficient Blog Scheduling: To streamline the blog management process, I implemented a scheduling system. By attaching a date field to each post, I utilized middleware to ensure that only posts scheduled for the current date or earlier were displayed to users. This automation significantly reduced the need for manual intervention.

Enhanced Blog Editing with CK Editor: I integrated CK Editor to provide users with rich text editing capabilities when creating blog posts. This feature enabled me to utilize headings, formatting options, and other text enhancements, resulting in visually pleasing and well-structured articles.

Dividend Calendar: One of the standout features of Portfolio Hub is the dividend calendar, which showcases historic dividends for all owned transactions within specific dates. This feature allows users to gain insights into dividend distributions and plan their investment strategies accordingly.

Overview Chart for Portfolio Performance: The main overview chart provides users with a comprehensive view of their stock portfolio in four different timeframes: day, month, year, or all. By leveraging APIs to retrieve historical or intraday stock prices for all owned stocks, the application calculates the portfolio's value at each relevant datetime and visualizes the data using Apex Charts.

Challenges and Solutions

Throughout the development process, I encountered various challenges that tested my problem-solving skills. When faced with obstacles, I employed a combination of strategies, including meticulous logging, leveraging developer tools, and extensive online research on platforms like Stack Overflow. Some notable hurdles I overcame include:

Complex Overview Chart Creation: Developing the overview chart, which required integrating historical and intraday stock prices, presented several obstacles. Through persistent troubleshooting and exploration, I successfully leveraged APIs and formulated an efficient data visualization solution.

Setting Up Websockets and Stripe Payment Gateway: The setup and configuration of websockets and the Stripe payment gateway demanded careful attention to detail. By diligently following documentation, seeking community support, and experimenting with test environments, I resolved these challenges and ensured smooth functionality.

Deployment and Staging Server Setup: Establishing a live server and a staging server on DigitalOcean required meticulous configuration and optimization. With patience and a methodical approach, I successfully set up the environments, enabling seamless testing and deployment of new features and updates.

Ad Program Acceptance and Modifications: The process of gaining acceptance into the Ezoic ad program involved multiple rounds of modifications and reapplications. Through perseverance and meticulous adherence to program requirements, I eventually achieved acceptance, enabling effective ad integration on the site.

Project Conclusion

Please note that due to the running costs associated with the stock tracker web app, particularly the TwelveData API, that functionality has been temporarily discontinued. However, Portfolio Hub still offers its valuable blog content and the financial tools I developed.