Project Guide

Mentors

  • Vedant Anup Tarale
  • Mayur K Nair

Members

  • Kumaara Ganapathi
  • Anagha B
  • Gnaneshwar Kandula
  • Siddharth T R

Acknowledgements

Aim

The Weather App is a project aimed at incorporating fundamentals of Web Development technologies such as HTML,CSS,JS(AJAX), ReactJS and APIs to deliver a web application that fetches data from a weather related API and delivers it to the user in a presentable form. The aim is to develop a good UI for the weather app with possible inclusion of a statistics table. Doing so provides an interactive way to analyze data.

Introduction

The Application provides a user friendly interface to analyze weather data efficiently with the provision to filter the data according to various relevant parameters.

Technologies Used

React Eeact (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.

Tailwind CSS Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of “utility” CSS classes that can be used to style each element by mixing and matching.

Vite Vite is a local development server. It monitors files as they’re being edited and upon file save the web browser reloads the code being edited through a process called Hot Module Replacement (HMR) which works by just reloading the specific file being changed using ES6 modules (ESM) instead of recompiling the entire application.

Weather API Weather API is a free API which gives real time weather and geo-data via JSON/XML restful APIs enabling web developers to create website accessing weather data.

Chart JS Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter.

Project Tracking

Learning Phase

  • Learnt Basics of HTML,CSS,JS and React.
  • Learnt about AJAX and APIs using and how to call APIs to get weather data.
  • UI/UX enhancement using Tailwind CSS.

Components Implemented

  • The UI/UX designed using Tailwind CSS.
  • The Home Page designed

Components To be implemented

  • Inclusion of charts and graphs using chart.js
  • Blogs and Documentation to be added

Conclusion

  • The weather web app is an application that uses AJAX and Weather API to fetch geo data and real time weather and display it on an application which is easily understandable and user friendly. The UI/UX is developed using Tailwind CSS. The frontend is developed using React.

References

  1. https://openweathermap.org/guide
  2. https://www.weatherapi.com/
  3. https://www.w3schools.com/html/default.asp
  4. https://www.w3schools.com/css/default.asp
  5. https://www.w3schools.com/js/default.asp
  6. https://reactjs.org/docs/getting-started.html
  7. https://www.geeksforgeeks.org/rest-api-introduction/
  8. https://www.chartjs.org/docs/latest/