osoc17 / skillid

Team Domino's Badge Designer

skillid

Team Domino's Badge Designer

Project context

Our project is about Open Badges. What are Open Badges? These are virtual badges, which are used to endorse someone’s skills. For instance, you work at HR and want to endorse an employee’s skill. I suggest you use a badge. It holds value and is recognizable. Cool, you say, but how can you build a badge if you are not a designer? And that’s our project: an easy-to-use badge builder, to help companies endorse their employee’s skills.

In order to create a valuable and reliable badge we are using the ESCO standard for naming skills. The skill is represented in the visual part by its official name. For the structure we rely on Open Badges.

To build a badge, the builder just needs the user to enter some basic data, select the skill with our ESCO search field and press Enter. And that’s it. Of course, as a company, you can add your brand to the badge, with your colors and logo.

Looks easy ? This is our promise : it is easy!

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

skillid's Issues

Show badge component

double list after search box

Type 'ASP.NET'

Actual: it shows the same list twice (4 items)
Expected: show the list once (2 items)

research examples of verification of badges

investigate hooks for external services

Tab 1 - Definition of done

Designed like the design by niels
No explorer

After SEARCH is clicked

• an unordered list appeared
• click item lead to next TAB

Research variables in VUE

Actions on badge

svg basic implementation

only return same svg all the time

research VUE.js for one hour

evaluate most common color in image

use color-thief to get most common color in image
use colr to grayscale image

design of the skillid app

Talk to Eva on UX Design
no need to make it look super good

import picture

Add Search component

Add Form component