Weather App is a user-friendly and versatile weather application designed to provide accurate weather information to users in a simple and easy-to-understand format. Whether you're a weather enthusiast, planning outdoor activities, or just want to stay informed about the current weather conditions, Weather App has got you covered.
- The JavaScript library used is React.js supported by the framework Next.js
- The component library is called Headless UI
- The CSS library used is Tailwind CSS
- Charts were made using Charts.js
- Icons were created by Petai Jantrapoon, and supplemented by Cerbu Ionut
- The Progressive Web App (PWA) was created with Next-PWA
- API data is fetched using SWR
- The weather information is fetched from the Open-Meteo API.
- The city names are retrieved using the Open Weather Map API.
To properly run the application on Safari, you need to grant location access from the settings.
- Go to "Settings"
- Tap on "Privacy & Security"
- Select "Location Services"
- Look for "Safari Websites"
- Under "Allow Location Access" section, choose "While Using the App"
- Go to "Settings"
- Click on "Privacy & Security"
- Select "Location Services"
- Look for "Safari" and enable location access.
- Clone the Project
git clone https://github.com/rsh1337/weather-app- Install NPM Packages
npm install- Create a .env file in the root folder of the project and add the Open Weather Map API key
OPENWEATHERKEY="KEY"
- Build the Project
npm run build- Start the Project
npm run start- Access the website
http://localhost:3007
Access https://weather.rares-andrei.me
If we accept the location access, we will receive information and details about our current location.
- The maximum and minimum temperature of the day
- The current temperature and an icon indicating the weather conditions (clear, rainy, etc.)
- The temperature throughout the day, divided by hour, with temperature and weather icon
- Weather forecast for the next 7 days, including maximum and minimum temperature, as well as an icon indicating the weather conditions
- 8 boxes containing information about: sunrise time, humidity, wind speed, UV rays, precipitation, feels-like temperature, cloud coverage percentage, and visibility, all for the current moment
In this section, we receive information about each day individually, such as:
- Sunrise time for that day
- Amount of precipitation in millimeters
- Wind speed
- UV rays
- Chance of precipitation
- Minimum temperature, which will be felt on that day
In 4 out of the 8 boxes, specifically in the boxes about humidity, precipitation, feels like temperature, and cloud cover, we find a chart with information for the current day (24 hours).
In the sidebar, we can search for other cities, and here the saved city information will be stored, such as:
- current temperature
- maximum temperature
- minimum temperature
We can also access the saved cities in the sidebar with just one click on them.
On this page, we have all the information that we have on the homepage, with the addition of a star in the top right corner. The star is filled when the city is saved, and only the outline when the city is not saved.
All the features mentioned above are also available on mobile devices.
