Sabitlenmiş Tweet
I built a Weather Dashboard using Vue 3, Pinia, and Vite.
This project displays the current weather and a 5 day forecast for any city using the OpenWeatherMap API.
Explaining how it works,
Vue 3 is the frontend framework I used to build the framework. why did I use Vue? Well, instead of manually manipulating the DOM, that's changing HTML with Javascript, Vue lets me describe what the UI should look like based on data, and it handles the updates automatically, so when the weather data changes, Vue automatically updates the screen.
This project of mine is a Single Page Application which means the app loads once and updates content and this makes it faster and smoother than traditional multi page websites while Pinia handles state management so instead of passing weather data between components, all weather data lives in one central store so when the store updates, every component using that data updates automatically. This keeps my code cleaner, easier to debug & more scalable.
I made mention of Vite, Vite was used as the development server. Unlike older tools that bundle everything before running, Vite loads only what’s needed and uses native ES modules which leads to instant reloads and a much faster development experience.
In Summary, how the data flow works is, the user enters a city and clicks search then getWeather() runs in the Vue component while Pinia calls the OpenWeatherMap API using Fetch then the API returns real time data while Pinia updates its state then Vue’s reactivity system updates the UI automatically. Used Fetch API for HTTP requests because it’s lightweight and native to JavaScript so no extra libraries needed. I also added error handling so the app doesn’t crash if a city doesn’t exist like you can see in the video as I searched Wakanda and Asgard
This project started small but helped me understand component based UI design, State management, API integration and Reactive data flow.
I'm still learning, still building.
#Vue3 #Pinia #Frontend #BuildInPublic
English
