[Case Study]

10 Apr 2025

-

2 min read time

Sustainable Investments AI chat UI

PortageBay is a Hong Kong– and New York–based FinTech company focused on sustainable investment research. With a mission to streamline the way investment teams and CIOs access and act on data, PortageBay envisioned a powerful web-based chat interface at the core of their platform.

They turned to SoftGrad to bring that vision to life—a secure, user-friendly, research tool built for modern finance.

Sustainable Investments AI chat UI

Background

PortageBay exists to reshape investment workflows by bridging data science and human decision-making. Their tools empower teams to collaborate more effectively, comply with regulatory frameworks, and stay ahead in the rapidly evolving world of ESG and sustainable finance.

They needed a frontend solution that made communication seamless—an intuitive chat interface layered with analytics and data integrations. Something fast. Something smart. Something reliable.

How We Worked Together

From the outset, we embedded ourselves into PortageBay’s process. With one of our senior fullstack developers leading the build and a dedicated partner managing communication, we created a lean, focused team capable of moving fast without cutting corners.

The collaboration was grounded in continuous feedback and strategic alignment. We worked hand-in-hand with their product and engineering teams to deliver a frontend that matched their backend architecture, brand identity, and user goals.

Stephen Jue

Portage Bay

“Our team had an outstanding experience working with Makers' Den.”

Stephen praised the project’s clarity, cultural alignment, and execution. The combination of strong project management, technical skill, and agile iteration led to a product that exceeded expectations—all while respecting timelines and budget.

The Technical Setup

The core product was a browser-based chat platform tailored for financial professionals. While it looked simple on the surface, under the hood it handled sensitive data, real-time interactions, and multiple API integrations.

Key Features Developed:

  • Modern Chat UI: A responsive interface designed for clarity and ease of use across investment teams and compliance officers.

  • In-line company & metrics lookups in Chat Inputs: For the smoothest chat experience, we enabled the user to quickly auto-complete companies and their investment metrics into their questions for the AI, for incredible UX and so the AI could reference the correct data with certainty.

  • Secure API Integrations: We connected the frontend with several data sources to deliver up-to-the-minute analytics and contextual insights directly within the chat.

  • PDF rendering with highlights: Allowing users to verify sources easily, by rendering PDFs and highlighting cited sources.

The entire product was built with an eye toward extensibility, so that new data sources, analytics tools, or workflows could be integrated without rewriting the foundation.

The Tech Stack

We chose a modern, lightweight tech stack to move fast without sacrificing stability or security:

  • React.js – Fast, component-based UI development

  • TypeScript – Type safety and maintainability at scale

  • Vite – The go-to build tool for SPA frontends

  • ANT Design – a top tier component library, and a requirement from the client. Due to their dev team being Hong Kong based, they standardized on the most popular component library in China, which we easily accommodated to.

  • Zustand – The most popular state management library for React.js

  • Lexical –  Cutting edge Rich Text Editor, for the most feature-rich chat input, enabling complex widgets in-line with text and custom auto-complete experiences.

  • PDF.js – For rendering PDFs and highlighting relevant portions stated as sources for the LLM. 

The Results

The finished product delivered on every front:

  • Automated and verifiable analysis of companies for faster investment decision-making

  • Intuitive UX allowing highly complex tasks to be made by natural language

  • Verifiable ad-hoc research allowing investment managers to verify the conclusions made by AI

The outcomes:

  • A ground-breaking product delivered on time & on budget

  • Aligned with PortageBay’s ESG values by enabling better investment transparency and oversight

The Takeaway

Makers' Den helped PortageBay transform a critical idea into a working solution: a robust, real-time chat interface tailored to the needs of modern investment professionals. We’re proud to have contributed to a tool that enhances transparency, compliance, and communication in sustainable finance.

If you're building the future of financial services, let's make it real—together, talk to a Maker!

Table of Contents

  1. 1. Background

  2. 2. How We Worked Together

  3. 3. The Technical Setup

  4. Key Features Developed:

  5. 4. The Tech Stack

  6. 5. The Results

  7. The outcomes:

  8. 6. The Takeaway

More from our Blog

Keep reading

Klarna: Bespoke payment solutions for big brands

Klarna is huge. Their clients can be huge. Huge clients deserve custom solutions. We provided said custom solutions using ReactJS, NodeJS, and Typescript.

Read Case Study

Kickflip: Scalable Marketing Website with Storyblok

Kickflip creates product customizers for leading brands world-wide. Their tools integrate easily with the biggest e-commerce platforms like Shopify and WooCommerce, and they needed a marketing website to match the excellence of their SaaS services.

Read Case Study

INVENDA: Headless Content Management with Storyblok

Invenda creates industry-leading automated retail solutions and were looking for a new industry-leading website based on a Headless CMS to showcase their products. We were eager to help!

Read Case Study