Weatherapp

There was a beautiful idea of building an app that would show the upcoming weather. The developers wrote a nice backend and a frontend following the latest principles and - to be honest - bells and whistles. However, the developers did not remember to add any information about the infrastructure or even setup instructions in the source code.

Luckily we now have docker compose saving us from installing the tools on our computer, and making sure the app looks (and is) the same in development and in production. All we need is someone to add the few missing files!

Prerequisites

• An openweathermap API key.

Returning your solution

Via github

• Make a copy of this repository in your own github account (do not fork unless you really want to be public).
• Create a personal repository in github.
• Make changes, commit them, and push them in your own repository.
• Send us the url where to find the code.

Via tar-package

• Clone this repository.
• Make changes and commit them.
• Create a .tgz -package including the .git-directory, but excluding the node_modules-directories.
• Send us the archive.

Exercises

Here are some things in different categories that you can do to make the app better. Before starting you need to get yourself an API key to make queries in the openweathermap. You can run the app locally using npm i && npm start.

Docker

Docker containers are central to any modern development initiative. By knowing how to set up your application into containers and make them interact with each other, you have learned a highly useful skill.

• Add Dockerfile's in the frontend and the backend directories to run them virtually on any environment having docker installed. It should work by saying e.g. docker build -t weatherapp_backend . && docker run --rm -i -p 9000:9000 --name weatherapp_backend -t weatherapp_backend. If it doesn't, remember to check your api key first.

• Add a docker-compose.yml -file connecting the frontend and the backend, enabling running the app in a connected set of containers.

• The developers are still keen to run the app and its pipeline on their own computers. Share the development files for the container by using volumes, and make sure the containers are started with a command enabling hot reload.

Node and React development

Node and React applications are highly popular technologies. Understanding them will give you an advantage in front- and back-end development projects.

• The application now only reports the current weather. It should probably report the forecast e.g. a few hours from now. (tip: openweathermap api)

• There are eslint errors. Sloppy coding it seems. Please help.

• The app currently reports the weather only for location defined in the backend. Shouldn't it check the browser location and use that as the reference for making a forecast? (tip: geolocation)

Testing

Test automation is key in developing good quality applications. Finding bugs in early stages of development is valuable in any software development project. With Robot Framework you can create integration tests that also serve as feature descriptions, making them exceptionally useful.

• Create automated tests for the application. (tip: mocha)

• Create Robot Framework integration tests. Hint: Start by creating a third container that gives expected weather data and direct the backend queries there by redefining the MAP_ENDPOINT.

Cloud

The biggest trend of recent times is developing, deploying and hosting your applications in cloud. Knowing cloud -related technologies is essential for modern IT specialists.

• Set up the weather service in a free cloud hosting service, e.g. Azure, AWS or Google Cloud.

Ansible

Automating deployment & provisioning processes saves a lot of valuable time, reduces chances of costly errors and allows easier collaboration.

• Write Ansible playbooks for installing docker and the app itself.

Terraform

Why not take it a step further and automate infrastructure set up in the cloud? Infrastructure as Code removes manual steps and allows people to concentrate on other activities.

• Write Terraform configuration files to set up infrastructure required to run the app in the cloud provider of your choice.

Documentation

Good documentation benefits everyone.

• Remember to update the README

• Use descriptive names and add comments in the code when necessary

ProTips

• When you are coding the application imagine that you are a freelancer developer developing an application for an important customer.

• The app must be ready to deploy and work flawlessly.

• The app must be easy to deploy to your local machine with and without Docker.

• Detailed instructions to run the app should be included in your forked version because a customer would expect detailed instructions also.

• Structure the code and project folder structure in a modular and logical fashion for extra points.

• Try to avoid any bugs or weirdness in the operating logic.

• Feel free to add would-be-nice-to-haves in the app / infra setup that you didn't have time to complete as possible further improvements in README.

Project 🌦️

This application shows upcoming weather forecasts.

Technologies 🛠️

This project was built using the following technologies:

• Node.js 📦
• Docker 🐳
• Docker Compose 🐳
• Terraform 🌍
• Azure ☁️

Prerequisites ✅

To run the project locally, you will need to have the following installed:

• Node.js and npm 📦
• Docker 🐳

To deploy the application to Azure, you will need:

• Azure CLI (az-cli) ☁️
• Terraform 🌍
• Docker 🐳 (for building Azure App Service images)

Run the application locally with Docker 🚀

1. Copy .env.example to .env and fill it with your OpenWeatherMap API key.
2. Start the app (frontend and backend) using Docker Compose with the command docker-compose up.
3. Alternatively, you can build and start the containers manually without Docker Compose using the following commands:

Frontend:

docker build -f Dockerfile.dev -t frontend .
docker run -p 8000:8000 frontend

Backend:

docker build -t backend .
docker run -e APPID='your-api-key' -p 9000:9000 backend

Remember to replace 'your-api-key' with your actual API key.

4. Open your browser and visit http://localhost:8000 to view the application. To see a response from the backend, visit http://localhost:9000/api/weather.

Run the application locally without Docker 🚀

1. Navigate to the frontend or backend directory and install the dependencies using npm install.
2. Export the API key for the backend using the command export APPID='your-api-key'.
3. Start the application using the command npm start.
4. Open your browser and visit http://localhost:8000 to view the application. To see a response from the backend, visit http://localhost:9000/api/weather.

Run the application in the Azure Cloud ☁️

1. Login to azure-cli with az login.
2. Run terraform init to initialize state and download the providers.
3. Remember to edit the terraform.tfvars with your desired region to deploy the app to and your openweathermap.com API key.
4. Run terraform plan -out plan and review the plan.
5. Apply the plan with terraform apply plan and answer yes to approve it.
6. You should get two outputs with addresses of frontend and backend.
7. Open your browser and visit https://weather-frontend-aleksandra.azurewebsites.net to view the application.

Embrace the Weather! ☀️🌧️🌈⛈️❄️🌤️🌩️🌦️

Feel free to explore the upcoming weather with this application and enjoy your day with a touch of technology and nature's beauty!