earningsInsight

Project Overview

earningsInsight is a proof of concept frontend application I developed for TradeInsight.ai, where I work as a software engineer. I took on this project fully solo to demonstrate capabilities for earnings call analysis, building it alongside the company's main proprietary products (under NDA) with our engineering team.

The project aimed to create a sophisticated, real-time dashboard for analyzing company earnings calls using AI-powered sentiment analysis.

My Role

I served as the sole developer and designer on this proof of concept, where I:

• Architected the entire frontend application using SvelteKit 5 with TypeScript
• Designed and implemented a modern, responsive UI with Tailwind CSS 4
• Created a comprehensive state management system using Svelte 5's reactive runes
• Built reusable component library with over 20 custom components

Problem Statement

Investors and financial analysts need efficient tools to extract insights from earnings calls. The existing situation was characterized by manual transcript review taking hours per call and difficulty identifying key sentiment shifts during presentations, which led to missed investment opportunities and information overload.

Approach

My approach involved:

1. Research: Studied existing financial analysis tools like Bloomberg Terminal and Seeking Alpha, analyzed UX patterns in modern dashboards, and defined key user workflows for earnings call analysis
2. Design: Created a dark-mode-first design system with semantic color tokens, designed a modular component architecture, and developed responsive layouts for multiple screen sizes
3. Implementation: Built the application iteratively starting with core layout, then adding transcript viewing, analysis dashboard, audio player, and company context panels
4. Evaluation: Tested across browsers and devices, refined interactions based on usability testing, and optimized performance for smooth real-time updates

Key tools and methods used:

• SvelteKit 5: Latest version with runes-based reactivity for efficient state management
• Tailwind CSS 4: Modern utility-first CSS with custom design tokens
• TypeScript: Strong typing throughout for maintainability and developer experience
• Lucide Icons: Consistent, accessible SVG icon library

Deliverables

The project produced:

• Complete Frontend Application: A fully functional SvelteKit 5 application with responsive design and dark mode
• Component Library: 20+ reusable Svelte components including transcript viewer, audio player, sentiment timeline, analysis cards, and notification system
• State Management Architecture: Reactive stores for analysis, company data, transcript management, and UI state using Svelte 5 runes

Key Features

Results & Value

The project achieved:

• Clean Architecture: Modular component structure enabling easy maintenance and future expansion
• Modern Tech Stack: Successfully implemented cutting-edge SvelteKit 5 runes, demonstrating proficiency with latest frontend technologies
• Polished UX: Dark-mode interface with glassmorphism effects, micro-animations, and intuitive navigation

The proof of concept demonstrated the feasibility of AI-powered earnings analysis and showcased frontend capabilities that inform TradeInsight.ai's product development direction.

Technical Architecture

graph TD
    A[SvelteKit App] --> B[Routes]
    A --> C[Components]
    A --> D[Stores]
    A --> E[Types]
    
    B --> F[+page.svelte]
    B --> G[+layout.svelte]
    
    C --> H[Analysis Components]
    C --> I[Company Components]
    C --> J[UI Components]
    C --> K[Player Components]
    
    D --> L[analysisStore]
    D --> M[companyStore]
    D --> N[transcriptStore]
    D --> O[uiStore]

What I Learned

Key takeaways from this experience:

• Svelte 5 Runes: Mastered the new reactivity paradigm in Svelte 5, including $state, $derived, and reactive stores - a significant shift from Svelte 4's dollar-sign reactivity
• Design Systems: Learned to create cohesive design tokens and component APIs that scale across an entire application
• State Management Patterns: Developed expertise in managing complex application state with multiple interconnected stores and derived values
• Component Architecture: Built a modular, reusable component library following best practices for separation of concerns

This project reinforced my capabilities in frontend development and demonstrated how modern frameworks like SvelteKit can enable rapid development of complex, professional-grade applications for fintech products.