Weather App

A minimalist weather application built with Node.js and OpenWeatherMap API.

Features

• Current Weather Dashboard: Real-time weather data with temperature, wind, humidity, and visibility
• 7-Day Forecast: Weekly weather outlook with high/low temperatures
• Detailed Metrics: Comprehensive weather metrics including pressure, UV index, sunrise/sunset times
• Location Search: Search for any city worldwide
• Geolocation Support: Automatically detect your location
• Responsive Design: Works on desktop and mobile devices

Setup Instructions

1. Install Dependencies

npm install

2. Get OpenWeatherMap API Key

1. Go to OpenWeatherMap
2. Sign up for a free account
3. Generate an API key

3. Configure Environment Variables

Create a .env file in the root directory:

OPENWEATHER_API_KEY=your_api_key_here
PORT=3000

4. Run the Application

Development mode (with auto-restart):

npm run dev

Production mode:

npm start

5. Access the Application

Open your browser and navigate to:

http://localhost:3000

Project Structure

weather-app/
├── public/
│   ├── index.html          # Main dashboard
│   ├── forecast.html       # 7-day forecast page
│   ├── metrics.html        # Detailed metrics page
│   └── js/
│       ├── main.js         # Main dashboard logic
│       ├── forecast.js     # Forecast page logic
│       └── metrics.js      # Metrics page logic
├── server.js               # Express backend server
├── package.json
├── .env                    # Environment variables (create this)
└── README.md

API Endpoints

• GET /api/weather/current - Get current weather data
• GET /api/weather/forecast - Get 7-day forecast
• GET /api/weather/onecall - Get detailed metrics (requires lat/lon)
• GET /api/geocode - Convert city name to coordinates

Technologies Used

• Backend: Node.js, Express
• Frontend: Vanilla JavaScript, Tailwind CSS
• API: OpenWeatherMap API
• Fonts: Inter (Google Fonts)
• Icons: Material Symbols

Design Features

• Minimalist black and white aesthetic
• Inter font family with various weights
• Uppercase tracking for labels
• Smooth transitions and hover effects
• Mobile-responsive layout
• Clean borders and grid system

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT