Agent-Fi - Financial Reports Portal

Agent-Fi - Financial Reports Portal

Agent-Fi produces financial research reports for wealth managers. The project involved designing and building the private portal that delivers them: an invite-only space with no public sign-up, where the administrator uploads reports and each client sees only the ones meant for them, organised by asset class, in a restrained interface inspired by private banking.

Context

Objectives

• Deliver confidential financial research reports to wealth managers without relying on email or attachments.
• Guarantee strictly private access: invite-only sign-in, no public registration, and an isolated space for each client.
• Let the administrator publish, organise and remove reports independently, without any technical help.

My role

• UI Design: creation of a dark design system with gold accents, inspired by private banking, with components and tokens shared across the whole portal.
• Full-stack Development: architecture, authentication, database, file storage and deployment.

Process

Research & Inspiration

• Reuse of the sign-in screen from the client's existing research tool, logo, 3D scene and taglines, to keep visual continuity, with the rest of the portal designed from scratch.
• Visual direction inspired by Apple interfaces and private banking: near-black background, Geist typeface, gold accent and subtle animations.

Feature Definition

• Invite-only sign-in: accounts are created by the administrator, with no registration or password recovery page.
• Multi-client architecture: each wealth manager only reaches their own space, while the administrator can access every portal.
• Reports organised into four registers by asset class: equities, bonds, funds and alternative investments.
• Admin area to upload, date, categorise and delete reports.
• Built-in report viewer, displaying each document in an isolated frame after checking the session and access rights.
• Dedicated demo space, used to present the portal to prospects.

Development

• Built with Next.js (App Router), React, TypeScript and Tailwind CSS, deployed on Vercel.
• Authentication through a signed session cookie (httpOnly JWT via jose) and bcrypt-hashed passwords, with centralised access control that routes each role to its own space.
• Postgres database hosted on Neon, limited to accounts, clients and metadata: reports are kept separately in private object storage (Vercel Blob), never in the database or in public files.
• Reports served through an authenticated route and rendered in a sandboxed iframe, isolating their content from the rest of the application.
• Interface built on accessible Radix UI primitives, with Motion animations and a Spline 3D scene on the sign-in screen.
• Non-technical architecture document written for the client, explaining the role of each building block: domain, hosting, database and storage.

Conclusion

Challenges

• Enforcing isolation between clients at every level, routing, pages and file access, so that no report can be reached outside the space it belongs to.
• Making report display reliable in production: since the serverless host's file system is ephemeral, files moved to private object storage, with the document loaded before display and an explicit message when a file is missing, rather than an empty frame.
• Evolving a flat list of reports into four asset-class registers without disrupting documents already published.

Results & Learnings

• Portal live in production, invite-only, supporting the full flow of publishing and reading confidential reports.
• Multi-client architecture ready to onboard new wealth managers without further development.
• Skill development in securing a Next.js application: signed sessions, role-based access control and private file delivery.