Working with Vue.js – Project

At the Stagediving event I organised, I spoke to several different companies about options for an internship. One of these conversations was held with Menno from Avocado Media. In response to our conversation I received an assignment to build a Star Wars dashboard in Vue.js to see how well developed I am and what type of intern I would be.

I’m not going to lie; The assignment scared me a bit. I did work with Vue.js before, but that is now about a year ago and it was a very superficial acquaintance. But I started with grabbing my old work, checking it out and slowly understanding what I made at the time. I also Googled a lot and before I knew it I had about 20 tabs open on my browser.

Open tabs so far:
Vue website
Swapi website
Dashboard tutorial
Command line info
Star Wars text tutorial

I found a tutorial and started off in the terminal:

  ➜  ~ ls
 Documents                [PRIVATE FOLDER]
 ➜  ~ cd documents
 ➜  documents ls
 [PRIVATE FOLDER]         [PRIVATE FOLDER]          Privé
 ➜  documents cd prive
 cd: no such file or directory: prive
 ➜  documents cd Prive      
 cd: no such file or directory: Prive
 ➜  documents cd privé
 ➜  privé ls
 Web-app design           [PRIVATE FOLDER]
 ➜  privé cd web-app design
 cd: string not in pwd: web-app
 ➜  privé cd "web-app design"
 ➜  web-app design cd "avocado-media"
 ➜  avocado-media vue create my-cool-dashboard

 Vue CLI v4.1.2
 │                                          │
 │   New version available 4.1.2 → 4.5.13   │
 │                                          │

 ? Please pick a preset: default (babel, eslint)

 Vue CLI v4.1.2
 ✨  Creating project in /PRIVATE FOLDER/PRIVATE FOLDER/Documents/Privé/Web-app design/avocado-media/my-cool-dashboard.
 🗃  Initializing git repository...
 ⚙  Installing CLI plugins. This might take a while... 

- all sorts of stuff is installed in between -

 🎉  Successfully created project my-cool-dashboard.
 👉  Get started with the following commands: 
  $ cd my-cool-dashboard
  $ npm run serve 

 ➜  avocado-media

Okay so now I have a folder with the needed structure. I opened this in my editor Visual Studio Code:

Visual Studio Code

Next up; I need to know what it’ll look like in order to be able to work, so I made a quick design:


After I made the drawings/designs I started working on the HTML/CSS. Since I never worked with API’s before, I thought it would be easier to just build the front first and then integrate the API later.

Visual Studio Code

Current open tabs:
Dashboard tutorial
How to use an API
Star Wars Google Search
Star Wars text tutorial

I ran into a problem with compiling:

Browser error

I was trying to add some SCSS/SASS to create a hover effect. But upon installing something this happened and now I’m kind off stuck… To be continued.

So: I couldn’t fix this. I just don’t know enough of Vue yet to know exactly what’s going on so I deleted the bunch and started all over again… Here we go:

I reinstalled Vue and created a new project.

 ➜  ~ /Users/mariekedehoop/Documents/Prive<0301>/Web-app\ design/avocado-media 
 ➜  avocado-media npm install -g @vue/cli
 npm WARN deprecated request@2.88.2: request has been deprecated, see
 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
 npm WARN deprecated har-validator@5.1.5: this library is no longer supported
 /Users/mariekedehoop/.nvm/versions/node/v14.2.0/bin/vue -> /Users/mariekedehoop/.nvm/versions/node/v14.2.0/lib/node_modules/@vue/cli/bin/vue.js

 > core-js-pure@3.14.0 postinstall /Users/mariekedehoop/.nvm/versions/node/v14.2.0/lib/node_modules/@vue/cli/node_modules/core-js-pure
 > node -e "try{require('./postinstall')}catch(e){}"

 Thank you for using core-js ( ) for polyfilling JavaScript standard library!

 The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

 Also, the author of core-js ( ) is looking for a good job -)

 + @vue/cli@4.5.13
 updated 7 packages in 30.319s
 ➜  avocado-media ls
 ➜  avocado-media vue create starwars-dashboard
 Vue CLI v4.5.13
 ? Please pick a preset: Default ([Vue 2] babel, eslint)
 Vue CLI v4.5.13
 ✨  Creating project in /Users/mariekedehoop/Documents/Privé/Web-app design/avocado-media/starwars-dashboard.
 🗃  Initializing git repository...
 ⚙️  Installing CLI plugins. This might take a while... 

- all sorts of things are installed here -

 🚀  Invoking generators...
 📦  Installing additional dependencies...
 added 53 packages from 36 contributors in 17.367s
 76 packages are looking for funding
   run `npm fund` for details
 ⚓  Running completion hooks...
 📄  Generating
 🎉  Successfully created project starwars-dashboard.
 👉  Get started with the following commands:
  $ cd starwars-dashboard
  $ npm run serve 

Okay this is done, let’s run it and go to VSC.

Visual Studio Code

Another problem: Everything is duplicated. I honestly have no idea why…