Yasser-Slaymen / Yasser-Slaymen-Wonderkind-FE

Campaign Performance Dashboard (Vue.js 3 & TypeScript) This project provides a user-friendly dashboard application built with Vue.js 3 and TypeScript to effectively visualize and analyze the performance of your job vacancy marketing campaigns across diverse platforms like Meta, Google, and TikTok.

compaign-performance

This repository contains the code for the Wonderkind FE Coding Assessment Dashboard. The dashboard is built using Vue3 with TypeScript and showcases a comprehensive overview of the performance metrics for various job vacancy marketing campaigns across different platforms (Meta, Google, TikTok).

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Clone

git clone https://github.com/Yasser-Slaymen/Yasser-Slaymen-Wonderkind-FE.git

Navigate to Cloned Repository

navigate into the project folder where the repository was cloned

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Technologies Used:

• Vue3
• TypeScript
• Vue Router
• Vuex

Folder Structure:

• /src/components: Contains Vue components used in the dashboard.
• /src/views: Vue views for different pages of the dashboard.
• /src/utils: Utility functions and data files.
• /src/router: Vue Router configuration.

Lint with ESLint

npm run lint