How to build a Foreignrap clone using Nuxt, Airtable and a bit of hardcore 🔥

Image for post
Image for post
Full screen of the prototype.

The Back Story

For quite some time, I’ve been a fan of the Foreignrap platform made by Aziz Firat, Thomas Vimare, Marty Bell & Ariel Dorol. It’s been a great source of discovery when it comes to new artists and scenes — Dutch 🇳🇱 hip hop is certified 🔥. On top of the great curation of content, the repurposing of the YouTube platform into a visual spectrum of the world’s video editing talent is pretty sweet.

The video that inspired the project.

Minimum Requirements 🤔

  • App framework (Nuxt.js)
  • Database (Airtable sheet)
  • A way to consume database (Airtable API)
  • Submit a track (Airtable API)
  • Complication free styling (Tachyons)
  • Quick deployment (Now)

Diving Into It

First things first, setting up the application itself, Nuxt have a nifty little command utilising npx — which in a roundabout way, is npm without downloading the package to your computer. Ahem, so we fire up Terminal and run…

Image for post
Image for post
That shopping mall assistant vibe.
  • Project description — The heaviest tracks around.
  • Author name — erd_xyz
  • Package manager — Yarn
  • UI Framework — Tachyons
  • Custom Server Framework — None
  • Nuxt.js Modules — None
  • Linting Tools — None
  • Test Framework — None
  • Rendering Mode — Universal (SSR)

Creating Our Structure

One of the greatest strengths of the Nuxt framework is that your routing is done out of the box. For the purpose of this clone, we require one page — just the index.vue file, which resides in the Pages folder.

  • node-sass — ability to compile .scss files.
Image for post
Image for post
  • vue-youtube — One of many YouTube integration plugins for Vue.

Connecting To The Database

Now that we have our initial structure and the tools needed to build our app, let’s just build it yo. 💁‍♀️ The coolest thing about Airtable is, whenever you create a Base, their API offers you custom tailored documentation based on that base (mind the pun). This means whenever you alter your table or base, the changes are reflected in the documentation.

Image for post
Image for post
Even the values adapt to your actual data!
<script>
import Airtable from 'airtable'
var base = new Airtable({apiKey: 'YOUR_API_KEY'}).base('BASE_ID');
export default {
data () {
return {
videos: []
}
},
methods: {
loadData () {
var self = this
this.videos = []
base('PAGE_NAME').select({
view: 'Grid view'
}).eachPage(function page(records, fetchNextPage) {
records.forEach(function(record) {
self.videos = records
});
}, function done(err) {
if (err) { console.log(err); return; }
});
},
mounted () {
this.loadData()
}
}
</script>
Image for post
Image for post
A quick list of tracks. Simply just track name, artist name and YouTube video ID.

Integrating YouTube

Now that we have our connection, let’s setup the physical structure and plug into our YouTube package. With our mark up, we’ll need to achieve a few things.

randomVideo () {
this.randomId = Math.floor(Math.random() * this.videos.length)
}
  • playing() — When the next video starts, we can tell the UI to briefly show the title and artist.
  • next() — When the user taps the Skip button in the UI, we can trigger the above function for a new random video.
  • pauseToggle() — Along with computed values, we can figure out when the video is playing to change the play button to pause and vice versa.

The Prototype (Thus Far)

I kind of figure this article can get real long, real fast, so before we get into building some of the more complex functionality like submitting tracks, let’s look at the progress so far. This is like that magic bit on cooking shows where they had one prepared earlier…

Terrible quality GIF etc.

Rounding Up …For Now

So I may potentially follow this up with another post diving more into detail about some of the features up until this point that we haven’t included.

Written by

Product Designer, occasionally.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store