Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mehmetbozkir/react_weather_app_2
A Weather App Via Api | Reactjs, ReactQuery ,Tailwindcss and Daisyui.
https://github.com/mehmetbozkir/react_weather_app_2
daisyui react reactjs reactquery reactweatherapp tailwind tailwindcss weather weather-api weather-app
Last synced: 11 days ago
JSON representation
A Weather App Via Api | Reactjs, ReactQuery ,Tailwindcss and Daisyui.
- Host: GitHub
- URL: https://github.com/mehmetbozkir/react_weather_app_2
- Owner: MehmetBozkir
- Created: 2024-02-18T12:33:32.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-22T06:41:40.000Z (9 months ago)
- Last Synced: 2024-10-12T12:46:51.227Z (25 days ago)
- Topics: daisyui, react, reactjs, reactquery, reactweatherapp, tailwind, tailwindcss, weather, weather-api, weather-app
- Language: JavaScript
- Homepage: https://react-weather-app-xx.netlify.app/
- Size: 848 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# React_Weather_App_2
A Weather App Via Api | Reactjs, ReactQuery ,Tailwindcss and Daisyui.
:wrench: Features
-----------------------
API testing via ReactQuery.
## 💬 First Project Differences/Advantages
First Project : https://github.com/MehmetBozkir/React_Weather_App.git
1\. React Query:
- React Query used instead of Axios:
- Reduced number of code lines.
- Eliminated the need for useEffect.
- Achieved a more readable code block.
2\. Key Generation:
- uuid-npm used instead of looping through the API:
- Simpler and more error-free key generation.
3\. User Experience:
- Loading screen added:
- Provides feedback to the user while data is loading.
- Improved user experience.
4\. Error Handling:
- Made it easier to incorporate error messages into the flow:
- Errors are displayed to the user more clearly.
5\. Performance:
- Reduced network traffic of the code:
- Data optimization achieved with fewer API requests.
- Performance increase achieved.
6\. API Call:
- API call assigned to a button instead of directly calling and loading it:
- API requests are made more controllable.
- Unnecessary API requests are prevented.
## :book: How to use
To clone and run this application, you'll need [Git](https://git-scm.com/downloads) and [ReactJS](https://reactjs.org/docs/getting-started.html) installed on your computer. From your command line:
```
# Clone this repository
$ git clone https://github.com/MehmetBozkir/React_Weather_App_2.git
# Go into the repository
$ cd React_Weather_App_2
# Install dependencies
$ npm install
# Run the app
$ npm run dev
```
## :link: Demo
- Click Here to see and play by yourself a demo of the game.
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh