FinSearch

FinSearch

A comprehensive frontend redesign of a financial search platform featuring firm and contact details pages with advanced data visualization, interactive maps, and robust authentication using Microsoft Entra ID.

FinanceData Visualization
React
React
TypeScript
TypeScript
Tailwind CSS
Tailwind CSS

Description

Financial Search Platform Redesign

FinSearch involved a complete frontend transformation of a financial search website, improving organization, UI/UX, and user experience while maintaining all existing functionality.

Pages Delivered:

  • Homepage: Complete implementation based on Figma designs with modern, clean interface
  • Firm Details: Comprehensive layout with sidebar navigation, overview tabs, interactive maps, and detailed data tables
  • Contact Details: Rich contact information display with visualization and relationship mapping
  • Authentication Flow: Secure login/signup using MSAL/Entra ID tokens for protected routes

Advanced Features:

  1. Data Visualization: Integrated charts and Google Maps API for geographic data
  2. Complex Tables: Server-side pagination, sorting, and column-specific filtering
  3. Responsive Design: Pixel-perfect implementation across all screen sizes
  4. State Management: TanStack Query (React Query) for efficient data fetching

Technical Stack:

Built with React.js and TypeScript, utilizing Mantine UI component library and TailwindCSS for styling. Deployed to Azure Static Web Apps for staging and Render for previews, with comprehensive API integration.

Challenges Overcome:

Successfully navigated scope expansion from UI-only to full API integration, tech stack pivot from ShadCN to Mantine UI, and complex authentication flows with Microsoft Entra ID.

"Successfully delivered UI and integrated initial APIs, establishing a solid, production-ready codebase."