CHAPTER 1

INTRODUCTION
1.1 INTRODUCTION

Weather forecasting has become an important element of our everyday life. Technology
improvements have made it simpler to acquire real-time weather data and offer reliable weather
forecasts. In this project, we used API to create a weather forecasting application. Real-time
meteorological information for a given place is obtained by the programme via a REST API,
and it is then presented in an intuitive manner.
The user may enter their location to obtain weather information specific to that area. The Web's
architecture is described by the software architectural style known as "Representational State
Transfer" (REST). The following steps are included in the project: To get an API key, we first
decided on a weather API provider and registered for the API. To obtain current weather
information for a specified area, we performed API calls to the provider's REST API.

1.2 REACT
React is a popular open-source JavaScript library for building user interfaces, primarily for
single-page applications. Developed by Facebook (now Meta) and released in 2013, it is widely
used for building dynamic and interactive web applications. React focuses on the view layer in
the Model-View-Controller (MVC) architecture, enabling developers to create reusable UI
components.

CSE DEPT,GMIT DVG 1

1.3 PROBLEM STATEMENT
Design and develop a real-time weather application that provides accurate and up-to- date
weather information for any location using API integration. The app should offer an intuitive
interface, customizable features, and additional functionalities such as weather alerts, forecasts,
and localized updates. It must ensure high performance, reliability, and seamless data retrieval
from APIs.

CSE DEPT,GMIT DVG 2

1.4 OBJECTIVES
• Display current weather data (temperature, humidity, wind speed, etc.) for a specific
location.
• Offer short-term and long-term weather forecasts (e.g., hourly, daily, weekly).
• Use APIs to fetch weather data for the user’s current location
• Notify users about extreme weather conditions (e.g., storms, heatwaves).

• Use graphs, charts, and maps to present weather trends clearly.

• Optimize API calls for performance and minimize latency.

CSE DEPT,GMIT DVG 3

CHAPTER 2
REQUIREMENT SPECIFICATION
2.1 SOFTWARE REQUIREMENTS

OS : Windows 10
Front End : HTML5,CSS5,JavaScript
Software Requirements : JavaScript React
Programming Language : HTML,CSS, JavaScript
Database : MySQL

CSE DEPT,GMIT DVG 4

CHAPTER 3

DESIGNS

3.1 FLOWCHART

FIG 3.1 Building Application of weather app

CSE DEPT,GMIT DVG 5

3.2 Making a API Connection

API connection is the essential and core component of our GUI Application.
We have made the connection of the GUI with Open Weather API which provides us
the Real Time weather data of a specific city. The Search Bar of the application
accepts a city name of any part of the world and provides or displays the accurate
weather details of that specific location.

FIG 3.2: Weather Connecting to the API

CSE DEPT,GMIT DVG 6

 CHAPTER 4

IMPLEMENTATION CODE

Background layout

import React, { useEffect, useState } from

'react' import { useStateContext } from
'../Context'
import Clear from
'../assets/images/Clear.jpg' import Fog
from '../assets/images/fog.png' import
Cloudy from
'../assets/images/Cloudy.jpg' import
Rainy from '../assets/images/Rainy.jpg'
import Snow from
'../assets/images/snow.jpg' import
Stormy from
'../assets/images/Stormy.jpg' import
Sunny from
'../assets/images/Sunny.jpg'
const BackgroundLayout = () => {
const { weather } = useStateContext()
const [image, setImage] = useState(Clear)
useEffect(() => {
if (weather.conditions) {
let imageString = weather.conditions
if
(imageString.toLowerCase().includes('c
lear')) { setImage(Clear)
} else if (imageString.toLowerCase().includes('cloud')) {
setImage(Cloudy)
} else if (imageString.toLowerCase().includes('rain') ||
imageString.toLowerCase().includes('shower')) {
setImage(Rainy)
} else if (imageString.toLowerCase().includes('snow')) {
setImage(Snow)
} else if (imageString.toLowerCase().includes('fog')) {
setImage(Fog)
} else if (imageString.toLowerCase().includes('thunder') ||
imageString.toLowerCase().includes('storm')) {
setImage(Stormy) } } }
[weather])
return (<img src={image} alt="weather_image" className='h-screen w-full fixed
left-0 top-0 -z- [10]' />) }
export default backgroundLayout

CSE DEPT,GMIT DVG 7

Index
export {default as BackgroundLayout} from ‘,/Backgroundlayout
export {default as MiniCard} from './MiniCard'
export {default as WeatherCard} from './WeatherCard'

Weather card
import React, { useEffect, useState } from 'react'
import { useDate } from '../Utils/useDate'
import sun from '../assets/icons/sun.png'
import cloud from '../assets/icons/cloud.png'
import fog from '../assets/icons/fog.png'
import rain from '../assets/icons/rain.png'
import snow from '../assets/icons/snow.png'
import storm from '../assets/icons/storm.png'
import wind from '../assets/icons/windy.png'
import '../index.css'

const WeatherCard = ({ temperature, windspeed,

humidity,

place, heatIndex, iconString, conditions,

}) => {
const [icon, setIcon] = useState(sun) const { time } = useDate()
useEffect(() => { if (iconString) {
if (iconString.toLowerCase().includes('cloud')) { setIcon(cloud)
} else if (iconString.toLowerCase().includes('rain')) { setIcon(rain)
} else if (iconString.toLowerCase().includes('clear')) { setIcon(sun)
} else if (iconString.toLowerCase().includes('thunder')) { setIcon(storm)
} else if (iconString.toLowerCase().includes('fog')) { setIcon(fog)
} else if (iconString.toLowerCase().includes('snow')) { setIcon(snow)
} else if (iconString.toLowerCase().includes('wind')) { setIcon(wind)
}}
}, [iconString])

return (
<div className='w-[22rem] min-w-[22rem] h-[30rem] glassCard p-4'>

CSE DEPT,GMIT DVG 8

<div className='flex w-full just-center, items-center gap-4 mt-12 mb-4'>
<img src={icon} alt="weather_icon" />
<p className='font-bold text-5xl flex justify-center items-center' >{temperature}
&deg;C</p> </div>

<div className='font-bold text-center text-xl'> {place}

</div>
<div className='w-full flex justify-between items-center mt-4'>
<p className='flex-1 text-center p-2'>{new Date().toDateString()}</p>
<p className='flex-1 text-center p-2'>{time}</p>
</div>
<div className='w-full flex justify-between items-center mt-4 gap-4'>
<p className='flex-1 text-center p-2 font-bold bg-blue-600 shadow rounded-lg'>Wind Speed
<p className='font-normal'>{windspeed} km/h</p></p>

<p className='flex-1 text-center p-2 font-bold rounded-lg bg-green-600'>Humidity <p

className='font-normal'>{humidity} gm/m&#179;</p></p>
</div>
<div className='w-full p-3 mt-4 flex justify-between items-center'>
<p className='font-semibold text-lg'>Heat Index</p>
<p className='text-lg'>{heatIndex ? heatIndex : 'N/A'}</p>
</div>
<hr className='bg-slate-600' />
<div className='w-full p-4 flex justify-center items-center text-3xl font-semibold'>
{conditions} </div>
</div> )
}
export default WeatherCard

CSE DEPT,GMIT DVG 9

Minicard
import React, { useEffect, useState } from 'react' import sun from '../assets/icons/sun.png'
import cloud from '../assets/icons/cloud.png' import fog from '../assets/icons/fog.png'
import rain from '../assets/icons/rain.png' import snow from '../assets/icons/snow.png' import
storm from '../assets/icons/storm.png' import wind from '../assets/icons/windy.png'
const MiniCard = ({ time, temp, iconString }) => { const [icon, setIcon] = useState()
useEffect(() => { if (iconString) {
if (iconString.toLowerCase().includes('cloud')) { setIcon(cloud)
} else if (iconString.toLowerCase().includes('rain')) { setIcon(rain)
} else if (iconString.toLowerCase().includes('clear')) { setIcon(sun)
} else if (iconString.toLowerCase().includes('thunder')) { setIcon(storm)
} else if (iconString.toLowerCase().includes('fog')) { setIcon(fog)
} else if (iconString.toLowerCase().includes('snow')) { setIcon(snow)
} else if (iconString.toLowerCase().includes('wind')) { setIcon(wind)
}}
}, [iconString]) return (
<div className='glassCard w-[10rem] h-[10rem] p-4 flex flex-col'> <p className='text-
center'>
{new Date(time).toLocaleTimeString('en', { weekday: 'long' }).split(" ")[0]} </p>
<hr />
<div className='w-full flex justify-center items-center flex-1'>
<img src={icon} alt="forecast not available" className='w-[4rem] h-[4rem]' /> </div>
<p className='text-center font-bold'>{temp}&deg;C</p>
</div> )
}
export default MiniCard

CSE DEPT,GMIT DVG 10

CHAPTER 5
SNAPSHOTS

FIG 5.1: Home Page for Weather Application

FIG 5.2: Final view of weather application

CSE DEPT,GMIT DVG 11

CHAPTER 6
FUTURE ENHANCEMENT

A real-time weather app with APIs offers great potential for future
enhancements to deliver an even richer user experience. One potential improvement
is the integration of advanced AI algorithms for hyper-localized weather predictions,
allowing users to receive precise weather updates for their exact location.
Incorporating features like air quality monitoring, UV index alerts, and pollen count
information can cater to specific health-related needs. Future versions could also
include augmented reality (AR) capabilities to visualize weather changes in real time.
Furthermore, integrating voice assistants and wearable device support can make
accessing weather updates more convenient.
A social sharing feature, enabling users to share local weather updates and photos,
could foster a sense of community. These enhancements would not only make the app
more versatile but also position it as a comprehensive tool for weather-related
insights.

CSE DEPT,GMIT DVG 12

CHAPTER 7
CONCLUSION

Developing a real-time weather app using APIs demonstrates a strong understanding of modern
web technologies and the ability to integrate external data sources into functional applications.
By leveraging APIs, the app can provide users with up-to-date weather information, enhancing
its utility and user experience.
This project showcases proficiency in API handling, data parsing, and responsive design, while
also highlighting skills in problem-solving and implementing features like location-based
services.

CSE DEPT,GMIT DVG 13

CHAPTER 8
REFERENCES

1. Brastein, O.M., Perera, D.W.U., Pfeifer, C. and Skeie, N.O., 2018. Parameter estimation for
grey-box models of building thermal behaviour. Energy and Buildings, 169, pp.58-68.
2. Abrahamsen, Erik, Ole Magnus Brastein, and Bernt Lie. "Machine learning in python for
weather forecast based on freely available weather data." In Proceedings of the 59th
Conference on Simulation and Modelling (SIMS 59), 26-28 September 2018, Oslo
Metropolitan University, Norway, no. 153, pp. 169-176. Linköping University Electronic
Press, 2018.
3. S. Zhang, W. Wang, X. Gao, and C. Liu, "Design and implementation of weather forecasting
service based on RESTful web service," in 2013 IEEE 10th International Conference on
Ubiquitous Intelligence and Computing and 2013 IEEE 10th International Conference on
Autonomic and Trusted Computing (UIC/ATC), Vietri sul Mare, Italy, 2013, pp. 428-434.
4. Selvik, J. T., Bansal, S., & Abrahamsen, E. B. (2021). On the use of criteria based on the
SMART acronym to assess quality of performance indicators for safety management in process
industries. Journal of Loss Prevention in the Process Industries, 70, 104392.
5. Abrahamsen, E. B., Selvik, J. T., Dahle, A. N., Asche, F., & Abrahamsen, H. B. (2018). A
socioeconomic analysis of increased staffing in the Norwegian helicopter emergency medical
service. Scandinavian Journal of Trauma, Resuscitation and Emergency Medicine, 26, 1-9.
6. Chen, Rung-Ching, et al. "Selecting critical features for data classification based on machine
learning methods." Journal of Big Data 7.1 (2020): 52.
7. Liu, Lijuan, Rung-Ching Chen, and Shunzhi Zhu. "Impacts of weather on short-term metro
passenger flow forecasting using a deep LSTM neural network." Applied Sciences 10.8 (2020):
2962.

CSE DEPT,GMIT DVG 14