🌤️ SSUET Weather App

🌤️ Live SSUET Weather App

A responsive full-stack weather web app with map integration, dashboard, blog, events, and newsletter system. Built using HTML, CSS, JavaScript, Node.js (Express), and SQL Server.

• 🌦️ Overview
• 🚀 Features
• 🛠️ Tech Stack
• ⚙️ Setup Guide
• 🗺️ Map Integration
• 📊 Dashboard & Database
• 📰 Blog & Events
• 📩 Newsletter Subscription
• 📱 Responsive Design
• 💡 Future Improvements
• 📜 License

Weather Dashboard Pro provides real-time weather information with a sleek interface, integrated world map, and content-driven features. It combines data, design, and interactivity to create a complete platform for weather insights, user engagement, and content updates.

✅ Real-Time Weather: Fetches data from OpenWeatherMap API. ✅ Caching System: Reduces redundant API calls via SQL Server. ✅ Dynamic UI: Displays live temperature, wind, humidity, and conditions.

✅ Interactive Leaflet.js map with city weather markers. ✅ Click any location to instantly view current weather. ✅ Pan and zoom support with real-time updates.

✅ Displays most-searched cities and recent activity. ✅ Logs weather requests and API usage metrics. ✅ (Optional) User roles & JWT authentication.

✅ Blog posts about climate awareness and technology. ✅ Event scheduler for weather-related conferences or updates. ✅ Both managed through SQL Server with CRUD APIs.

✅ Users can subscribe to weather alerts via email. ✅ Stored securely in SQL Server. ✅ Integrated with Nodemailer or SendGrid.

✅ Works seamlessly on desktop, tablet, and mobile. ✅ Clean, minimal, and modern CSS design. ✅ Uses Flexbox + Grid layout.

• Node.js (v16 or higher)
• Microsoft SQL Server
• API key from OpenWeatherMap

# Clone repository
git clone https://github.com/your-username/weather-dashboard-pro.git
cd weather-dashboard-pro/server

# Install dependencies
npm install

# Configure environment
cp .env.example .env

PORT=4000
WEATHER_API_KEY=your_openweather_api_key
DB_USER=sa
DB_PASSWORD=YourPassword
DB_SERVER=localhost
DB_DATABASE=WeatherPro
DB_PORT=1433
MAIL_USER=your_email@example.com
MAIL_PASS=your_app_password

# Run backend
npm run dev

# Access in browser
http://localhost:4000

• Uses Leaflet.js for open-source map visualization.
• Dynamically adds markers showing temperature and weather icons.
• Clicking a marker displays detailed data for that location.

Example snippet (client/js/map.js):

const map = L.map('map').setView([24.8607, 67.0011], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

• Backend logs every search request in SQL Server.
• Cached weather results are stored in CityWeather table.
• Subscribers, BlogPosts, and Events tables handle user and content data.

• Admin can add new blog posts and upcoming weather events via the dashboard.
• Blog posts are dynamically fetched from the backend API.
• Events display with date, location, and description.

• Email subscription form with validation.

• Backend endpoint:

  POST /api/subscribe
  { "email": "user@example.com" }
  

• Data stored in Subscribers table and confirmation emails sent using Nodemailer.

• Optimized for all devices.
• Built using modern CSS Grid and Flexbox.
• Includes smooth animations, shadows, and transitions.

• Add 7-day forecast view.
• Add user authentication and profile system.
• Integrate Chart.js for temperature trend visualization.
• Add dark/light mode toggle.

This project is licensed under the MIT License — you are free to modify and use it.

Syed Muhammad Azan