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 – https://vuejs.org/v2/guide/
– Swapi website – https://swapi.dev/documentation
– Dashboard tutorial – https://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js.html
– Command line info – https://www.macworld.com/article/221277/master-the-command-line-navigating-files-and-folders.html
– Star Wars text tutorial – https://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:
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.
Current open tabs:
– Dashboard tutorial – https://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js.html
– Swapi – https://swapi.dev/documentation#start
– How to use an API – https://technologyadvice.com/blog/information-technology/how-to-use-an-api/
– Star Wars Google Search – https://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 tutorial – https://www.youtube.com/watch?v=kHrV2ZHzF-0
I ran into a problem with compiling:
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.
Another problem: Everything is duplicated. I honestly have no idea why…
[WORK IN PROGRESS…]