🦟 DEN-Smart

Dengue Early-Warning & Monitoring System

A comprehensive web-based platform for dengue fever surveillance, prediction, and monitoring using advanced machine learning algorithms and real-time data visualization.

🌟 Overview

DEN-Smart is an intelligent early warning system designed to predict and monitor dengue fever outbreaks. The platform combines epidemiological data, environmental factors, and machine learning models to provide accurate predictions and actionable insights for public health officials and healthcare providers.

✨ Key Features

• 🔮 AI-Powered Predictions - Advanced machine learning models for dengue outbreak forecasting
• 📊 Interactive Dashboard - Real-time data visualization and analytics
• 🗺️ Geographic Mapping - Interactive maps showing dengue distribution and risk areas
• 📈 Trend Analysis - Historical data analysis and trend identification
• 🏥 Clinical Integration - Healthcare provider tools and patient management
• 📱 Responsive Design - Optimized for desktop, tablet, and mobile devices
• 🔒 Secure & Reliable - Built with modern security practices and performance optimization

🚀 Live Demo

Visit the live application: DEN-Smart Demo

🛠️ Technology Stack

Frontend

• React 18.3.1 - Modern UI library with hooks and concurrent features
• TypeScript 5.8.3 - Type-safe JavaScript development
• Vite 6.3.5 - Fast build tool and development server
• Tailwind CSS 3.4.17 - Utility-first CSS framework
• React Router 7.9.5 - Client-side routing

Data Visualization

• Recharts 3.3.0 - Composable charting library
• Leaflet 1.9.4 - Interactive mapping library
• React Leaflet 4.2.1 - React components for Leaflet maps

State Management & Utils

• Zustand 5.0.3 - Lightweight state management
• React Hook Form 7.65.0 - Performant forms with easy validation
• Axios 1.13.1 - HTTP client for API requests
• Date-fns 4.1.0 - Modern JavaScript date utility library
• Lucide React 0.511.0 - Beautiful & consistent icon library

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (version 18.0 or higher)
• npm (version 8.0 or higher) or yarn
• Git for version control

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/your-username/den-smart.git
cd den-smart

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The application will be available at http://localhost:5173

4. Build for Production

npm run build

5. Preview Production Build

npm run preview

📁 Project Structure

den-smart/
├── public/                 # Static assets
│   ├── case_dbd/          # Dengue fever case data
│   ├── case_dd/           # Dengue death case data
│   ├── favicon.svg        # Application favicon
│   ├── robots.txt         # SEO robots file
│   └── sitemap.xml        # SEO sitemap
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── ui/           # Base UI components
│   │   ├── Header.tsx    # Navigation header
│   │   ├── Footer.tsx    # Application footer
│   │   ├── Layout.tsx    # Main layout wrapper
│   │   └── SEO.tsx       # SEO meta components
│   ├── pages/            # Application pages
│   │   ├── Home.tsx      # Landing page
│   │   ├── Dashboard.tsx # Main dashboard
│   │   ├── Prediction.tsx# Prediction interface
│   │   ├── MapView.tsx   # Geographic visualization
│   │   ├── Clinical.tsx  # Clinical tools
│   │   ├── Data.tsx      # Data management
│   │   ├── About.tsx     # About page
│   │   ├── NotFound.tsx  # 404 error page
│   │   └── ComingSoon.tsx# Coming soon page
│   ├── data/             # Data services and adapters
│   │   ├── aiService.ts  # AI/ML service integration
│   │   ├── dbdData.ts    # Dengue data processing
│   │   └── mlService.ts  # Machine learning utilities
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   └── assets/           # Static assets
├── vercel.json           # Vercel deployment configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── vite.config.ts        # Vite build configuration
└── tsconfig.json         # TypeScript configuration

🎯 Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run build	Build the project for production
npm run preview	Preview the production build locally
npm run lint	Run ESLint for code quality checks
npm run check	Run TypeScript type checking

🌐 Deployment

Vercel (Recommended)

This project is optimized for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Vercel will automatically detect the framework and configure build settings
3. The vercel.json file ensures proper SPA routing

Manual Deployment

1. Build the project:

   npm run build

2. Deploy the dist folder to your hosting provider

🔧 Configuration

Environment Variables

Create a .env file in the root directory for environment-specific configurations:

VITE_API_BASE_URL=https://api.your-domain.com
VITE_MAP_API_KEY=your_map_api_key
VITE_ANALYTICS_ID=your_analytics_id

Vercel Configuration

The project includes a vercel.json file that configures:

• SPA routing for client-side navigation
• Proper caching headers for static assets
• Optimized build settings

📊 Features Overview

🏠 Dashboard

• Real-time dengue case statistics
• Interactive charts and graphs
• Key performance indicators
• Trend analysis and insights

🔮 AI Predictions

• Machine learning-based outbreak predictions
• Risk assessment algorithms
• Predictive modeling visualization
• Confidence intervals and accuracy metrics

🗺️ Geographic Mapping

• Interactive dengue case distribution maps
• Heat maps showing risk areas
• Geographic clustering analysis
• Location-based filtering and search

🏥 Clinical Tools

• Patient management interface
• Case reporting system
• Clinical decision support
• Healthcare provider dashboard

📈 Data Management

• Historical data visualization
• Data import/export functionality
• Statistical analysis tools
• Report generation

🔒 Security & Performance

• Type Safety: Full TypeScript implementation
• Code Quality: ESLint configuration with strict rules
• Performance: Optimized bundle size and lazy loading
• SEO: Meta tags, sitemap, and robots.txt
• Accessibility: WCAG 2.1 compliant components
• Security: Secure headers and content security policy

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

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

MIT License

Copyright (c) 2024 DEN-Smart

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 Acknowledgments

• World Health Organization (WHO) - For dengue surveillance guidelines
• Open Source Community - For the amazing tools and libraries used in this project

---

Built with ❤️ for public health

🌐 Website