A professional Security Operations Center dashboard built with KendoReact components and real AI-powered threat analysis using Cohere API. Designed for security teams to monitor threats in real-time with an enterprise-grade interface.
git clone https://github.com/joupify/soc-cert-dashboard.git cd soc-cert-dashboard npm install npm start
Opens http://localhost:3000
Free Components Verified: All @progress/kendo-react-* packages used are free tier.
🎯 Demo & Resources 🌐 Live Demo: https://soc-cert-dashboard.vercel.app/
💻 Source Code: https://github.com/joupify/soc-cert-dashboard
🎥 Video Demonstration: Integrated directly in the application with synchronized background music
-
Main interface of the SOC-CERT dashboard with real-time monitoring
Professional dark theme optimized for night-time monitoring
Clean light theme design for daytime use
Responsive mobile version adapted for tablets and smartphones
Integrated directly into the application with synchronized background music
💡 Professional Tip: The video demo is embedded within the application to provide context and showcase the complete user experience.
✨ Key Features 🔍 Real-Time Threat Monitoring Live Alert Grid with filtering, sorting, and pagination
Interactive Charts showing threat distribution and trends
Real-time Analytics with KendoReact data visualization
🤖 AI-Powered Security Analysis Cohere AI Integration for authentic threat assessment
Risk Scoring with actionable recommendations
Critical Threat Identification powered by machine learning
🎨 Professional UI/UX Dark/Light Theme toggle with SOC-themed design
100% KendoReact Components - no external CSS frameworks
Mobile-First Responsive design
🚀 Enterprise Ready n8n Integration for automated alert ingestion
Redis Persistence for alert data
Production-Grade error handling
🏆 KendoReact Components Mastered (15+) Category Components Usage Data Management Grid, GridColumn ×4, Pager Advanced alert monitoring Data Visualization Chart, ChartSeries, ChartSeriesItem Threat analytics Navigation & Layout Menu, MenuItem, TabStrip, Popup Dashboard navigation UI Controls Button ×5, AutoComplete, Tooltip User interactions Feedback & Layout Card, Loader Professional interface 🧠 AI Integration - Real vs Simulated ✅ Authentic Cohere API Implementation While other submissions simulated AI features, SOC-CERT delivers real API integration:
Live Cohere API Calls using Command model
Genuine Threat Analysis with real risk scoring
Transparent Fallback System for robust UX
Raw JSON Output displayed for verification
javascript // Real AI Analysis - No Mocking const analysis = await cohere.generate({ model: 'command', prompt: 'Analyze security threats...', max_tokens: 300 }); 🚀 Quick Start Prerequisites Node.js ≥ 18
npm or yarn
Installation bash
git clone https://github.com/joupify/soc-cert-dashboard.git cd soc-cert-dashboard
npm install
npm start Environment Setup Create .env.local:
env REACT_APP_COHERE_API_KEY=your_cohere_api_key_here REACT_APP_REDIS_URL=your_redis_connection_string 📱 Responsive Design The dashboard features a mobile-first responsive design built entirely with KendoReact:
Desktop: Full-featured dashboard with side-by-side panels
Tablet: Optimized layout with collapsible sections
Mobile: Vertical stack with hamburger menu
🔧 Technical Architecture Frontend Stack React 18 with functional components and hooks
KendoReact for all UI components
Custom CSS for SOC-themed styling
Cohere AI for threat analysis
Backend Integration RESTful API for alert management
Redis for data persistence
n8n Automation for alert ingestion
Project Structure text src/ ├── components/ │ ├── AiAnalyst.js # AI threat analysis │ ├── RealTimeAlertChart.js # Interactive charts │ ├── SeverityBadge.js # Threat level indicators │ └── NeonEagle.js # Animated header ├── services/ │ └── cohereAnalyst.js # Cohere AI integration └── styles/ ├── dark-theme.css # Dark mode styling └── responsive.css # Mobile adaptations 🎯 From Zero to KendoReact Hero in 16 Days Before (Day 1) After (Day 16) ❌ React Beginner ✅ 15+ Kendo Components ❌ Kendo Newbie ✅ Professional Dashboard ❌ API Novice ✅ Real AI Integration Key Achievements Mastered 15+ KendoReact components
Implemented real AI integration
Built responsive enterprise dashboard
Solved complex technical challenges
🤖 KendoReact AI Assistant Usage Throughout development, I leveraged the KendoReact AI Assistant for:
Component Guidance: Best practices for Grid, Chart, and Layout components
API Documentation: Quick access to prop definitions and examples
Performance Optimization: Suggestions for efficient rendering
Responsive Design: Mobile adaptation strategies
🔌 API Integration Alert Ingestion Endpoint javascript POST /api/alerts Content-Type: application/json
{ "alerts": [ { "id": "CVE-2025-12345", "title": "Security Threat Detected", "severity": "High", "timestamp": "2025-09-24T10:00:00Z" } ] } AI Analysis Endpoint javascript POST https://api.cohere.ai/v1/generate { "model": "command", "prompt": "Analyze security threats...", "max_tokens": 300 } 🚀 Deployment Vercel (Recommended) bash
npm i -g vercel
vercel --prod Build for Production bash
npm run build
npx serve -s build 📊 Performance Metrics First Load: < 2s
Lighthouse Score: 95+
Bundle Size: Optimized with code splitting
AI Response Time: < 3 seconds
🏆 Competitive Advantage Feature SOC-CERT Other Submissions AI Integration ✅ Real Cohere API ❌ Simulated/Mocked Error Handling ✅ Production-ready ❌ Basic fallbacks Transparency ✅ Raw JSON visible ❌ Hidden implementation Technical Depth ✅ Advanced features ❌ Basic functionality 🙋♂️ Troubleshooting Common Issues bash
npm start -- --port 3001
cp .env.example .env.local
rm -rf node_modules && npm install API Configuration Ensure your Cohere API key has proper permissions for the generate endpoint.
🤝 Contributing Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request
📄 License This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments KendoReact Team for exceptional UI components
Progress Software for the challenge opportunity
Cohere for powerful AI capabilities
React Community for continuous learning resources
[Live Demo] • [Source Code] • [Video Demo]