Weather-App -> Weather Map Application

Project Description

Weather-App is a web application that displays real-time weather forecasts for cities on a map.
This project was completed as part of the final assignment 2026, using:

• React
• Redux Toolkit + Redux Observable (epics)
• React-Leaflet for the map
• styled-components for custom styling
• Weather API to fetch weather data

---

Features

1. Map with Weather Forecasts

   • Displays a marker for each city in the current map view.
   • Marker shows weather emoji and classification:
     • nice ☀️ (good weather: temperature 18–25°C, no rain)
     • passable ⛅ (one of the criteria met)
     • not nice 🌧️ (other cases)
   • Tooltip shows detailed weather info (temperature, description, classification).

2. Dynamic City Filtering

   • Autocomplete for city names (case-insensitive).
   • Population slider with current value and max population in view.
   • Filters work together and update results automatically.
   • In a very wide map view, only the largest cities are displayed (min population depends on zoom: 1,000,000 for far view, 500,000 for medium zoom).

3. Center Button

   • Button to center the map on the user's current location.

4. Dark/Light Mode Toggle

   • Custom styled component (ToggleButton) using styled-components.
   • Changes the appearance of panels, loading spinner, Leaflet zoom buttons, and Center Button.

5. Loading Spinner

   • Displayed at the top center of the map while loading data.
   • Colors adapt to dark/light mode.

6. Data Updates

   • City and weather data refresh automatically every hour.
   • Redux Observable epics debounce map events to avoid excessive data fetching.

---

Project Structure

src/
├─ components/
│ ├─ MapView.js # Map, markers, tooltips, minPopulation, spinner, CenterButton
│ ├─ FiltersPanel.js # Name filter + population slider, autocomplete
│ └─ CenterButton.js # Button to center the map
├─ redux/
│ ├─ citySlice.js # Redux slice for cities and filters
│ ├─ cityEpics.js # Redux Observable epics
│ └─ store.js # Redux store configuration
├─ styles/
│ └─ GlobalStyles.js # Global styles and theming
├─ App.js # Main component with ThemeProvider and ToggleButton
└─ index.js # Mounting the application

---

Installation and Running

1. Clone the repository

git clone <repo-url>
cd weather-app

2. Install dependencies

npm install

3. Create a .env file in the root directory

REACT_APP_WEATHER_API_KEY=your_weather_api_key_here

4. Start the development server

npm start

The application will open in your browser at: http://localhost:3000

---

How to Use

Toggle Dark/Light Mode

• Click the Dark Mode / Light Mode button in the top-right corner.

Filter Cities

• Type a city name in the Name input – autocomplete will suggest matches.

• Adjust the Population slider to limit visible cities by population.

• Filters work together, and results update automatically.

Center Map

• Click the Center button on the map to move to your current location.

View Weather Details

• Click a city marker to see weather details in a Tooltip.

• Emoji indicates the “niceness” of the weather (nice/passable/not nice).

Loading Data

The Loading... spinner appears at the top center while fetching data.

Data refreshes automatically every hour.

---

Custom Component

ToggleButton in App.js is a custom-styled component built from scratch using styled-components.

It fulfills the assignment requirement of having at least one custom component with custom styling (minimum 3 lines of CSS).

• Located in file App.js--> LINE 13-24

---

Author

Zuzanna Lubas - @z.lubas