Forecast

About | Features | Technologies | Requirements | Starting | License | Author

🎯 About

The site is an educational project. It includes the current weather display, hourly forecast for 3 days, a page with weather news and more. There is an authentication system, several roles. For certain roles, a CRUD table for managing posts is implemented. Firebase was used in the project.

✨ Features

✔️ Authentication via email and password;
✔️ Light and dark themes;
✔️ Division of access rights: guest, user, moderator, administrator;
✔️ Weather display animations;
✔️ Dynamic breadcrumbs;
✔️ Different types of graphs, dynamic data change for them;
✔️ Post card styling: dynamic background color definition based on priority image colors and text color on this background;
✔️ Post rating system;
✔️ CRUD table for managing posts, filters and sorting, ability to reset filters and export posts;
✔️ Uploading images for posts and user profile;
✔️ Validation;
✔️ Text editor for writing text for posts;
✔️ Choose background and text colors in the editor;
✔️ View images in their original size, ability to interact with them;
✔️ Editing user information;
✔️ Getting weather for the entered city;
✔️ UI component for displaying the position of the sun in the sky;
✔️ Selecting units of measurement;
✔️ Selecting a data set for a table;
✔️ Autocomplete for city search;
✔️ Adding a default city;
✔️ Ability to swap cards on the main page;
✔️ Adaptive;
✔️ Internationalization.

🚀 Technologies

The following tools were used in this project:

• Vue
• Firebase
• CASL
• VueUse
• Chart.js
• Pinia
• Vite
• PrimeVue
• VeeValidate
• VueTelInput
• Yup
• Pickr
• Quill
• Animejs
• Astronomia
• Axios
• Lodash.debounce
• Rgbaster
• Uuid
• Vue-country-flag
• Vue-resize
• Vue-router
• Vue I18n
• Swapy

✅ Requirements

Before starting 🏁, you need to have Git and Node installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/matmon12/forecast
# Access
$ cd forecast
# Install dependencies
$ npm install
# Run the project
$ npm run dev
# Compiles and minifies for production
$ npm run build

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Matmon

Back to top