This is a submission for the KendoReact Free Components Challenge.
What I Built
MarketSentry is a comprehensive, professional-grade financial dashboard that transforms complex market data into actionable insights. Built with React 18 and TypeScript, this application showcases the power and elegance of KendoReact components in creating enterprise-level financial applications.
🎯 Problem It Solves
Modern investors and traders need a unified platform to:
- Track Portfolio Performance with real-time calculations and sector analysis
- Monitor Market News with sentiment analysis and categorized feeds
- Manage Personal Finances with budget tracking and spending visualization
- Analyze Cryptocurrency Markets with live price updates and market data
- Access AI-Powered Insights for market predictions and risk assessments
- Follow Economic Events with an interactive calendar and impact analysis
- Maintain Trading Records with comprehensive journal functionality
MarketSentry solves these challenges by providing a single, cohesive platform with professional UI/UX design, real-time data processing, and intelligent analytics.
✨ Key Features
📊 Portfolio Management
- Real-time portfolio tracking with live price updates
- Interactive sector allocation with custom SVG pie charts
- Holdings management with add/remove functionality
- Performance metrics with gain/loss calculations
- Professional sector tags with color coding
💰 Spending Tracker
- Budget management with category-based tracking
- Custom SVG charts for spending trends and breakdowns
- Real-time budget calculations with progress indicators
- Expense management with intuitive add/delete functionality
- Visual budget progress with color-coded status indicators
📈 Market News & Analysis
- Live market news with AI-powered sentiment analysis
- Market alerts with real-time notifications
- Tabbed interface for organized news categories
- Professional news cards with source attribution
- Market sentiment indicators with visual feedback
🪙 Crypto Market Data
- Live cryptocurrency prices with real-time updates
- Price change indicators with visual feedback
- Market cap and volume data with formatted displays
- Professional crypto cards with hover effects
- Responsive grid layout for all screen sizes
🤖 AI Analysis
- Market predictions with confidence scores
- Risk assessments with detailed analysis
- Earnings analysis with professional card layouts
- Fundamental analysis with comprehensive metrics
- Tabbed analysis views for different data types
📅 Economic Calendar
- Interactive calendar with event visualization
- Economic event tracking with impact levels
- Professional calendar styling with dark theme
- Event filtering by impact and country
- Responsive calendar layout for all devices
📝 Trading Journal
- Comprehensive trade tracking with detailed entry forms
- Performance analysis with P&L calculations
- Trade history with sortable data tables
- Strategy tracking with detailed notes
- Professional trade cards with status indicators
⚙️ Component Showcase
- Real-time component usage analytics
- Professional metrics display with statistics
- Development impact tracking
- Component documentation and analysis
Demo
Github Link: https://github.com/Abhinandangithub01/marketsentry
Demo Link: https://marketsentry-production.up.railway.app/
KendoReact Components Used
Core Components (13 Total - 114+ Instances)
Button (15 instances)
- Action buttons throughout the application
- Add/remove functionality in portfolio and spending
- Form submissions and modal controls
- Navigation and interactive elements
Input (12 instances)
- Text input fields for data entry
- Stock symbols, company names, descriptions
- Search functionality across modules
- Form data collection
NumericTextBox (12 instances)
- Numeric inputs with validation and formatting
- Prices, quantities, amounts, shares
- Currency values with proper formatting
- Budget amounts and financial calculations
DropDownList (8 instances)
- Selection dropdowns for categories and filters
- Sector selection in portfolio management
- Expense categories in spending tracker
- Trade types and status filters
DatePicker (3 instances)
- Date selection for transactions and trades
- Economic event date filtering
- Trading journal date entries
TabStrip (8 instances)
- Tabbed interfaces for content organization
- Market news categories (Finance News, Economic Calendar, Upcoming Events)
- AI analysis sections (Insights, Predictions, Risk Assessment, Earnings)
- Component showcase analytics
Calendar (1 instance)
- Economic calendar date picker with professional styling
- Interactive event visualization
- Responsive calendar layout
Card (15 instances)
- Content containers throughout the application
- News articles, portfolio metrics, analysis sections
- Professional glassmorphism styling
- Responsive card layouts
Badge (8 instances)
- Status and category indicators
- Sentiment badges (Positive, Negative, Neutral)
- Impact levels (High, Medium, Low)
- Component type indicators
ProgressBar (3 instances)
- Budget usage visualization
- Portfolio allocation progress
- Loading states and progress indicators
SvgIcon (25 instances)
- Professional vector icons throughout the application
- Navigation icons, action buttons, status indicators
- Consistent iconography with Kendo design system
Grid (1 instance)
- Advanced data display in Kendo Showcase
- Component usage analytics table
- Sortable and filterable data presentation
Chart (4 instances)
- Data visualization for portfolio and spending
- Interactive charts with professional styling
- Custom chart configurations for financial data
Top comments (2)
Looks cool
Thanks