Welcome

Please take the time to read through all of the sections below; we want you to do great! 🚀

Feel free to reach out to your recruiting contact with any questions or concerns.

Goal

Modify the provided Vue 3 app to match this mock as closely as possible while utilizing best-practices to improve the codebase and implement the functional requirements outlined below.

• The provided exercise files are a starting point and they have room for improvement; feel free to modify
• Don't treat the mock as gospel -- if you see things that don't make sense, ask questions or implement what you think is right
• In the exercise you are utilizing a local API; however, code your submission as if you are using a production API, accounting for typical issues that can occur

Links

• Figma Mock: https://www.figma.com/file/swzJVL624G434CVdWi3FLv/Core-UI-Team-Project
• Acceptance criterias: https://docs.google.com/document/d/1AIXTtrEMZBnfoLYXDlBYiEB-BTk7XNt2QlY7jWYdPv0/edit?tab=t.0#heading=h.8hapmwf98sj

Functional Requirements

• Vue 3 and TypeScript
• User should be able to view the name, a brief description, versions available, and other info shown in the mock for services
• User should be able to search for services (See search endpoint details below)
• User should be able to click on a service to view more details
• User should be able to paginate through services (client-side implementation)
• The create Service Package button doesn't have to be operable -- interacting with this elements could do nothing, could be fully implemented (stretch goal), or something in between
• Please update the README in the project with a section to describe your design considerations, assumptions, and trade-offs made during this exercise. Also feel free to include any notes about your submission

Additional Considerations (if applicable)

• The UI should be responsive and look great at different browser viewport sizes
• Pixel-perfect implementation
• Routing and views (e.g. navigating to a given service from its card)
• State management with Pinia
• Component Tests and/or Unit Tests
• Other items covered in your Panel 1 interview

Evaluation

We will review your code for quality and your ability to talk through it, how you approach the UI, and what tradeoffs you make. Specifically we'll be looking at the following:

• How closely your implementation matches the design along with the other Functional Requirements
• Code quality, including appropriate componentization and modularity
• TypeScript usage
• Coding (and Vue) best-practices
• The project should pass type checking and build successfully
• How you dedicate the allotted time to focus on your strengths
• Test coverage, if applicable

How to submit the project

You have up to a week to complete the exercise, but we don't expect you to spend more than a few hours on it.

When it's ready, please send your recruiter a link to the source code in a GitHub repository (no Pull Requests).

---

Project Setup

Recommended IDE Setup

VSCode + Volar.

Clone the repository

git clone git@github.com:Kong/konnect-team-interview-frontend-exercise.git

pnpm

This repository uses pnpm rather than npm or yarn. See here for instructions on installing pnpm.

Install dependencies

pnpm install

Compile and Hot-Reload for Development

Start the backend which serves the services API:

pnpm dev:server

In a separate terminal, start the Vue app:

pnpm dev:ui

Searching the services endpoint

The local API is available at http://localhost:4001 after running pnpm dev:server.

Searching this endpoint is supported by passing a query string with a value to search with (case-insensitive): /api/services?q={value}

Note: The search endpoint evaluates all property values as a string to determine a match.

Searchable properties

The search endpoint is configured to search the following fields for each service within the JSON response:

{
  id: string;
  name: string;
  description: string;
  type: string;
}

Search example

If I wanted to search for a service with "dogs" in the service name, I would pass the name in the query string:

GET: /api/services?q=dogs

Linting and fixing the code

ESLint

# Run the linter
pnpm lint

# Fix linting errors
pnpm lint:fix

Stylelint

# Run stylelint
pnpm stylelint

# Fix stylelint errors
pnpm stylelint:fix

Run Component and Unit Tests with Vitest and optionally Vue Test Utils

Component and unit test files must be located in the /src/ directory and have a filename format of *.spec.ts. In the starter project, see src/components/ServiceCatalog.spec.ts for an example.

# Run tests
pnpm test

# or run the tests in the Vitest UI
pnpm test:open

Build and Minify for Production

pnpm build

Preview your built application

First, you'll need to build the app

pnpm build

Next, run the API server

pnpm dev:server

Now run the preview command

pnpm preview

Committing Changes

At Kong, we utilize Conventional Commits in all of our repositories. Commitizen can be used to to help build and enforce commit messages.

If you're unfamiliar with conventional commits, it is recommended to use the following command in order to create your commits:

# Stage your changes
git add -A

# Trigger the commitizen CLI to help compose your commit message
pnpm commit

This will trigger the Commitizen interactive prompt for building your commit message.