Diabolocom Frontend Task

This project is a demonstration of specific components development using ViteJS, VueJS, TypeScript and TailwindCSS.

• Full requirements for the task
• Development process
• How to use the components

Project Setup

First, clone this repo:

# With GitHub CLI
gh repo clone doic/diabolocom-frontend-task

# Or with git CLI
git clone https://github.com/doic/diabolocom-frontend-task.git

Install all dependencies:

npm install

On Mac, if you run into an error about canvas package, you can fix it this way:

brew install pkg-config cairo pango libpng jpeg giflib librsvg

brew update

brew upgrade

npm i

Run Development Server

If you want to tweak the components

npm run dev

See how to use the components

Build Options

This command will build both Vue components and Web components:

npm run build

You can choose which components to build:

# Build only Vue components:
npm run build-vue

# Build only Web components:
npm run build-wc

Run Unit Tests with Vitest

npm run test:unit

Run E2E Tests with Playwright

# Install browsers for the first run
npx playwright install

# Build the project before running the e2e tests
npm run build

# Runs the e2e tests
npm run test:e2e
# Runs the tests only for Vue components
npm run test:e2e -- vue.spec.ts
# Runs the tests only for Web components
npm run test:e2e -- wc.spec.ts

See the components live

VueJs components	Web components