Skip to content
A simple Favoriot data visualization using React & Plotly
JavaScript HTML CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
public favoriot react plotly Jul 28, 2019
src favoriot react plotly Jul 28, 2019
.gitignore Initial commit from Create React App Jul 11, 2019 react plotly favoriot Jul 29, 2019
package.json favoriot react plotly Jul 21, 2019
screenshot.png favoriot react plotly Jul 28, 2019


Favoriot Data Visualization Using React & Plotly.js

Video Lintang

  1. Make sure Node.js is installed on your PC, then simply download or clone this repo and install all dependencies:

    $ git clone
    $ cd React-Plotly-Favoriot-API
    $ npm install

  1. Open your code editor (I'm using Visual Studio Code), insert your Favoriot API key and Favoriot device developer ID to the App.js file!

    • API key goes to request headers:

      var headers = {
      headers: {
          'Content-Type': 'application/json',
          'apikey': 'your_API_key'
    • Device developer ID goes to request headers:

      var dataBody = {
          device_developer_id: 'your_device_developer_ID',
          data: {
              Temperature: this.refs.temp.value,
              Humidity: this.refs.hum.value,
              Potentio: this.refs.pot.value

  1. Run the project!

    $ npm start

    The app will be run automatically on http://localhost:3000/. Try to POST some data & GET the data back from Favoriot!


    Enjoy your code~ 😍

Lintang Wisesa 💌

Facebook | Twitter | Google+ | Youtube | :octocat: GitHub | Hackster

You can’t perform that action at this time.