https://github.com/vaibhavgupta5/react-weather-app
Weather App - React
https://github.com/vaibhavgupta5/react-weather-app
reactjs tailwindcss
Last synced: 4 months ago
JSON representation
Weather App - React
- Host: GitHub
- URL: https://github.com/vaibhavgupta5/react-weather-app
- Owner: vaibhavgupta5
- Created: 2024-06-25T09:14:47.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-05T14:07:55.000Z (7 months ago)
- Last Synced: 2024-11-05T14:46:39.486Z (7 months ago)
- Topics: reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://react-weather-app-vaibhavgupta5.netlify.app/
- Size: 84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Weather App
An advance Weather App using ReactJS.
### Functionality Added ->
1) Check Current Temp, Max, Min, Humidity etc.
2) View Hourly and Weekly Temperature.
3) Add your favorite Cities in the Cities tab.
4) Easily switch between cities.
5) See weather info in graph format.
6) Make the app take your current location.
### What I learned ->
1) Working with multiple APIs simultaneously (Added 3 APIs, OpenWeatherMap, Opencagedata, Unsplash-Images).
2) How to efficiently use Redux-Toolkit (Store, Slices, Selector, Dispatch).
3) How to use the geolocation function to get the user's coordinates and address using API.
4) How to use Chart.Js to make graphs using custom data.
5) Worked first time with Tailwind CSS and learned how to add styling to components via pre-defined and custom classes.
6) Use the Router and change specific components on the path change, not all components.
7) How breaking things into different components helps in big projects.
8) Dealing with large data and using it throughout different components and APIs.
9) Design psychology.
### Languages Used ->
1) JavaScript
2) HTML
3) CSS
### Libraries/Frameworks Used ->
1) ReactJS
2) React Router
3) Redux-Toolkit
4) Tailwind CSS
5) ChartJS
Live Project Link -> https://react-weather-app-vaibhavgupta5.netlify.app/