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.
-
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.
- React
- Bootstrap
- React Query
- React Router
- React Hook Form
- Styled Components
- react-leaflet
- leaflet
- Openweather API
- GeoCode Rapid API
-
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.
- 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👤 Himanshu Kaushik
- LinkedIn - @HIMANSHU6001
- Frontend Mentor - @HIMANSHU6001
- Github: @HIMANSHU6001
Feel free to contact me with any questions or feedback!