Welcome to the Weather Tracker App, your ultimate solution for staying informed about weather conditions in different cities, whether it's for today or the upcoming week. With automatic city detection by IP, intuitive city card management, and interactive weather charts, tracking the weather has never been this easy and enjoyable.
Check out the Live Demo to see current weather in your city!
-
🌍 City-Centric Weather Tracking: Keep tabs on the weather in various cities around the world.
-
📍 Automatic Location Detection: The app seamlessly identifies your current city based on your IP address, ensuring you're always up-to-date with local weather.
-
❤️ Favourites: Personalize your experience by adding cities to your Favourites for quick access.
-
📈 Interactive Weather Charts: Visualize weather data using interactive charts powered by Chart.js.
This Weather Tracker App leverages the power of modern technologies and libraries to provide a smooth and delightful user experience:
-
axios (v1.4.0): Effortlessly fetches weather data from external sources via HTTP requests.
-
chart.js (v4.3.0): Creates captivating and interactive weather charts for data visualization.
-
sass (v1.63.6): Enhances the app's visual appeal and styling for a sleek design.
-
uuid (v9.0.0): Generates unique identifiers to ensure accurate city data management.
-
vue (v3.3.4): Empowers the app with reactivity and user-friendliness through Vue.js.
-
vue-chartjs (v5.2.0): Integrates Chart.js with Vue.js to facilitate the use of interactive charts.
-
vue-router (v4.2.4): Enables seamless client-side routing and navigation between different views and cities.
-
vue-sweetalert2 (v5.0.5): Enhances user experience with intuitive and customizable alert dialogs.
-
@vitejs/plugin-vue (v4.2.3): Optimizes development and building processes within the Vue.js ecosystem.
-
eslint (v8.45.0): Ensures code quality and adherence to best practices through code linting.
-
eslint-plugin-vue (v9.15.1): Enforces Vue-specific ESLint rules for clean and consistent code.
-
vite (v4.3.9): Accelerates development and ensures optimal performance as the build tool of choice.
- Clone this repository.
- Run
npm installto install dependencies. - Start the development server with
npm run dev. - Open your browser and navigate to
http://localhost:3000. - Begin tracking your finances with ease!
Contributions, issues, and feedback are more than welcome! Feel free to contribute or report issues in the Issues section!
Let's make our weather plan together! 🌤️
Designed and developed with ❤️ by Kolya Movchan.
Connect with me on LinkedIn