|
| 1 | +# Welcome |
| 2 | + |
| 3 | +Please take the time to read through all of the sections below; we want you to do great! :rocket: |
| 4 | + |
| 5 | +Feel free to reach out to your recruiting contact with any questions or concerns. |
| 6 | + |
| 7 | +## Goal |
| 8 | + |
| 9 | +Modify the provided Vue 3 app to match [this mock](https://www.figma.com/file/swzJVL624G434CVdWi3FLv/Core-UI-Team-Project) as closely as possible while utilizing best-practices to improve the codebase and implement the functional requirements outlined below. |
| 10 | + |
| 11 | +- The provided exercise files are a starting point and they have room for improvement; feel free to modify |
| 12 | +- 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 |
| 13 | +- 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 |
| 14 | + |
| 15 | +### Links |
| 16 | + |
| 17 | +- Figma Mock: <https://www.figma.com/file/swzJVL624G434CVdWi3FLv/Core-UI-Team-Project> |
| 18 | +- Acceptance criteria: <https://docs.google.com/document/d/1AIXTtrEMZBnfoLYXDlBYiEB-BTk7XNt2QlY7jWYdPv0/edit?tab=t.0#heading=h.8hapmwf98sj> |
| 19 | + |
| 20 | +## Functional Requirements |
| 21 | + |
| 22 | +- [Vue 3](https://vuejs.org/) and TypeScript |
| 23 | +- User should be able to view the name, a brief description, versions available, and other info shown in the mock for services |
| 24 | +- User should be able to search for services ([See search endpoint details below](#searching-the-services-endpoint)) |
| 25 | +- User should be able to click on a service to view more details |
| 26 | +- User should be able to paginate through services (client-side implementation) |
| 27 | +- 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 |
| 28 | +- 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 |
| 29 | + |
| 30 | +## Additional Considerations (if applicable) |
| 31 | + |
| 32 | +- The UI should be responsive and look great at different browser viewport sizes |
| 33 | +- Pixel-perfect implementation |
| 34 | +- Routing and views (e.g. navigating to a given service from its card) |
| 35 | +- State management with [Pinia](https://pinia.vuejs.org/) |
| 36 | +- [Component Tests and/or Unit Tests](#run-component-and-unit-tests-with-vitest-and-optionally-vue-test-utils) |
| 37 | +- Other items covered in your Panel 1 interview |
| 38 | + |
| 39 | +## Evaluation |
| 40 | + |
| 41 | +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: |
| 42 | + |
| 43 | +- How closely your implementation matches the design along with the other [Functional Requirements](#functional-requirements) |
| 44 | +- Code quality, including appropriate componentization and modularity |
| 45 | +- TypeScript usage |
| 46 | +- Coding (and Vue) best-practices |
| 47 | +- The project should pass type checking and build successfully |
| 48 | +- How you dedicate the allotted time to focus on your strengths |
| 49 | +- Test coverage, if applicable |
| 50 | + |
| 51 | +## How to submit the project |
| 52 | + |
| 53 | +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. |
| 54 | + |
| 55 | +When it's ready, please send your recruiter a link to the source code in a GitHub repository (no Pull Requests). |
| 56 | + |
| 57 | +--- |
| 58 | + |
| 59 | +## Project Setup |
| 60 | + |
| 61 | +### Clone the repository |
| 62 | + |
| 63 | +```sh |
| 64 | +git clone [email protected]:Kong/konnect-team-interview-frontend-exercise.git |
| 65 | +``` |
| 66 | + |
| 67 | +### pnpm |
| 68 | + |
| 69 | +This repository uses [`pnpm`](https://pnpm.io) rather than `npm` or `yarn`. [See here for instructions on installing pnpm](https://pnpm.io/installation). |
| 70 | + |
| 71 | +### Install dependencies |
| 72 | + |
| 73 | +```sh |
| 74 | +pnpm install |
| 75 | +``` |
| 76 | + |
| 77 | +### Compile and Hot-Reload for Development |
| 78 | + |
| 79 | +Start the backend which serves the `services` API: |
| 80 | + |
| 81 | +```sh |
| 82 | +pnpm dev:server |
| 83 | +``` |
| 84 | + |
| 85 | +In a separate terminal, start the Vue app: |
| 86 | + |
| 87 | +```sh |
| 88 | +pnpm dev:ui |
| 89 | +``` |
| 90 | + |
| 91 | +## Searching the services endpoint |
| 92 | + |
| 93 | +The local API is available at `http://localhost:4001` after running `pnpm dev:server`. |
| 94 | + |
| 95 | +Searching this endpoint is supported by passing a query string with a value to search with (case-insensitive): `/api/services?q={value}` |
| 96 | + |
| 97 | +**Note**: The search endpoint evaluates all property values as a `string` to determine a match. |
| 98 | + |
| 99 | +### Searchable properties |
| 100 | + |
| 101 | +The search endpoint is configured to search the following fields for each service within the JSON response: |
| 102 | + |
| 103 | +```ts |
| 104 | +{ |
| 105 | + id: string; |
| 106 | + name: string; |
| 107 | + description: string; |
| 108 | + type: string; |
| 109 | +} |
| 110 | +``` |
| 111 | + |
| 112 | +### Search example |
| 113 | + |
| 114 | +If I wanted to search for a service with "dogs" in the service name, I would pass the name in the query string: |
| 115 | + |
| 116 | +```sh |
| 117 | +GET: /api/services?q=dogs |
| 118 | +``` |
| 119 | + |
| 120 | +### Linting and fixing the code |
| 121 | + |
| 122 | +#### ESLint |
| 123 | + |
| 124 | +```sh |
| 125 | +# Run the linter |
| 126 | +pnpm lint |
| 127 | + |
| 128 | +# Fix linting errors |
| 129 | +pnpm lint:fix |
| 130 | +``` |
| 131 | + |
| 132 | +#### Stylelint |
| 133 | + |
| 134 | +```sh |
| 135 | +# Run stylelint |
| 136 | +pnpm stylelint |
| 137 | + |
| 138 | +# Fix stylelint errors |
| 139 | +pnpm stylelint:fix |
| 140 | +``` |
| 141 | + |
| 142 | +### Run Component and Unit Tests with [Vitest](https://vitest.dev/) and optionally [Vue Test Utils](https://test-utils.vuejs.org/) |
| 143 | + |
| 144 | +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. |
| 145 | + |
| 146 | +```sh |
| 147 | +# Run tests |
| 148 | +pnpm test |
| 149 | + |
| 150 | +# or run the tests in the Vitest UI |
| 151 | +pnpm test:open |
| 152 | +``` |
| 153 | + |
| 154 | +### Build and Minify for Production |
| 155 | + |
| 156 | +```sh |
| 157 | +pnpm build |
| 158 | +``` |
| 159 | + |
| 160 | +### Preview your built application |
| 161 | + |
| 162 | +First, you'll need to build the app |
| 163 | + |
| 164 | +```sh |
| 165 | +pnpm build |
| 166 | +``` |
| 167 | + |
| 168 | +Next, run the API server |
| 169 | + |
| 170 | +```sh |
| 171 | +pnpm dev:server |
| 172 | +``` |
| 173 | + |
| 174 | +Now run the `preview` command |
| 175 | + |
| 176 | +```sh |
| 177 | +pnpm preview |
| 178 | +``` |
| 179 | + |
| 180 | +### Committing Changes |
| 181 | + |
| 182 | +[](http://commitizen.github.io/cz-cli/) |
| 183 | + |
| 184 | +At Kong, we utilize [Conventional Commits](https://www.conventionalcommits.org/) in all of our repositories. [Commitizen](https://github.com/commitizen/cz-cli) can be used to to help build and enforce commit messages. |
| 185 | + |
| 186 | +If you're unfamiliar with conventional commits, it is **recommended** to use the following command in order to create your commits: |
| 187 | + |
| 188 | +```sh |
| 189 | +# Stage your changes |
| 190 | +git add -A |
| 191 | + |
| 192 | +# Trigger the commitizen CLI to help compose your commit message |
| 193 | +pnpm commit |
| 194 | +``` |
| 195 | + |
| 196 | +This will trigger the Commitizen interactive prompt for building your commit message. |
0 commit comments