A comprehensive analytics and forecasting platform with advanced features for data-driven insights, real-time monitoring, and predictive analytics.
- 🎯 Frontend (React App): https://insightdash-frontend.onrender.com
- ⚡ Backend API: https://insightdash-backend.onrender.com
- Visit: https://insightdash-frontend.onrender.com
- Register: Create a new account (any email/username works)
- Login: Use your created credentials
- Explore: Navigate to analytics dashboard, data management, and forecasting features
✅ Complete full-stack deployment on Render.com
✅ User registration and authentication working
✅ Analytics dashboard with live data
✅ Real-time API connectivity
✅ Interactive data visualizations
✅ Model comparison and forecasting
✅ Dataset management and export
✅ Responsive design for all devices
┌─────────────────────────────────────────────────────────────┐
│ PRODUCTION DEPLOYMENT │
├─────────────────────────────────────────────────────────────┤
│ │
│ Frontend (React) Backend (Python) │
│ ├─ Render Static Site ├─ Render Web Service │
│ ├─ https://insightdash- ├─ https://insightdash- │
│ │ frontend.onrender.com │ backend.onrender.com │
│ ├─ Build: npm run build ├─ Docker Container │
│ ├─ Serve: Static Files ├─ Python Mock Server │
│ └─ Environment: Production └─ Port: Dynamic (Render) │
│ │
│ API Communication │
│ Frontend ←─────────────────→ Backend │
│ (HTTPS Requests) (JSON Responses) │
│ │
└─────────────────────────────────────────────────────────────┘
InsightDash/
├── 📁 frontend/ # React 18 Application
│ ├── 📁 src/
│ │ ├── 📁 components/ # UI Components
│ │ │ ├── 📁 analytics/ # Analytics Dashboard
│ │ │ ├── 📁 auth/ # Authentication
│ │ │ ├── 📁 dashboard/ # Main Dashboard
│ │ │ └── 📁 datasets/ # Data Management
│ │ ├── 📁 services/ # API Services
│ │ └── 📁 types/ # TypeScript Types
│ ├── 📄 package.json # Dependencies
│ └── 📄 Dockerfile # Frontend Container
├── 📁 backend/ # Python Backend
│ ├── 📄 mock_server.py # Production Mock Server
│ ├── 📄 requirements.txt # Python Dependencies
│ └── 📄 Dockerfile # Backend Container
├── 📄 README.md # This file
└── 📁 deployment/ # Deployment Configs
├── 📄 DEPLOYMENT_GUIDE.md # Complete deployment guide
├── 📄 render-frontend-instructions.md
└── 📄 DEPLOYMENT_STATUS.md # Current status
- 📈 Real-time Metrics: Live data visualization with interactive charts
- 📋 Summary Cards: Total datasets, forecasts, accuracy metrics
- 🔄 Auto-refresh: Dynamic data updates every 30 seconds
- 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile
- 🤖 Multiple Models: Linear Regression, ARIMA, Moving Averages
- 📊 Model Comparison: Side-by-side accuracy and performance metrics
- 🎯 Forecasting Engine: Generate predictions with confidence intervals
- 📉 Trend Analysis: Pattern detection and statistical insights
- 📁 Multi-format Support: CSV, JSON, Excel file handling
- 👀 Data Preview: Paginated exploration with filtering
- 📤 Export Features: Download in multiple formats
- 🔍 Analytics Per Dataset: Individual dataset insights and stats
- 🔐 Secure Registration: JWT-based authentication system
- 🚪 Login/Logout: Persistent session management
- 👥 User Profiles: Account management and preferences
- 🛡️ Protected Routes: Secure access to dashboard features
- 🎨 Modern Design: Clean, professional Tailwind CSS styling
- ⚡ Fast Performance: Optimized React components and lazy loading
- 🔄 State Management: Zustand for efficient state handling
- 🎯 Navigation: Intuitive routing with React Router
- 🔗 RESTful API: Complete CRUD operations for all resources
- 📊 Mock Data: Realistic sample data for demonstration
- 🔄 CORS Support: Cross-origin requests properly configured
- 🚀 Scalable: Ready for production database integration
React 18.2.0 # Modern React with Hooks
TypeScript 4.9.5 # Type safety and better DX
Tailwind CSS 3.4.0 # Utility-first CSS framework
React Router 6.20.1 # Client-side routing
React Query 5.0.0 # Server state management
Zustand 4.4.7 # Global state management
Chart.js 4.4.9 # Interactive data visualization
Recharts 2.8.0 # React chart components
Axios 1.6.2 # HTTP client for API calls
React Hot Toast 2.4.1 # Beautiful notifications
Python 3.10+ # Modern Python runtime
HTTP Server # Built-in Python HTTP server
JSON Data Handling # Native JSON processing
CORS Support # Cross-origin resource sharing
Mock Data Generation # Realistic sample data
RESTful Architecture # Standard API design
Render.com # Cloud hosting platform
Docker # Containerization
GitHub Actions # CI/CD pipeline
Git Version Control # Source code management
Environment Variables # Configuration management
# Clone the repository
git clone https://github.com/jellyfishing2346/InsightDash.git
cd InsightDash
# Setup Frontend
cd InsightDash/frontend
npm install
npm start # Runs on http://localhost:3000
# Setup Backend (in new terminal)
cd ../backend
python3 mock_server.py # Runs on http://localhost:8000- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- API Documentation: http://localhost:8000 (shows available endpoints)
POST /api/v1/auth/register # User registration
POST /api/v1/auth/login # User login
GET /api/v1/auth/me # Current user info
GET /api/v1/analytics/summary # Analytics overview
GET /api/v1/analytics/forecasts/recent # Recent forecasts
GET /api/v1/analytics/models/stats # Model statistics
GET /api/v1/analytics/models/compare # Model comparison
GET /api/v1/datasets # List all datasets
GET /api/v1/datasets/{id} # Get specific dataset
GET /api/v1/datasets/{id}/preview # Preview dataset data
GET /api/v1/datasets/{id}/analytics # Dataset analytics
GET /api/v1/datasets/{id}/export # Export dataset
-
👤 Register:
- Click "Sign Up"
- Fill in any username, email, and password
- Submit the form
-
🚪 Login: Use your created credentials
-
📊 Explore Dashboard:
- View analytics summary cards
- Check recent forecasts
- Compare model performance
-
💾 Browse Datasets:
- Navigate to "Datasets"
- Preview sample data
- View individual analytics
-
🔮 Analytics Features:
- Go to "Analytics" section
- View model comparisons
- Explore forecasting data
This project demonstrates a complete full-stack deployment including:
- ✅ Frontend Deployment: React app with TypeScript and modern tooling
- ✅ Backend Deployment: Python mock server with comprehensive API
- ✅ Environment Configuration: Production-ready settings and variables
- ✅ CORS Resolution: Proper cross-origin request handling
- ✅ Authentication Flow: Complete user registration and login system
- ✅ API Integration: Seamless frontend-backend communication
- ✅ Error Handling: Robust error management and user feedback
- ✅ Performance Optimization: Fast loading and responsive design
For questions, issues, or contributions:
- 📧 Email: Support through GitHub issues
- 🐛 Bug Reports: GitHub Issues
- 💡 Feature Requests: GitHub Discussions
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Commercial Use: Free to use in commercial projects
- ✅ Modification: Free to modify and adapt the code
- ✅ Distribution: Free to distribute copies
- ✅ Private Use: Free to use privately
⚠️ Liability: No warranty or liability provided⚠️ Trademark: Does not grant trademark rights
⭐ Star this repository if you found it helpful!
🔗 Live Links: