​Compare your Air

Introduction

The application allows you to compare the air quality from cities in the United Kingdom using a feed from OpenAQ).

Install and run the application

npm i ; npm start

By default, the app will start on the 3000 PORT.

Technologies & methodologies

• Node JS
• React
• SASS
• BEM, DRY methodologies

Modules

• axios — GitHub | NPM
• moment — Website | NPM
• node-sass — GitHub | NPM

Code structure

The application is using React hooks:

• useState()
• useEffect()
• useContext()

More information: hooks reference

Application states

The application states are set in the ./Store.js , using the React Context API. Thus you can access to the states from anywhere in your application without the hassle to pass down the props/lift up the states in the components.

// Store.js
export const DataContext = createContext();
const Store = ({ children }) => {
  const [data, setData] = useState({
    locations: []
  });
});
return (
  <DataContext.Provider value={[data, setData]}>{children}</DataContext.Provider>
);

// index.js
import Store from './Store';
<Store>
    <App ></App>
</Store>

More information: Context API reference

Data fetching

The data is fetched using an Axios GET request.

More information: npm package

Feed logic

In the current version, the feed is fetching the latest records. The output is filtered using these parameters:

• Country selection (ISO code): country=GB
• Limit: limit=500

More information: available feeds and parameters

Documentation

Feed

Get and store the data

The getData() function is located at ./src/services/airquality.js.

// airquality.js
const getData = async (countryISO, limit) => {
  try {
    const response = await axios.get(
      `https://api.openaq.org/v1/latest?country=${countryISO}&limit=${limit}`
    );
    return response.data.results;
  } catch (error) {
    return console.error(error);
  }
};

In the main component ./src/App.js, the arguments are passed to the getData() function.

// App.js
useEffect(() => {
    getData('GB', 500)
      .then(locations => setData({ locations }))
      .catch(error => console.error(error));
  }, [setData]);

Add a parameter

You can add a new parameter via the Axios GET request located at ./src/services/airquality.js.
Then you can pass the value in the getData() function located at ./src/App.js (see above) .

More information: available feeds and parameters

Styling

The application is styled via SASS, and using BEM methodology as a naming convention.
Combining BEM with SASS make the code flow fast and powerful.

// _card.scss
.card {
  background-color: #fff;
  border-radius: $radius;
  margin: 20px;
  padding: 15px;
  width: $search-width;
  max-width: $search-width;
  box-shadow: $box-shadow;
  &__time {
    font-weight: 600;
    font-size: 0.8rem;
  }
  // ...
}

More information: SASS guidelines — BEM methodology

Structure

The application is using the 7-1 pattern.

Add a SCSS file

You can add a file in the corresponding folders, in ./src/stylesheets/.
Please ensure to @import the file in the ./src/stylesheets/main.scss.

// main.scss
// Abstracts: global variables, helpers, mixins, etc.
@import './abstracts/mixins';
@import './abstracts/helpers';
@import './abstracts/variables';
// Base: global styles (resets, typography, colors, etc)
@import './base/reset';
@import './base/typography';
// Components: styling for each components
@import './components/card';
@import './components/search';
// Pages: page-specific styling
@import './pages/home';