Stockmantics: Form Finally Meets Function

A lot has changed since my first post on Stockmantics from a web-build perspective. Since its inception, the primary focus has been getting the data and article generation output correct. Through many months of algorithm refinements, the generated articles are outputting daily stock market news more accurately than ever.

However, this came at a cost to the website's look and feel. I never really invested much time into the design or the front-end build to a level that the Stockmantics website deserved, let alone a quality that met my own standards.

If I'm honest, front-end isn't my forte or my main interest. I usually try to get away with using pre-built templates, but that has the detriment of never truly reflecting my vision; I find myself confined by the limitations of the template rather than the needs of the content.

The main bug-bear for me was the article pages. Due to the amount of information required for a user to get an all-rounded insight into the daily market, the pages became difficult to navigate. I was quite persistent that all articles needed to display several key components alongside the copy:

• Market Snapshot of 8 key market indices
• Investor Action
• The Market Mic Drop
• Section Navigation

If this was the result when viewing the site on a computer, then viewing on a mobile device certainly wasn't fairing any better. It was a cluttered experience that didn't do the data justice.

Overall, I wasn't pleased with the first iteration of the Stockmantics website for one main reason: there simply wasn't enough investment of time. All my energy went into perfecting the background AI and data services, leaving the rest to be held together by low-cost hosting and only the most basic SEO practices. Looking back, I definitely questioned whether I'd done enough on the SEO front to give the content the reach it deserved.

Now that I have proved the concept works, it is time to ditch everything that came before and start anew. I need a foundation that matches the quality of the data, and delaying things any further would only have a negative impact on what I'm trying to build.

Before and After

Rather than force you to read the whole post just to see the difference between the old and new—unless you feel ever so inclined, in which case I'd be more than happy for you to read further. Here are the before and after shots:

The Non-negotiables

If I am going to start again, there is little point in re-treading old ground. It is time to take things to the next level by focusing on what I call "the non-negotiables":

• Minimal Footprint: The application footprint needs to be as small as possible.
• Better SEO: Incorporating proper schema data and much cleaner HTML.
• Performance: Aiming for a minimum 95%+ Lighthouse score across both desktop and mobile.
• Subtle Animation: Injecting some life into the pages without being distracting.
• Clean Layout: Utilising white-space to let the content breathe.
• Mobile-First UX: Improving the mobile view and rendering additional article content through intuitive pull-out menus.
• PWA Integration: Adding Progressive Web App architecture with a prompt for users to install the site on their mobile devices.
• Improved Archives: Restructuring the article listing page by grouping articles by year for better discovery.

Architecture

I have made the decision to move away from ASP.NET to a static-site generator using Gatsby JS. This shift will significantly reduce hosting costs by using Netlify, and I'll no longer have to worry about performance thanks to a robust caching framework.

It was actually my original intention to use Gatsby, but I was concerned about exceeding the free monthly build minutes. At the time, I couldn't gauge how long each build would take to aggregate all the data required to populate the site. This is no longer a concern, as I've made several refinements to the background processes to ensure everything runs efficiently.

The only addition to the background process was a new Timer Triggered Azure Function to trigger a build using Netlify's Build Hooks midday after all the stock news had been gathered.

Front-end Build

Lovable.dev has been my front-end saviour. It was able to translate exactly what I envisioned whilst also providing useful suggestions to enhance the overall look. Just like any other prompt-based AI tool, it works best with specifics and detail. Just like a painter without the right brushes, if you don't provide the right inputs, you can't expect a masterpiece.

PWA

One of the great things about working in a framework like Gatsby is that there is a service-worker plugin at the ready that provides the basic integration for a PWA. The user is notified when new updates or articles are added—though there is still a little more refinement required. A popup appears when viewing the site in-browser to install it as an app, bridging the gap between a website and a native experience.

Animations

I didn't want to incorporate animation for animation's sake. It had to be subtle and relate to stocks. An idea I had was to mimic a line graph behind the homepage banner and market snapshot indices to render an upward (transitioning from red to green) or downward (transitioning from green to red) trend. This visual cue gives the data immediate context before the user even reads a number.

Article Page Improvements

I am very happy with how the article pages turned out. While a few refinements are still on the to-do list, it is incomparable to the previous version. You are now presented with a high-level overview of important information first—what I like to call the "first course"—before delving deeper into the "main course," which is the full article content.

Viewing the articles on a mobile device is now actually a pleasure rather than a chore.

Final Thoughts

Even though the thought of rebuilding the Stockmantics site felt like an insurmountable task at times, it was time well invested. This is truly a passion project of mine, and I wanted the form to finally match the function.

As a back-end developer by trade, the hard work that goes on behind the scenes isn't always obvious to the naked eye. This overhaul ensures that the sophisticated AI logic powering the site is finally reflected in a user interface that does it justice. It's no longer just a data project; it's a complete product.

I look forward to making many more enhancements and improvements.

If you haven't already, why don't you head on over to Stockmantics.com and take a look for yourself?