Weather App

---

Weather App is a React + Node.js application I made to learn new technologies, and of course, for fun. I think that getting your hands dirty is the quickest way to learn new things.

The website is basically an interactive map that shows the current weather of a selected place. Behind the scenes, it takes the coordinates (longitude and latitude) of the location and sends them to an external API to get the data.

View a live version of the website here.

What is included in this application?

• Monorepo with both frontend and backend projects.
• All code strongly-typed with Typescript.
• Frontend built with React.
  • Bootstraped using Create React App.
  • Material-UI and CSS-in-JS to style the components.
  • Fetch data using React Query.
• Backend built with Node.js and Express.
  • Hot-reload with Nodemon.
  • Cache layer using Redis.
  • Request validations using joi.
• Good and clean code practices using ESLint (based on Airbnb configuration), Prettier and EditorConfig.
• Both backend and frontend dockerized, and docker-compose to quickly mount the environment.
• Continuous integration and deployment with GitHub Actions.
  • Run unit tests on every push using Jest and Testing Library.
  • Auto-deploy when pushing to master.

External resources

This app uses two external resources to work properly:

• Leaflet: an open-source library to display interactive maps.
• OpenWeather: provides APIs to get weather forecasts.

Backend endpoints

The backend includes the following endpoints:

Endpoint	Method	Description
/api/weather	GET	Gets the weather given a coordinate
/api/health	GET	Gets the health information of the backend

Getting started

Prerequisites

You need to have installed the following:

• Git
• Node.js
• Docker (only needed if you want to run the containers)

Installing

There's two ways to install and run the project:

• Manually: this option requires more manual steps (install dependencies, install and configure Redis, set environment variables, etc) and so it's not advisable to do it this way.
• Using Docker: this is the recommended option as it's by far the easiest and quickest way to get the project running. The installation will focus on this option.

Clone the repository:

git clone https://github.com/cristian-azocar/weather-app.git

Install the dependencies:

cd weather-app
npm install --prefix backend
npm install --prefix frontend

Configure the OpenWeather API key by creating a file called .env at the root of the backend folder with the following content:

WEATHER_API_KEY=(your api key goes here)

Run the application using Docker Compose:

docker-compose up

Note: if you want to run the containers in the background, use the -d flag (e.g. docker-compose up -d).

Continuous integration and deployment with GitHub Actions

The project is configured to use GitHub Actions as a CI/CD service. The files located in .github/workflows instructs GitHub to execute two actions:

• Run unit tests on every push, so that way we ensure that all the pushed code is stable and bug-free (or as bug-free as possible). The repository is also configured to prevent merging a pull request if the tests hasn't passed.
• Auto-deploy on every push to master, either by directly pushing to the branch or by merging a pull request.

The application is deployed in two platforms: GitHub Pages for the frontend, and Heroku for the backend.