reactjs, typescript, styled-components, eslint, prettier

Weather Forecast

Global weather forecast with temperature, humidity, heat sensation for the next 6 hours.

June 01, 2020

Weather Forecast

Project Name: Wheater Forecast


  • In the root directory (/weather-forecast) of the project, install all the necessary libraries for development with the command:
  yarn install
  • In the root directory (/weather-forecast) of the project, start the application in development mode at localhost with the command:
  yarn start

Tech Introduction

  • Developed using Typescript standards within React (create-react-app);
  • The EsLint and Prettier libraries were used for identification and a better debugging of the code;

Basic Template

  • Create the project with create-react-app;
  create-react-app weather-forecast --template=typescript

Added Libraries

  • Added the Eslint libraty to project in development mode:
  yarn add eslint -D
  • Added the following library in the development version, to import typescript by default:
  yarn add eslint-import-resolver-typescript -D
  • Added the Prettier library to the project in development mode:
  yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
  • Added the Styled Components library to stylized the aplication:
  yarn add styled-components
  • Added the Axios library to HTTP request's:
  yarn add axios
  • Added the React Icons library to use some icons:
  yarn add react-icons

Project Structure

The project contains the following folders


  • /components => Reusable application components;
  • /pages => Application pages;
  • /routes => Application routes;
  • /styles => Global styles of aplication;

Some comments have been added to the code to improve understanding;

Acessar site