Weather Application

A full-stack weather tracking application that allows users to monitor weather conditions for multiple cities. The project uses React for the frontend, Node.js + Express for the backend, and MongoDB for data storage. Weather data is obtained from the OpenWeatherMap API.

Note: This README has been cleaned up to remove duplicated, inconsistent, or inaccurate information.

Features

• Track multiple cities and view current weather for each
• Add cities by name
• Remove cities from the tracking list
• Hourly scheduled updates for tracked cities (via a cron job)
• City detail view with extended weather information
• Responsive UI (desktop, tablet, mobile)
• Basic error handling and loading states

For each city the app stores and/or displays:

• City name and country
• Current temperature (Celsius)
• Weather condition (Clear, Clouds, Rain, etc.)
• Weather icon
• Humidity (%)
• Wind speed (m/s)
• Sunrise and sunset times
• Timestamp of last update

Tech Stack

Frontend

• React 18
• React Router DOM
• CSS for styling (or a CSS-in-JS solution if implemented)

Backend

• Node.js
• Express.js
• Mongoose (for MongoDB interaction)
• node-cron (optional — for scheduled hourly updates)

Database

• MongoDB (Atlas or self-hosted)

External APIs

• OpenWeatherMap API (current weather data)

Prerequisites

• Node.js (v18 or higher recommended)
• npm (v8 or higher)
• MongoDB Atlas account or access to a MongoDB instance
• OpenWeatherMap API Key (create one at https://openweathermap.org/api)

Installation & Setup

1. Clone the repository:

git clone https://github.com/aloukikjoshi/weather_application.git
cd weather_application

2. Backend setup:

cd backend
npm install

Create a file backend/.env with the following variables:

MONGO_URI=your_mongodb_connection_string
WEATHER_API_KEY=your_openweather_api_key
PORT=5000

3. Frontend setup:

cd ../frontend
npm install

Create a file frontend/.env with the following variable:

REACT_APP_API_BASE=http://localhost:5000

Adjust the API base URL if your backend is hosted elsewhere.

Running the application (development)

Open two terminals.

Terminal 1 — Backend:

cd backend
node server.js

By default the backend should listen on the port set in backend/.env (e.g., http://localhost:5000).

Terminal 2 — Frontend:

cd frontend
npm start

By default the frontend runs on http://localhost:3000.

API Endpoints (examples)

Cities

• GET /api/cities — Get all tracked cities
• POST /api/cities — Add a new city
  • Body: { "name": "London" }
• DELETE /api/cities/:id — Remove a tracked city

Weather

• GET /api/weather/:city — Get current weather for a city (may be used by frontend or for debugging)

Example cURL requests:

# Add a city
curl -X POST http://localhost:5000/api/cities \
  -H "Content-Type: application/json" \
  -d '{"name": "London"}'

# Get all cities
curl http://localhost:5000/api/cities

# Get weather for a city
curl http://localhost:5000/api/weather/London

Scheduled Updates

The backend may include a scheduled job (using node-cron or similar) to refresh weather data for all tracked cities on a fixed schedule (for example, hourly). If enabled, ensure that:

• The cron schedule is implemented in the backend code.
• You are mindful of OpenWeatherMap API rate limits when choosing the cadence.

Testing

• Test backend endpoints with curl, Postman, or similar tools.
• Test frontend interactions by running the app and performing add/remove operations and viewing details.

Troubleshooting

• Weather data not updating:

  • Verify the OpenWeatherMap API key in backend/.env.
  • Check backend logs for errors.
  • Ensure scheduled jobs are running (if applicable).
  • Check API quota limits on OpenWeatherMap.

• Connection issues:

  • Verify the MongoDB connection string in backend/.env.
  • Ensure your IP is allowed (if using MongoDB Atlas) or the database is reachable.
  • Confirm the backend and frontend are running and REACT_APP_API_BASE matches the backend address.

• CORS errors:

  • Ensure the backend has CORS enabled and is configured to accept requests from your frontend origin.

Notes and disclaimers

• This README describes typical features and setup for this repository at the commit referenced. If the project code differs (e.g., different filenames, alternative ports, or different environment variable names), please consult the source files in backend/ and frontend/ for exact details and update .env values accordingly.
• OpenWeatherMap free-tier rate limits may apply; avoid aggressive polling without appropriate API plan.

Screenshots

Home Page

City Details Page

Mobile View

---

Built with React, Node.js, and MongoDB.