FinSight - Financial Advisory Platform

A professional financial advisory platform designed to provide portfolio analytics, risk assessment, and performance insights. Built with React, TypeScript, and modern web technologies, featuring a professional financial terminal design.

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

✨ Features

• Search-Centric Interface: Advanced search with category-based discovery
• Portfolio Analytics: Comprehensive portfolio performance analysis and risk metrics
• Account Management: Flexible account and group selection with business rule enforcement
• Answer Cards: Rich financial data presentation with interactive charts and KPIs
• Dark Mode: Professional financial terminal design
• Responsive Design: Mobile-optimized with desktop-first approach

🏗️ Tech Stack

Frontend

• React 18 + TypeScript for type-safe development
• Vite for fast development and optimized builds
• Tailwind CSS + shadcn/ui for consistent styling
• TanStack Query for server state management
• Recharts for financial data visualization

Backend

• Express.js + TypeScript REST API
• Drizzle ORM + PostgreSQL for data persistence
• Express Sessions with PostgreSQL storage

📁 Project Structure

finsight/
├── client/src/           # React frontend
│   ├── components/       # UI components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utilities and config
│   └── App.tsx          # Main application
├── server/              # Express.js backend
│   ├── index.ts         # Server entry point
│   ├── routes.ts        # API routes
│   └── storage.ts       # Data layer
├── shared/              # Shared types and schemas
└── Configuration files

🛠️ Development

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production (client + server)
• npm run start - Start production server
• npm run check - Run TypeScript type checking
• npm run db:push - Apply database schema changes

Key Components

• App.tsx - Main application with state management
• ContextBar.tsx - Account selection and filtering
• AnswerCard.tsx - Financial data presentation
• SearchOverlay.tsx - Search interface with suggestions
• TopNavigation.tsx - Header with branding and search

Business Logic

• Mutually Exclusive Selection: Users select either individual accounts OR account groups
• Minimum Selection Enforcement: At least one account must always be selected
• Layout Stability: Fixed-width containers prevent UI shifting during selections

🎨 Design System

• Colors: Professional financial palette with dark backgrounds
• Typography: Inter for UI text, JetBrains Mono for data
• Spacing: Consistent 2/4/6/8 unit spacing system
• Components: Specialized financial components (KPIs, charts, filters)

🔧 Configuration

Environment Variables

PORT=5000                    # Server port
DATABASE_URL=postgresql://   # PostgreSQL connection string
NODE_ENV=development         # Environment mode

Database Setup

# Apply database migrations
npm run db:push

📊 Architecture

The application follows a modern full-stack architecture:

1. Frontend: React SPA with TypeScript and Vite
2. Backend: Express.js API with TypeScript
3. Database: PostgreSQL with Drizzle ORM
4. State: TanStack Query for server state, React hooks for client state
5. Styling: Tailwind CSS with custom design tokens

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Technical Documentation
• Design Guidelines
• Claude Development Notes