Weather App

A production-ready, beautiful weather web app built with Angular 18, designed for clarity and ease of use. It shows current weather and a 7-day forecast for any city worldwide. Data is powered by the free Open-Meteo API (no API key required).

Features

• Search — Find any city with autocomplete suggestions
• Current weather — Temperature, conditions, humidity, wind, pressure
• 7-day forecast — Daily high/low and conditions
• Responsive UI — Works on mobile and desktop
• No API key — Uses Open-Meteo (free, no sign-up for non-commercial use)
• Deploy on Firebase — One-command deploy to Firebase Hosting

Design → Development → Deployment

1. Design — Layout and UX follow a clear hierarchy: search → current conditions → forecast. The UI uses a dark, sky-inspired gradient, glass-style cards, and the Outfit font for a modern look. You can replicate or extend the design in Adobe XD using the same structure and colors.
2. Development — Angular 18 standalone components, signals, and reactive patterns. SCSS for styling.
3. Deployment — Build and deploy to Firebase Hosting (see below).

Quick start

Prerequisites

• Node.js 18+
• npm or yarn

Install and run

# Install dependencies
npm install

# Start dev server at http://localhost:4200
npm start

Build for production

npm run build

Output is in dist/weather-app/browser/.

Deploy to Firebase

1. Install Firebase CLI (if needed):

   npm install -g firebase-tools

2. Log in and create a project:

   firebase login
   firebase projects:create

3. Set your project in .firebaserc:

   • Replace your-firebase-project-id with your actual Firebase project ID.

4. Build and deploy:

   npm run build
   firebase deploy

Your app will be live at https://<your-project-id>.web.app.

Push to GitHub

The repo is ready to push to your GitHub profile:

git init
git add .
git commit -m "Initial commit: Angular weather app with Firebase deployment"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/weather-app.git
git push -u origin main

Replace YOUR_USERNAME with your GitHub username. If the repo already exists on GitHub, create it first (e.g. weather-app), then run the commands above.

Tech stack

• Angular 18 — Standalone components, signals, control flow
• Open-Meteo API — Geocoding + weather forecast (no API key)
• SCSS — Theming and layout
• Firebase Hosting — Static hosting and SPA rewrites

Project structure

src/app/
├── components/       # Search bar, current weather, forecast list
├── pages/            # Dashboard (main view)
├── services/         # Weather service (API + state)
├── models/           # TypeScript interfaces
└── utils/            # Weather code labels and helpers

License

MIT.