Fintech
Investment Research Portal & PDF Engine
Client-facing fintech platform for browsing private company data, ordering custom investment research, managing reports, working with secondary market bids/asks, and generating data-heavy PDF research documents. The project combines a React/TypeScript portal with authenticated workflows, advanced catalog filtering, AI-assisted report interaction, and a server-side PDF engine built with React/Next.js templates and headless Puppeteer.
- Work
- Web design, UX/UI, Frontend, API
- Technologies
- React, TypeScript, Vite, Next.js, TanStack Query, Tailwind CSS, shadcn/ui, Radix UI, Node.js, Express, Puppeteer, Chart.js, Docker, Nginx, Vitest, React Testing Library, MSW, Playwright, Google Tag Manager, Hotjar, Formbricks
- Country
- Cyprus
Key features
- 01
Authentication with protected routes and token refresh
- 02
Company catalog with advanced filters, pagination, URL-synced state, and responsive layouts
- 03
Research ordering and reordering flows with custom research factors
- 04
Purchased report access, download, sharing, and research status tracking
- 05
AI research co-pilot with chat threads, prompt templates, optimistic updates and markdown responses
- 06
Secondary market workflows for bids, asks, offers, and status-based actions
- 07
Credits, pricing, subscription, checkout success/cancel, and account flows
- 08
Server-side PDF generation with React/Next.js templates and headless Puppeteer
- 09
Production-facing setup with analytics, feedback tools, Docker/Nginx deployment, and automated tests
Overview
Arcanis Client Portal is a fintech web platform built around the full investment research workflow: company discovery, research ordering, custom research factors, report access, sharing, AI-assisted analysis, and secondary market bids/asks.
I worked on the product-facing frontend: authenticated client portal flows, advanced company catalog filters, report management, research ordering, credits/subscription states, responsive layouts, loading states, modals, notifications, and mobile-friendly navigation.
A key part of the system was a server-side PDF generation engine. It renders data-heavy investment research documents from React/Next.js templates, then converts print-ready HTML into A4 PDF reports using headless Puppeteer, print CSS, charts, paginated tables, and validation for large research payloads.
The implementation focused on making complex research workflows feel coherent: users could move from company discovery to research ordering, report access, sharing, AI-assisted follow-up, and PDF delivery without leaving the portal context.
Mobile UX for research workflows
Arcanis keeps complex research workflows usable on mobile: report status, key company data, research actions, sharing, downloads, and AI chat stay close at hand.
PWA support and runtime caching helps make the portal feel closer to an installable product experience, not just a responsive web page.
Auth & Session Recovery Flow
The portal uses a frontend-managed session flow built around AuthContext, protected React Router routes, and a typed API client. After login or Google callback, the access token is kept in module memory while the user snapshot is stored in localStorage; protected pages wait for auth initialization before rendering. API requests attach the bearer token and include credentials, then recover from 401 responses by calling the refresh endpoint, updating the in-memory token, and retrying the original request. If refresh fails while online, the app clears user-scoped storage and logs the user out.
Next project
Campervan Monitoring System