Transform your data into stunning visual insights with our modern, responsive dashboard featuring glassmorphism design, dark mode, and advanced 3D visualizations.
| 🎨 Glassmorphism UI Modern frosted glass effects |
🌙 Dark/Light Mode System-aware theming |
📱 Fully Responsive Mobile-first design |
⚡ High Performance Optimized rendering |
| 🔍 Advanced Filtering Multi-criteria search |
📈 3D Visualizations Interactive charts |
♿ Accessible WCAG 2.1 AA compliant |
🚀 Modern Stack React 18 Node.js |
📋 Prerequisites
Make sure you have the following installed:
- Node.js (v14.0.0 or higher)
- npm (v6.0.0 or higher) or yarn
- MongoDB (v4.0.0 or higher)
- Git
# 1️⃣ Clone the repository
git clone https://github.com/Unseencoderz/DataVisualization-server.git
cd DataVisualization-server
# 2️⃣ Install server dependencies
cd server
npm install
# 3️⃣ Install client dependencies
cd ../client
npm install
# 4️⃣ Set up environment variables
cd ../server
cp .env.example .env
# Edit .env with your configuration
# 5️⃣ Start the development servers
# Terminal 1 - Backend
cd server
npm run dev
# Terminal 2 - Frontend
cd client
npm startCreate a .env file in the server directory:
# Server Configuration
PORT=5000
NODE_ENV=development
# Database
MONGODB_URI=mongodb://localhost:27017/dataviz
DB_NAME=dataviz_pro
# Security
JWT_SECRET=your_super_secret_jwt_key
CORS_ORIGIN=http://localhost:3000
# API Configuration
API_VERSION=v1
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100🎨 UI/UX Enhancements
- ✅ Glassmorphism Effects - Frosted glass aesthetics with backdrop-filter blur
- ✅ Dark/Light Mode - System-aware theme switching with smooth transitions
- ✅ Animated Backgrounds - Dynamic gradient backgrounds with floating particles
- ✅ Modern Typography - Inter font family with improved readability
- ✅ Responsive Design - Mobile-first approach with fluid breakpoints
- ✅ Statistics Cards - Real-time metrics with glassmorphism effects
- ✅ Advanced Filtering - Multi-criteria search with visual feedback
- ✅ Data Table - Sortable, searchable table with pagination
- ✅ Loading States - Skeleton screens and smooth transitions
- ✅ Error Handling - Graceful error states with retry options
📊 Advanced Visualizations
- 📈 3D Scatter Plots - Interactive intensity/likelihood/relevance correlation
- 🔥 Heatmaps - Sector vs Region intensity mapping
- 🍩 Enhanced Donut Charts - Sector distribution with center annotations
- 📊 Bar Charts - Responsive intensity visualization by year
- 📉 Line Charts - Trend analysis with smooth curves
- ✅ Interactive Tooltips - Rich hover information with formatting
- ✅ Zoom & Pan - Navigate through large datasets
- ✅ Export Options - Download charts as PNG/SVG/PDF
- ✅ Real-time Updates - Live data synchronization
- ✅ Theme Integration - Charts adapt to dark/light mode
⚡ Performance Optimizations
- ⚡ Component Memoization - Optimized re-renders with React.memo
- ⚡ Lazy Loading - Code splitting for faster initial load
- ⚡ Efficient State Management - Consolidated filter state
- ⚡ Debounced Search - Optimized search performance
- ⚡ Virtual Scrolling - Handle large datasets efficiently
- ⚡ Database Indexing - Optimized MongoDB queries
- ⚡ Response Caching - Redis integration for faster responses
- ⚡ API Rate Limiting - Prevent abuse and ensure stability
- ⚡ Compression - Gzip compression for smaller payloads
- ⚡ Error Logging - Comprehensive error tracking
♿ Accessibility Features
- ✅ Keyboard Navigation - Full keyboard accessibility
- ✅ Screen Reader Support - Semantic HTML and ARIA labels
- ✅ Color Contrast - High contrast ratios for readability
- ✅ Focus Management - Visible focus indicators
- ✅ Reduced Motion - Respects user motion preferences
📡 API Endpoints
https://your-api-domain.com/api/v1
Retrieve all data entries with optional filtering.
// Request
GET /api/v1/data?sector=Energy®ion=Asia&limit=100&page=1
// Response
{
"success": true,
"data": [
{
"_id": "507f1f77bcf86cd799439011",
"title": "Energy Market Analysis",
"sector": "Energy",
"region": "Asia",
"country": "India",
"intensity": 4,
"likelihood": 3,
"relevance": 5,
"published": "2024-01-15T10:30:00Z",
"source": "Reuters",
"url": "https://example.com/article"
}
],
"pagination": {
"currentPage": 1,
"totalPages": 10,
"totalItems": 1000,
"hasNext": true,
"hasPrev": false
}
}Get aggregated statistics for dashboard metrics.
// Response
{
"success": true,
"stats": {
"totalRecords": 1000,
"avgIntensity": 3.2,
"avgLikelihood": 2.8,
"avgRelevance": 3.5,
"sectorDistribution": {
"Energy": 250,
"Technology": 200,
"Healthcare": 150
}
}
}{
"success": false,
"error": {
"code": "VALIDATION_ERROR",
"message": "Invalid sector parameter",
"details": {
"field": "sector",
"value": "invalid_sector",
"allowedValues": ["Energy", "Technology", "Healthcare"]
}
}
}🔐 Authentication
Include your API key in the request headers:
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
}- Limit: 100 requests per 15 minutes per IP
- Headers: Rate limit info included in response headers
🏗️ Folder Organization
📦 /DataVisualization-server
├── 📁 client/ # Frontend React Application
│ ├── 📁 public/
│ │ ├── 📄 index.html
│ │ ├── 📄 manifest.json
│ │ └── 📁 icons/
│ ├── 📁 src/
│ │ ├── 📁 components/ # Reusable UI Components
│ │ │ ├── 📄 Dashboard.js # Main dashboard component
│ │ │ ├── 📄 StatsCard.js # Statistics display cards
│ │ │ ├── 📄 LoadingSpinner.js # Loading states
│ │ │ ├── 📄 FilterPanel.js # Advanced filtering
│ │ │ ├── 📄 ChartContainer.js # Chart wrapper
│ │ │ ├── 📄 DataTable.js # Data table with features
│ │ │ └── 📄 AdvancedCharts.js # 3D visualizations
│ │ ├── 📁 styles/ # CSS Stylesheets
│ │ │ ├── 📄 Dashboard.css # Main dashboard styles
│ │ │ ├── 📄 globals.css # Global styles
│ │ │ └── 📄 themes.css # Theme configurations
│ │ ├── 📁 utils/ # Utility functions
│ │ │ ├── 📄 api.js # API client
│ │ │ ├── 📄 helpers.js # Helper functions
│ │ │ └── 📄 constants.js # App constants
│ │ ├── 📁 hooks/ # Custom React hooks
│ │ │ ├── 📄 useTheme.js # Theme management
│ │ │ ├── 📄 useApi.js # API calls
│ │ │ └── 📄 useLocalStorage.js # Local storage
│ │ ├── 📄 App.js # Main App component
│ │ ├── 📄 App.css # App styles
│ │ └── 📄 index.js # Entry point
│ ├── 📄 package.json # Dependencies & scripts
│ └── 📄 .env.example # Environment variables template
├── 📁 server/ # Backend Node.js Application
│ ├── 📁 controllers/ # Route controllers
│ │ ├── 📄 dataController.js # Data operations
│ │ ├── 📄 statsController.js # Statistics operations
│ │ └── 📄 authController.js # Authentication
│ ├── 📁 models/ # Database models
│ │ ├── 📄 Data.js # Data model schema
│ │ └── 📄 User.js # User model schema
│ ├── 📁 routes/ # API routes
│ │ ├── 📄 dataRoutes.js # Data endpoints
│ │ ├── 📄 statsRoutes.js # Statistics endpoints
│ │ └── 📄 authRoutes.js # Auth endpoints
│ ├── 📁 middleware/ # Custom middleware
│ │ ├── 📄 auth.js # Authentication middleware
│ │ ├── 📄 errorHandler.js # Error handling
│ │ ├── 📄 logger.js # Request logging
│ │ └── 📄 rateLimiter.js # Rate limiting
│ ├── 📁 config/ # Configuration files
│ │ ├── 📄 database.js # Database connection
│ │ ├── 📄 cors.js # CORS configuration
│ │ └── 📄 environment.js # Environment setup
│ ├── 📁 utils/ # Utility functions
│ │ ├── 📄 validation.js # Input validation
│ │ ├── 📄 helpers.js # Helper functions
│ │ └── 📄 constants.js # Server constants
│ ├── 📄 app.js # Express app setup
│ ├── 📄 server.js # Server entry point
│ ├── 📄 package.json # Dependencies & scripts
│ └── 📄 .env.example # Environment variables template
├── 📁 docs/ # Documentation
│ ├── 📄 API.md # API documentation
│ ├── 📄 DEPLOYMENT.md # Deployment guide
│ └── 📄 CONTRIBUTING.md # Contribution guidelines
├── 📄 README.md # This file
├── 📄 FRONTEND_IMPROVEMENTS.md # Frontend enhancement docs
├── 📄 LICENSE # MIT License
├── 📄 .gitignore # Git ignore rules
└── 📄 docker-compose.yml # Docker configuration
🚀 Getting Started
After starting the application, you'll see the main dashboard with:
- Statistics Cards: Key metrics at the top
- Filter Panel: Left sidebar for data filtering
- Charts Section: Various visualizations
- Data Table: Detailed data view at the bottom
- Open Filter Panel: Click on any filter dropdown
- Select Criteria: Choose from available options
- Apply Filters: Data updates automatically
- Clear Filters: Use the clear button to reset
- Hover: View detailed tooltips
- Zoom: Use mouse wheel on 3D charts
- Pan: Click and drag to navigate
- Toggle: Click legend items to show/hide data
- Auto Mode: Follows system preference
- Manual Toggle: Use the theme switch in the navbar
- Persistence: Theme preference is saved locally
📊 Chart Types Guide
Shows intensity values grouped by publication year.
- Use Case: Trend analysis over time
- Interactions: Hover for exact values
- Filtering: Responsive to all filters
Displays intensity, likelihood, and relevance correlation.
- Use Case: Complex relationship analysis
- Interactions: Rotate, zoom, and hover
- Color Coding: By relevance values
Shows intensity distribution across sectors and regions.
- Use Case: Geographic and sector analysis
- Color Scale: Darker = higher intensity
- Interactions: Hover for exact values
Displays the proportion of records by sector.
- Use Case: Distribution analysis
- Center Annotation: Total record count
- Interactions: Click to filter by sector
🛠️ Development Setup
- Node.js (v14)
- MongoDB (v4)
- Git
- Code editor (VS Code recommended)
# 1. Fork the repository
# 2. Clone your fork
git clone https://github.com/Unseencoderz/DataVisualization-server.git
# 3. Create a feature branch
git checkout -b feature/amazing-feature
# 4. Install dependencies
npm run install:all
# 5. Start development servers
npm run dev
# 6. Make your changes
# 7. Run tests
npm run test
# 8. Commit your changes
git commit -m "Add amazing feature"
# 9. Push to your fork
git push origin feature/amazing-feature
# 10. Create a Pull Request📋 Contribution Guidelines
- ✅ Follow ESLint configuration
- ✅ Use Prettier for formatting
- ✅ Write meaningful commit messages
- ✅ Add JSDoc comments for functions
- ✅ Include unit tests for new features
- Update Documentation: Include relevant docs updates
- Add Tests: Ensure new features have test coverage
- Check Performance: No significant performance regression
- Update Changelog: Add entry for your changes
- Request Review: Tag maintainers for review
When reporting issues, please include:
- Environment: OS, Node.js version, browser
- Steps to Reproduce: Detailed reproduction steps
- Expected Behavior: What should happen
- Actual Behavior: What actually happens
- Screenshots: If applicable
🏆 Contributors
This project is proudly built and maintained solo with 💻❤️ by @Unseencoderz.
Made with contrib.rocks — though it’s a solo act, every commit counts!
⚖️ MIT License
MIT License
Copyright (c) 2024 DataViz Pro Dashboard
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.
