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 websitehttps://vuejs.org/v2/guide/
Swapi websitehttps://swapi.dev/documentation
Dashboard tutorialhttps://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js.html
Command line infohttps://www.macworld.com/article/221277/master-the-command-line-navigating-files-and-folders.html
Star Wars text tutorialhttps://www.youtube.com/watch?v=kHrV2ZHzF-0

I found a tutorial and started off in the terminal:

  ➜  ~ ls
 [PRIVATE FOLDER]         [PRIVATE FOLDER]         [PRIVATE FOLDER]
 [PRIVATE FOLDER]         [PRIVATE FOLDER]         [PRIVATE FOLDER]
 [PRIVATE FOLDER]         [PRIVATE FOLDER]
 Documents                [PRIVATE FOLDER]
 ➜  ~ cd documents
 ➜  documents ls
 [PRIVATE FOLDER]         [PRIVATE FOLDER]          Privé
 [PRIVATE FOLDER]         [PRIVATE FOLDER]
 ➜  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
 [PRIVATE FOLDER]         [PRIVATE FOLDER]         [PRIVATE FOLDER]
 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:

homepage
detailpage

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
output

Current open tabs:
Dashboard tutorialhttps://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js.html
Swapihttps://swapi.dev/documentation#start
How to use an APIhttps://technologyadvice.com/blog/information-technology/how-to-use-an-api/
Star Wars Google Searchhttps://www.google.com/search?q=star+wars&sxsrf=ALeKk02bANKIRzJfTOC3O87MOxrYiBq5ww:1622896920158&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi2-rqTwoDxAhVMA2MBHQSbDn8Q_AUoAXoECAEQAw#imgrc=0Y86pqLgBOhMIM
Star Wars text tutorialhttps://www.youtube.com/watch?v=kHrV2ZHzF-0

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 https://github.com/request/request/issues/3142
 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 ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
 

 The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
 > https://opencollective.com/core-js 
 > https://www.patreon.com/zloirock 
 

 Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
 

 + @vue/cli@4.5.13
 updated 7 packages in 30.319s
 ➜  avocado-media ls
 avocadomedia-frontend-opdracht.pdf
 ➜  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 README.md...
 🎉  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
output

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

[WORK IN PROGRESS…]