INSANELY fast prototyping with Flask + Vue + Tailwind (Part 2)

Integrating dynamic job data from RemoteOK.io API

In this article we will demonstrate how we can quickly integrate dynamic data from an external API with our static site we created in Part 1

I will be using Job listings from Remote OK website, it has a really simple API that requires no complex integration/authentication, as well as a simple license.

legal: "By using Remote OK's API feed you legally agree to mention Remote OK as a source and link back to the job listing URL on Remote OK with a DIRECT link, no redirects please. Please don't use our Remote OK and r|OK logo without written permission as they're registered trademarks. And thanks for using Remote OK! ^__^"

1. Setting up an API endpoint in our App

Since this article is for demonstration purposes, we will use a (quick and dirty) way to build our API endpoint.

Let's install python's excellent requests library :

pip install requests

By default Enferno comes with a prepared Blueprint (called public)

public
├── __init__.py
├── forms.py
├── models.py
└── views.py

This blueprint is meant to be used for any public pages/endpoint that can be accessed by website visitors.

the views.py file is where we can add our endpoint code, open the file and add the following code to it

@bp_public.route('/api')
def api():
    feed = requests.get('https://remoteok.io/api').content
    return Response(feed, content_type='application/json'),200

This code does two things, first it fetches the json feed from remoteok website, then it returns the feed as is (in json format) to our app at the endpoint (/api)

Go ahead and test the code by opening the url:

http://127.0.0.1:5000/api

You should get the something like the following

This is really a very simple and quick way to have the data available in your app, but in a real world scenario we better add additional code to handle possible networking exceptions, as well as cache the data locally using Redis or the database.  

2. Integrating data with our Vue App

In the previous tutorial we create a jobs.vue single file component to serve as a placeholder for our jobs listings. let's modify this file to read our new feed and display actual jobs.

open the jobs component (enferno/src/components/jobs.vue) and replace the code in it with the following:

<template>
    <section class="text-gray-700 body-font overflow-hidden">
  <div class="container px-5 py-24 mx-auto">
    <div class="-my-8">
      <div v-for="job in jobs" class="py-8 flex flex-wrap md:flex-no-wrap">
        <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
          <span class="tracking-widest font-medium title-font text-gray-900">{{job.tags[0]}}</span>
          <span class="mt-1 text-gray-500 text-sm">{{job.date.split('T')[0]}}</span>
        </div>
        <div class="md:flex-grow">
          <h2 class="text-2xl font-medium text-gray-900 title-font mb-2">{{job.position}}</h2>
          <p class="leading-relaxed">{{job.description}}</p>
          <a :href="job.url" target="_blank" class="text-indigo-500 inline-flex items-center mt-4">Apply now on RemoteOk
            <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14"></path>
              <path d="M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>
</template>
<script>
  import axios from 'axios';
  export default {

    data: function() {
      return {
        jobs: []
      }
    },
    mounted () {
      axios.get('/api').then(res =>{
        let jobs = res.data;
        // remove first legal item
        jobs.splice(0,1);

      this.jobs = jobs;
      })
    }
  }
</script>

This does a simple thing, we use axios http library to fetch data from our endpoint and bind it to the "jobs" variable.

In the API, the first item holds legal terms rather than an actual Job data so we remove it from the array

jobs.splice(0,1);

Then in the UI we replace the previous static text with a loop that display our jobs data, pretty simple!

to comply with the license terms, we also provide a link back to the remoteOK website.

Open your home in the browser and you should see the list of dynamic jobs being fetched directly into your app:

3. Customizing the remaining components

Feel free to customize all other components (header, nav, footer etc ..)  to fit your style.

That's it feel free to download the source code here.