WeatherApp

A full-stack weather search application built with Express.js, EJS, and the OpenWeather API. Search for real-time weather conditions or multi-day forecasts with customizable units, languages, and display options.

Features

• Real-time Weather Data: Fetch current weather conditions for any city worldwide
• 5-Day Forecast: Get a detailed 5-day weather outlook with daily breakdowns
• Customizable Units: Switch between Fahrenheit and Celsius
• Multiple Languages: Support for English and Spanish weather descriptions
• Beautiful UI: Modern glassmorphism design with responsive layout
• Error Handling: Graceful error messages for invalid cities or API issues
• Server-side Rendering: EJS templates for dynamic HTML generation

Tech Stack

• Backend: Node.js with Express.js v5.2.1
• Templating: EJS v3.1.10
• HTTP Client: Axios v1.13.2
• API: OpenWeather API (Current Weather & 5-Day Forecast endpoints)
• Environment: dotenv v17.2.3 for secure configuration
• Styling: Custom CSS with glassmorphism effects

Project Structure

weather-app/
├── server.js # Express server and route handlers
├── package.json # Project dependencies
├── package-lock.json # Locked dependency versions
├── .gitignore # Git ignore rules
├── public/
│ └── styles.css # Global styles and responsive design
└── views/
├── index.ejs # Homepage with search form
└── results.ejs # Results page for weather display

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• OpenWeather API key (free tier available)

Setup Steps

1. Clone or download the project

   cd weather-app

2. Install dependencies

   npm install

3. Create environment file

   touch .env

4. Add your API key to .env

   OPENWEATHER_API_KEY=your_api_key_here
   

   Get a free API key from OpenWeatherMap

5. Start the server

   node server.js

6. Access the application Open your browser and navigate to http://localhost:3000

Usage

Homepage

1. Enter a city name (required field)
2. Select your preferences:
   • Units: Fahrenheit (F) or Celsius (C)
   • Language: English or Spanish
   • Type: Today only or 5-day forecast
3. Click "Get Weather" to fetch results

Results Page

• View real-time weather data with temperature, conditions, humidity, and wind speed
• Weather icons provide visual representation of conditions
• For 5-day forecasts, each day displays individual cards with all metrics
• Search form remains available for quick adjustments
• All filters are preserved from your previous search
• Click "Back to Home" to return and start a new search

API Integration

Endpoints Used

Current Weather (Today Only)

• Endpoint: https://api.openweathermap.org/data/2.5/weather
• Documentation: OpenWeather Current Weather API
• Parameters:
  • q: City name
  • units: imperial (F) or metric (C)
  • lang: Language code (en, es)
  • appid: API key

5-Day Forecast

• Endpoint: https://api.openweathermap.org/data/2.5/forecast
• Documentation: OpenWeather 5-Day Forecast API
• Parameters: Same as current weather endpoint

Response Handling

The server processes API responses to extract:

• City name and coordinates
• Current temperature and "feels like" value
• Weather condition description
• Weather icons (from OpenWeather CDN)
• Humidity percentage
• Wind speed and direction
• Timestamp data for forecasts

Error handling includes:

• 404 errors: City not found
• Missing API key: Configuration error message
• Network failures: Generic error message
• Empty input: Validation message

Routes

GET /

Renders the homepage with the weather search form.

Response: views/index.ejs

GET /search

Processes weather search requests with query parameters.

Query Parameters:

• city (string, required): City name to search
• units (string, default: imperial): imperial or metric
• lang (string, default: en): en or es
• type (string, default: today): today or 5day

Response: views/results.ejs with weather data or error message

Example:

GET /search?city=New%20York&units=metric&lang=en&type=today

Environment Variables

Create a .env file in the project root:

OPENWEATHER_API_KEY=your_api_key_here

Important: Never commit .env to version control. The .gitignore file already includes this protection.

Design Details

Color Scheme

• Primary Background: Dark blue (#0b1220)
• Primary Accent: Blue (#60a5fa)
• Secondary Accent: Purple (#a78bfa)
• Text: High contrast white with varying opacity
• Danger: Red tint (#fca5a5) for errors

Responsive Design

• Mobile-first approach: Single-column layout on screens below 520px
• Tablet & Desktop: Multi-column grid layouts
• Touch-friendly: Adequate padding and spacing
• Readable typography: System fonts with generous sizing

Visual Effects

• Glassmorphism with backdrop blur effects
• Radial gradient background
• Smooth transitions and hover states
• Box shadows for depth perception

Example Cities to Try

• New York
• London
• Tokyo
• Miami
• Madrid
• San Francisco
• Sydney
• Dubai

Error Messages

Error	Cause	Solution
"Please enter a city name."	Empty city field	Enter a valid city name
"City not found. Please check spelling and try again."	City doesn't exist	Verify spelling or try another city
"Missing API key. Check your .env OPENWEATHER_API_KEY."	No API key configured	Add valid API key to .env
"Error fetching weather data. Please try again."	Network or API issue	Check connection and API status

Performance Considerations

• Server-side rendering reduces client-side computation
• Axios handles HTTP requests efficiently
• API responses are cached at the application level (no persistent cache)
• Images loaded from OpenWeather CDN with caching headers
• CSS minification opportunity for production

Future Enhancements

• Add location autocomplete for city input
• Implement persistent search history
• Add hourly weather breakdown
• Include air quality and UV index data
• Support for geographic coordinates (latitude/longitude)
• Dark/light theme toggle
• Multi-city comparison
• Weather alerts and notifications
• Offline support with service workers

Troubleshooting

Server won't start

• Ensure Node.js is installed: node --version
• Check port 3000 is available: netstat -an | grep 3000
• Verify all dependencies: npm install

API key errors

• Confirm .env file exists in project root
• Ensure OPENWEATHER_API_KEY= is set correctly
• API key must be valid and from OpenWeatherMap
• Check API key quota hasn't been exceeded

No results displayed

• Verify city name spelling
• Try a major city (New York, London, etc.)
• Check OpenWeather API status page
• Ensure internet connection is stable

Styling issues

• Clear browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
• Verify public/styles.css is being served
• Check browser console for 404 errors
• Ensure CSS is not blocked by browser extensions

License

ISC

Support

For issues with the OpenWeather API, visit their documentation or support page.

For application issues, review the error messages and troubleshooting section above.

---

Version: 1.0.0
Last Updated: December 2025