WeatherApp

WeatherApp es una aplicación React diseñada para consumir datos de una API de clima en tiempo real. Permite a los usuarios buscar el clima actual de cualquier ciudad y muestra información detallada como temperatura, humedad y velocidad del viento.

Objetivo

El objetivo de este proyecto es aprender a consumir APIs, manejar estado y efectos en React, optimizar el rendimiento, gestionar errores y aplicar buenas prácticas en el desarrollo de aplicaciones Cliente/Servidor.

Características Principales

1. Búsqueda de Clima por Ciudad:

   • Los usuarios pueden buscar el clima actual escribiendo el nombre de cualquier ciudad.
   • Muestra datos como:
     • Temperatura actual, mínima y máxima.
     • Sensación térmica.
     • Humedad.
     • Velocidad y dirección del viento.
     • Descripción del clima (despejado, nublado, lluvia, etc.).
     • Hora del amanecer y atardecer.

2. Consumo de API en React:

   • Uso de la API de OpenWeatherMap para obtener datos del clima.
   • Implementación utilizando Fetch API.

3. Gestión de Errores:

   • Manejo de errores cuando:
     • El usuario ingresa una ciudad inválida.
     • Hay problemas de red o de conexión con la API.
   • Mensajes de error claros y amigables.

4. Diseño Responsivo:

   • Uso de Bootstrap para una experiencia de usuario adaptativa.

5. Optimización del Código:

   • Uso de hooks como useState y useEffect para la gestión del estado y efectos secundarios.
   • Creación de hooks personalizados para separar la lógica de negocio de la UI.

Estructura del Proyecto

WeatherApp/
├── public/                     # Archivos públicos
├── src/                        # Código fuente
│   ├── components/             # Componentes reutilizables
│   │   ├── FormWeather.jsx     # Formulario para buscar el clima (nombre erróneo)
│   │   ├── InfoWeather.jsx     # Mostrar la información del clima (nombre erróneo)
│   │   ├── Error.jsx           # Componente para mostrar errores (nombre erróneo)
│   ├── hooks/                  # Hooks personalizados
│   │   ├── weatherApiHook.js   # Hook para consumir la API del clima (nombre erróneo)
│   ├── styles.css              # Estilos globales
│   ├── application.jsx         # Componente principal (nombre erróneo)
│   ├── main.jsx                # Punto de entrada de ReactDOM
├── .env                        # Variables de entorno para la API Key
├── package.json                # Configuración del proyecto y dependencias
├── vite.config.js              # Configuración de Vite
├── README.md                   # Documentación del proyecto

Cómo Ejecutar el Proyecto

Prerrequisitos

Antes de ejecutar el proyecto, asegúrate de tener instalado lo siguiente:

• Node.js (v16 o superior).
• npm.

Pasos para Configuración

1. Clonar el repositorio:

   git clone https://github.com/Veehto/weather-react-app.git
   cd weather-react-app

2. Instalar las dependencias:

   npm install

3. Configurar la API Key:

   • Regístrate en OpenWeatherMap y obtén tu API Key.
   • Crea un archivo .env en la raíz del proyecto con el siguiente contenido:

     VITE_WEATHER_API_KEY=tu_api_key_aqui
     

4. Ejecutar el servidor de desarrollo:

   npm run dev

   La aplicación estará disponible en http://localhost:5173.

Funcionamiento

Búsqueda de Clima

• Escribe el nombre de una ciudad en el campo de búsqueda y presiona el botón "Search".
• La app muestra:
  • Temperatura actual, mínima y máxima.
  • Descripción del clima y un ícono representativo.
  • Humedad, velocidad del viento y dirección.
  • Hora de amanecer y atardecer.

Gestión de Errores

• Si la ciudad no se encuentra, muestra un mensaje de error como "City not found".
• Maneja problemas de red o claves de API inválidas.

Datos Obtenidos de la API

1. Clima Básico:

   • Descripción (despejado, nublado, etc.).
   • Icono para representación gráfica.

2. Temperatura:

   • Actual, mínima, máxima, y sensación térmica.

3. Ambiente:

   • Humedad (%).
   • Presión atmosférica (hPa).

4. Viento:

   • Velocidad y dirección.

5. Horario Solar:

   • Hora del amanecer y atardecer.

Tecnologías Utilizadas

• React: Framework para construir interfaces de usuario.
• Vite: Herramienta para desarrollo rápido.
• Bootstrap: Framework CSS para diseño responsivo.
• Fetch API: Para consumir APIs.
• Hooks de React: useState, useEffect y hooks personalizados.

Notas de Seguridad

• La clave de API se almacena en variables de entorno (.env) para evitar exponerla en el código fuente.
• En entornos reales, las claves sensibles y validaciones deben manejarse del lado del servidor.

Autor

• Victor CS

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh