Forecast is a professional, responsive web application that delivers real-time weather data, including multi-day and hourly forecasts, for locations worldwide. It serves as a strong portfolio piece demonstrating expertise in secure full-stack architecture, complex API integration, and front-end state management using vanilla JavaScript.
- Frontend:
- HTML5: The core markup language used for the structure of the web page.
- CSS3: Custom styles for a dark theme and modal animations.
- JavaScript (ES6+): Powers all dynamic features, including API calls, DOM manipulation, and event handling.
- Tailwind CSS: A utility-first CSS framework for building custom, responsive designs quickly.
- APIs & Data:
- OpenWeatherMap API: The primary source for all Weather data.
- Development Tools:
- Visual Studio Code: The code editor used for development.
- Git: Version control system for tracking changes.
- Secure API Proxy: All API calls are routed through the Node.js server, ensuring the secret key is never exposed to the public internet or browser tools.
- Advanced Health Metrics: Features custom Air Quality Index (AQI) and UV Index (UVI) gauges with dynamic, color-coded status levels (Good, Moderate, Poor, etc.).
- Unit Toggle: Seamless client-side switch between Metric (°C, m/s) and Imperial (°F, mph) systems with instant data re-rendering.
- Detailed Forecasts: Displays current weather, a dynamic 48-Hour Hourly Forecast with Precipitation Probability (PoP) visualization, and a grouped 6-Day Daily Forecast.
- Custom Data Points: Calculates and displays technical metrics like Dew Point Estimate, Wind Gust Speed, and detailed local sunrise/sunset times.
- Autocomplete Search: Uses the OWM Geo API for fast, accurate city suggestions, ensuring users search using verified coordinates.
The application utilizes a server-side proxy to mitigate the risk of credential leakage, which is standard professional practice.
Mechanism
-
The sensitive key is stored on the hosting server as an environment variable (OWM_API_KEY).
-
The client-side JavaScript requests data from a relative path (e.g., /api/data/2.5/weather?...).
-
The Express server intercepts the /api/* request, programmatically attaches the secret key (appid=...) to the outgoing request to OpenWeatherMap, and returns the public response to the client.
-
This process ensures that no external party can ever scrape or steal the API key from the frontend code.
- The entire project (frontend and server) is deployed as a single Web Service on Render.
Steps to Replicate Deployment
-
Clone & Install: Clone the repository and run npm install.
-
Configuration: The project uses server.js, package.json, and the npm start command.
-
Secure Injection (PaaS): During deployment on Render, the developer must manually input the key in the dashboard settings:
-
Environment Variable Key: OWM_API_KEY
-
Environment Variable Value: [The 32-character secret key]
- Author Name: Thiruveedhula Lok Vinay
- GitHub: https://github.com/LokVinay [LINK]
- Portfolio/Website: https://lokvinay-portfolio.netlify.app/ [LINK]