Skip to content

Weather App: Seamlessly access real-time weather updates and forecasts with an intuitive interface and city search functionality.

Notifications You must be signed in to change notification settings

PrinceInScripts/Weather-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 

Repository files navigation

A Blogging WriteWave Web App

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

  • Open the project in your prefered code editor.
  • Go to terminal -> New terminal (If you are using VS code)
  • Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)

In the first terminal

$ cd App
$ npm install (to install frontend-side dependencies)
$ npm run  start (to start the frontend)

Key Features

  • Users can search for weather information in different cities.
  • Provides real-time data on the current weather conditions.
  • Displays an hourly forecast to show how weather conditions will change throughout the day.
  • Offers a daily forecast to provide insights into weather expectations for an extended period.
  • Includes location details such as city name and region.
  • Shows the last updated timestamp for the weather information.
  • Utilizes weather icons to visually represent different weather conditions.
  • Presents current temperature and feels-like temperature.
  • Provides sunrise and sunset times for the day.
  • Ensures a responsive design for a seamless user experience across various devices.
  • Switches between day and night background images based on the time of day.
  • Develops a user-friendly interface with intuitive navigation and clear presentation of weather data.
  • Includes loading spinners and indicators to provide visual feedback during data fetching.

Technologies used

This project was created using the following technologies.

App

  • React js - JavaScript library that is used for building user interfaces specifically for single-page applications
  • React Hooks - For managing and centralizing application state
  • react-router-dom - To handle routing
  • axios - For making Api calls
  • Tailwind CSS - For User Interface
  • React icons - Small library that helps you add icons to your react apps.

api

  • weather api - A comprehensive weather API that offers real-time weather data, including current conditions, hourly and daily forecasts. Users can search for weather information in specific cities, and the API provides essential details such as temperature, humidity, wind speed, UV index, and more.
  • locationiQ api - A powerful geocoding and location-based services API. It goes beyond weather data, providing rich information about locations, addresses, and geographical coordinates. Developers can leverage this API to enhance their applications with accurate location intelligence, making it a valuable tool for various location-based functionalities.

Screenshots

1 2 3 4 5 6 7 8 9 10 11 12

About

Weather App: Seamlessly access real-time weather updates and forecasts with an intuitive interface and city search functionality.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published