A modern, interactive web application for visualizing dynamic spatial and temporal data. Built with Next.js, TypeScript, and modern React patterns to provide an intuitive dashboard for data analysis and visualization.
- Interactive Map Component: Leaflet-based mapping with polygon drawing capabilities
- Timeline Slider: 30-day window with hourly resolution, supporting both single-point and range selection
- Dynamic Polygon Coloring: Real-time color updates based on data and user-defined rules
- Data Integration: Open-Meteo API integration for weather data visualization
- State Persistence: Automatic saving/loading of dashboard state using localStorage
- Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile
- Interactive Tooltips: Hover tooltips showing detailed polygon information
- Smooth Animations: Polished UI with smooth transitions and hover effects
- Mobile-First Sidebar: Collapsible sidebar with overlay for mobile devices
- Real-time Updates: Automatic data refresh when timeline changes
- Node.js 18+
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd data-dashboard
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to http://localhost:3000
- Click the "Draw Polygon" button in the top-right corner of the map
- Click on the map to add points (minimum 3, maximum 12 points)
- Double-click to finish drawing
- The polygon will appear in the sidebar for configuration
- Toggle between modes: Use the "Point" and "Range" buttons to switch between single-time and time-range selection
- Single mode: Drag the handle to select a specific time
- Range mode: Drag either handle to define a time window
- Click to jump: Click anywhere on the timeline to quickly jump to that time
- Select a polygon from the sidebar
- Choose a data field (Temperature, Humidity, Precipitation, Wind Speed)
- Add color rules by setting:
- Operator: <, ≤, >, ≥
- Threshold value: Numerical threshold
- Color: Color to apply when condition is met
- Rules are applied in order - first matching rule determines polygon color
- Pan: Drag to move around the map
- Reset View: Click "Reset View" to return to default position
- Polygon Tooltips: Hover over polygons to see detailed information
- Fixed Zoom: Zoom is locked to ~2 sq km resolution for consistent data analysis
src/
├── app/ # Next.js app router
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Main dashboard page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── layout/ # Layout components
│ ├── map/ # Map-related components
│ ├── timeline/ # Timeline slider components
│ ├── sidebar/ # Sidebar and control components
│ └── ui/ # Reusable UI components (shadcn/ui)
├── hooks/ # Custom React hooks
│ ├── usePolygonData.ts # Data fetching and polygon management
│ └── useStatePersistence.ts # State persistence logic
├── services/ # API services
│ └── openMeteoApi.ts # Open-Meteo API integration
├── stores/ # State management
│ └── useStore.ts # Zustand store configuration
├── types/ # TypeScript type definitions
│ └── index.ts # Application types
└── utils/ # Utility functions
└── polygonColoring.ts # Color rule application logic
- Framework: Next.js 15 with React 19
- Language: TypeScript
- State Management: Zustand
- Mapping: Leaflet with React-Leaflet
- UI Components: shadcn/ui with Tailwind CSS
- Date Handling: date-fns
- Icons: Lucide React
- API Integration: Native fetch with custom service layer
The application integrates with the Open-Meteo Archive API to fetch historical weather data.
Available Data Fields:
- Temperature (°C)
- Relative Humidity (%)
- Precipitation (mm)
- Wind Speed (m/s)
API Configuration:
- No API key required
- Automatic timezone detection
- Hourly resolution data
- Historical data archive access
- Component-Based Architecture: Modular design with clear separation of concerns
- Custom Hooks: Business logic separated into reusable hooks
- Type Safety: Full TypeScript coverage for robust development
- Performance: Optimized rendering with proper dependency management
- Mobile-First: Responsive design starting from mobile viewport
- Accessibility: Semantic HTML and proper ARIA labels
- Visual Hierarchy: Clear information architecture with consistent spacing
- Interactive Feedback: Hover states, transitions, and loading indicators
- Zustand Store: Lightweight, performant state management
- Local Storage: Persistent state across browser sessions
- Reactive Updates: Automatic data refresh on timeline changes
npm run build
npm start- Push code to GitHub repository
- Connect repository to Vercel
- Automatic deployment on each push to main branch
- Build the application:
npm run build - Deploy the
outfolder to Netlify
No environment variables are required for basic functionality. All API calls use public endpoints.
- Map Center: Modify default coordinates in
src/stores/useStore.ts - Time Window: Adjust timeline window in store configuration
- API Endpoints: Extend API services in
src/services/ - Color Schemes: Customize default color rules in
src/utils/polygonColoring.ts
Map not loading:
- Check internet connection for tile server access
- Verify Leaflet CSS is properly imported
API errors:
- Open-Meteo API requires internet connection
- Check browser console for detailed error messages
State not persisting:
- Ensure localStorage is available in browser
- Check for storage quota limitations
- ESLint configuration for code consistency
- TypeScript strict mode enabled
- Component-level error boundaries
- Comprehensive type coverage
- React.memo for expensive components
- Debounced API calls
- Efficient re-rendering with Zustand
- Lazy loading for large datasets
- 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
This project is created for educational purposes as part of the Mind Webs Ventures Software Development Engineering Internship assignment.
- Open-Meteo: Free weather API service
- shadcn/ui: Beautiful, accessible UI components
- Leaflet: Open-source mapping library
- Next.js Team: Outstanding React framework
Built with ❤️ using modern web technologies