Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/princeinscripts/weather-app
Weather App: Seamlessly access real-time weather updates and forecasts with an intuitive interface and city search functionality.
https://github.com/princeinscripts/weather-app
api axios npm react react-icon react-loader-spinner react-router-dom
Last synced: 1 day ago
JSON representation
Weather App: Seamlessly access real-time weather updates and forecasts with an intuitive interface and city search functionality.
- Host: GitHub
- URL: https://github.com/princeinscripts/weather-app
- Owner: PrinceInScripts
- Created: 2024-01-22T00:53:51.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-26T14:25:11.000Z (10 months ago)
- Last Synced: 2024-01-27T06:43:26.054Z (10 months ago)
- Topics: api, axios, npm, react, react-icon, react-loader-spinner, react-router-dom
- Language: JavaScript
- Homepage: https://climatetrack.vercel.app/
- Size: 2.81 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Blogging WriteWave Web App
* [Configuration and Setup](#configuration-and-setup)
* [Key Features](#key-features)
* [Technologies used](#technologies-used)
- [App](#App)
- [Api](#api)
- [Database](#database)
* [📸 Screenshots](#screenshots)
## 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 ](https://www.npmjs.com/package/react) - JavaScript library that is used for building user interfaces specifically for single-page applications
- [React Hooks ](https://reactjs.org/docs/hooks-intro.html) - For managing and centralizing application state
- [react-router-dom](https://www.npmjs.com/package/react-router-dom) - To handle routing
- [axios](https://www.npmjs.com/package/axios) - For making Api calls
- [Tailwind CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - For User Interface
- [React icons](https://react-icons.github.io/react-icons/) -
Small library that helps you add icons to your react apps.
#### api
- [weather api ](https://www.weatherapi.com/) - 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 ](https://docs.locationiq.com/docs/introduction) - 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
