A real-time weather analysis dashboard that allows users to draw polygons on a map and visualize temperature data. Features include temperature-based color coding, timeline controls, and dynamic data updates.
- 🗺️ Interactive map with polygon drawing tools
- 🌡️ Real-time temperature data visualization
- 📊 Color-coded regions based on temperature rules
- ⏲️ Timeline controls for historical data
- 📱 Responsive design for all devices
Dashboard Overview
|
Color controls
|
- Framework: Next.js 13.4 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Map: Leaflet/react-leaflet
- Weather Data: Open-Meteo API
- State Management: Custom store implementation
- UI Components: Radix UI primitives
- Date Handling: Custom date utilities
- Node.js 16.8 or later
- npm or yarn package manager
- Clone the repository
git clone https://github.com/AbdurRohit/Weather-Ds.git
cd Weather-Ds- Install dependencies
npm install
# or
yarn install- Start the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser
src/
├── app/ # Next.js app router pages
├── components/ # React components
│ ├── ui/ # Shared UI components
│ └── ... # Feature components
├── lib/ # Utility functions and stores
└── styles/ # Global styles
- Draw polygons to define areas of interest
- Real-time temperature data fetching for drawn regions
- Color-coded visualization based on temperature rules
- Define custom color rules for temperature ranges
- Real-time updates as timeline changes
- Historical data analysis capabilities
- Select specific points in time
- Range selection for historical analysis
- Automatic data updates on time change
Contributions are welcome! Please feel free to submit a Pull Request.
- Open-Meteo for providing weather data API
- Leaflet for the interactive mapping capabilities
- Radix UI for accessible UI primitives