Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jantoniogc/CursoReact-Clima/llms.txt

Use this file to discover all available pages before exploring further.

Clima React App is a single-page React application that lets you look up the current weather for any city in seven Spanish-speaking countries. Enter a city name, choose a country, and the app fetches live data from the OpenWeatherMap API to display the current temperature alongside the day’s high and low — all converted from Kelvin to Celsius.

Quickstart

Clone the repo, add your API key, and have the app running in under five minutes.

Architecture overview

Understand how the four React components interact and how data flows through the app.

Component reference

Explore the props, responsibilities, and PropTypes for every component.

API setup

Get an OpenWeatherMap API key and configure the app to use it.

​
What the app does

Clima React App queries the OpenWeatherMap Current Weather endpoint with a city name and country code. The response is parsed to extract three temperature values — current, maximum, and minimum — which are displayed in a responsive two-column layout alongside a search form.
1

Enter a city

Type any city name into the search field. The field accepts free-text input.
2

Select a country

Choose one of the seven supported countries from the dropdown: US, MX, AR, CO, CR, ES, or PE.
3

Submit the form

Click Buscar Cllima (the submit button label in the app). The app validates both fields are filled in, then calls the OpenWeatherMap API.
4

View the weather

Current temperature, maximum, and minimum are displayed in Celsius on the right panel. If the city is not found, an error message appears instead.

​
Key features

  • Live weather data — Calls api.openweathermap.org/data/2.5/weather on every search
  • Celsius conversion — Automatically subtracts 273.15 K from all temperature values
  • Form validation — Prevents empty submissions and shows inline error messages
  • Error handling — Detects API 404 responses and surfaces a clear error message
  • Responsive layout — Uses Materialize CSS grid to stack on mobile and show side-by-side on larger screens
  • React hooks — State management via useState and side effects via useEffect

Build docs developers (and LLMs) love

Get started for freeTalk to us