⛅ Weather App

A simple client for OpenWeatherMap API made with Vue.js.

🔧 Usage

🐋 In Docker

The application has a dockerized, portable dev environment, to run the code on your machine all you need is to have Docker installed. Docker setup is mostly based on this article.

run

make build-dev

to create the development image. This command should create an image called vue-weather-app:dev on your system.

now you can run it with

make run-dev

The app should be available on http://localhost:3000/ in your browser. Code changes should reflect immediately thanks to the Hot Module Reload (HMR) feature of Vite.

If you wish to run the app on a different port, then you can do so by passing the PORT environment variable to the make command, like so:

make run-dev PORT=5050

Now the app should be available on http://localhost:5050

To tear down the dev environment, just exit the task running in your terminal (Ctrl + C) or find the container for the app (run docker ps), then look for the container in the list which is based on the vue-weather-app image) and stop the container (docker stop <ID|NAME>)

💻 Running it directly on your computer

Install dependencies

npm install

To run the app in development mode

npm run dev

To build it and start the dev-server in preview mode

npm run build && npm run serve

🏗️ Project setup

The project was scaffolded with Vite's CLI, with the Vue.js template.

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue

We've manually reverted Vue.js's version to 2.6.14 and adjusted the devDependencies accordingly (switched vite-plugin-vue to vite-plugin-vue2 and adjusted vite.config.js accordingly).

@vitejs/plugin-legacy was added and configured to support IE11 and up (see vite.config.js).

📜 Conventions

We use the recommended coding conventions of Vue.js and setup ESLint via eslint-plugin-vue. You can run the linter manually via NPM-scripts with

npm run lint

This will also fix whatever error / warning can be autofixed by ESLint. Currently, we use the settings plugin:vue/recommended, for full list of rules see here.

General file-formatting rules are set up via EditorConfig, see .editorconfig for details.

✍️ File naming

Files and folders should generally be named in kebab-case. Exceptions are *.vue files and *.js files that export a single class, in these cases use PascalCase.

🧪 Testing

Unit testing is set up using Jest as test runner and Vue Testing Library. Test can be run with

npm run test

To generate coverage report, run

npm run coverage

🏛️ Architecture

The architecture mostly follows the convention for Elegant Frontend Architecture by Michal Zalecki.

🥞 Tech stack

• Framework: Vue.js (V3)
• UI library: bootstrap-vue-3
• Build-tool and development environment: Vite

🚢 Deployment

The app is currently deployed to GitHub Pages, using automated GitHub actions (see ~/.github/workflows/main.yml).

✅ TODOs and further ideas

• Add auto-suggest for cities
• Switch icons: https://coreui.io/vue/docs/components/icon.html
• Remove the bubble event implementation