Tech Stack & Features

The weather app project demonstrates how to use:

-Create React App and set up a modern web app by running one command

-Open Weather Map API, 5-day forecast available at any location or city. It includes weather forecast data with a 3-hour step. The forecast is available in JSON or XML format.

-OpenWeatherFont (owfont) Icons, designed to match to weather condition codes from Open Weather Map API.

-Moment.js to parse, validate, manipulate, and display dates and times in JavaScript

-Bootstrap the world’s most popular framework for building responsive, mobile-first sites.

Those are weather app features:

• Shows the 5-day forecast for a specific city

• Include a weather icon temperature reading and description of weather conditions ☀️🌤⛈❄️

Getting Started

STEP 1

To get started, run the following code in your terminal:

create-react-app weather-app

And right on a begging after I run npm start I get this error with instruction to fix the dependency tree, try following the steps below in the exact order:

I tried to follow and troubleshoot but everything fails, so I created a .env file in the root directory and added SKIP_PREFLIGHT_CHECK=true, and relaunch with npm start.

This worked for me and I could see my React app update live on a localhost server:

STEP 2

WeekContainer.js - class component was created as a new file in the src folder and imported into App.js:

import React, { Component } from 'react';
import './App.css';
import WeekContainer from './WeekContainer';

class App extends Component {
  render() {
    return (
      <div className="App">
        <WeekContainer />
      </div>
    );
  }
}

export default App;

Live updates on a local host look like this, and everything is properly rendered on screen:

STEP 3

How to get Weather Data for WeekContainer

WeekContainer's "job" will be to hold 5 “weather cards”, each representing a day of the week.

In order to do this, we will first need to fetch the data from the API. OpenWeatherMap is one of my favorite API providing weather information. There are few steps to getting an API key that will be explained below.

STEP 4

Getting an API Key

-Sign up for an account on the OpenWeatherMap website here.

-You will receive an email with an API key that will activate within a few hours of receiving the email (from my experience it will only take 10 minutes).

This is an example of an API call:

-Create a file (maybe called keys.js) within the src folder and add your API key to it and add the newly created file to your .gitignore so once its push to git it will be “ignored”.

-Import the hidden file within WeekContainer.js so you can use string interpolation to use your API key in the fetch request without giving away your API key on GitHub, hope this will work well!

Here, we’re specifying for the response to be specifically for zip code 11001:

import React from 'react';
import apiConfig from './keys';

class WeekContainer extends React.Component {
  render() {


    const weatherURL =
      `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
//You can search weather forecast with data by city name

    return (
      <div>
        <h1>We will have a Weather app soon!</h1>
      </div>
    )
  }
}

export default WeekContainer;

More info about Open Weather Map API' available parameters can be found here

STEP 5

Fetching from the Open Weather Map API

Now it’s time to fetch! Let's create a componentDidMount method with the following code:

componentDidMount = () => {
      const weatherURL =
        `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
      fetch(weatherURL)
        .then(res => res.json())
        .then(data => console.log("Data List Loaded", data.list))

This is just a beginning and I will write more about how to Filter and render Card for each day and add Bootstrap.

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!