Monitor Dashboard

This is not a real project, but a coding assessment for a job interview

A monitoring dashboard built with Vue 3, displaying uptime, response times, and incidents across multiple services. It uses a simple server mock to emulate real server behavior.

Stack

Node: 20.19.0+ or 22.12.0+

• Vue 3 + TypeScript, Composition API
• Pinia — state management
• Vue Router — client-side routing
• PrimeVue + Tailwind CSS — UI & styling
• Chart.js / vue-chartjs — data visualisation
• Vite — build tool
• Vitest — unit testing
• Oxlint + ESLint — linting

Pages

Route	Description
/	Dashboard — summary cards, uptime, response time, incidents, availability charts
/monitors	Table of all monitors with search and filtering
/monitor/:id	Individual monitor detail (in progress)

Development

Commands

pnpm install
pnpm dev          # dev server at http://localhost:5173
pnpm build        # production build
pnpm preview      # preview production build
pnpm test:unit    # run unit tests
pnpm lint         # run oxlint + eslint
pnpm type-check   # tsc type checking
pnpm format       # prettier formatting

Server Mock

Check monitor-data.ts. It has 4 functions which emulate API calls. Pinia stores are using these mocks. You could indicate different response status ('success' | 'error' | 'empty') and also add response delay to test loading state.

Screenshots

Dashboard

---

Monitors page

---

Loading/Failed state