Skip to content

Latest commit

 

History

History
119 lines (76 loc) · 3.59 KB

README.md

File metadata and controls

119 lines (76 loc) · 3.59 KB
Raw

Weather News

This Weather News app is a useful app which extracts data from the OpenWeather API and the map from Leaflet and react-leaflet. It is bootstrapped with React for Responsive and user-friendly UI.

Table of contents

Key Features

  • This website displays the Current weather and 6-day forecast which is recived from OpenWeather API.

  • It also equips a map which is built with the help of leaflet and react-leaflet.

  • Easy to use Website, the use of bootstrap made this website a lot more beautiful and responsive.

  • Its a single page site which gives a good user experience. I does not load the whole page instead just the new data is mounted on the same site.

  • A searchbar is there to load the information of any required city.

  • The geocode Rapid API provides the necessary longitudes and latitudes of any city that we search for.

My process

Built with

  • React
  • Bootstrap
  • React Query
  • React Router
  • React Hook Form
  • Styled Components
  • react-leaflet
  • leaflet
  • Openweather API
  • GeoCode Rapid API

What I Learned

  • React Fundamentals: I gained a solid understanding of React, including components, state management, and routing, allowing me to build dynamic user interfaces.

  • Responsive UI Design: Styled Components were used to create responsive and visually appealing user interfaces that adapt to various screen sizes.

  • Integrating with Map Leaflet provided a easy and flexible way to integrate a map through which this site is able to load different layers for the map.

  • Compound Component Pattern: I implemented the Compound Component Pattern to create cohesive and reusable component groups, improving the organization and maintainability of the code.

  • Working with APIs: I used two APIs in this project which gave me the exposure to the way of working of APIs

  • Git Version Control: I practiced effective version control using Git, allowing for code management, and tracking project changes.

  • Project Planning and Management: I gained experience in planning and managing a large-scale project, including feature development, bug fixing, and testing.

By building this Weather news app with these technologies and concepts, I've developed a comprehensive set of skills and knowledge that can be applied to future projects and real-world scenarios. This experience has not only expanded my technical expertise but also improved my problem-solving capabilities.

Installation

  • Clone this repo:
git clone https://github.com/HIMANSHU6001/WeatherApp.git
  • Install dependencies:
npm install
  • Build command:
npm run build
  • Live server:
npm run dev

Author

👤 Himanshu Kaushik

Feel free to contact me with any questions or feedback!