|
| 1 | +## Task |
| 2 | + |
| 3 | +Go to our [sample API docs](https://sampleapi-explorer.squaredup.com/api-details#api=integrations-v1&operation=service-desk) |
| 4 | + |
| 5 | +This is an API that returns sample service desk data. |
| 6 | + |
| 7 | +The page documents the API definition, the base URL and the optional parameters. There is an example `JSON` response. You can also click the `Try it` button and see different responses based on the supplied query string parameters. |
| 8 | + |
| 9 | +You will use this API to retrieve the data necessary for this task. |
| 10 | + |
| 11 | +*Note*: We are not expecting you to complete **all** of the following tasks. Try to complete as many tasks as you can - ensure the tasks you select match your skill set. Focus on addressing the tasks that create the most significant impact for the end user |
| 12 | + |
| 13 | +### Back-end |
| 14 | + - Find the percentage of problems vs questions vs task types of issues on sample of 500 data points |
| 15 | + - Find the percentage of high vs medium vs low priority issues on sample of 500 data points |
| 16 | + - Find the average time it took to close high priority issues of any type on sample of 500 data points |
| 17 | + - What was the “score” value of the “satisfaction_rating” on the issue that took longer to solve in the above set? |
| 18 | + - If time allows, feel free to return any other useful insights from the dataset that you can think of |
| 19 | + |
| 20 | +You can choose how you want to present the above data; simple HTML or JSON is fine. |
| 21 | + |
| 22 | +### Front-end |
| 23 | + - A service desk operator wants to view a list of all issues of any type, sorted by priority (use sample of 100 data points) |
| 24 | + - A service desk operator wants to filter all the open issues of high priority |
| 25 | + - A service desk operator wants to search a list of issues by a word that is contained within the "organization_id" |
| 26 | + - A service desk manager wants a high-level view of key data including number of tickets by priority, type, status and satisfaction_rating |
| 27 | + |
| 28 | +Choose how you want to present the above data |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +## Structure |
| 33 | + |
| 34 | +We are using `Vite` as the front-end build and local development tool. The client is built with `React`, and `Tailwind CSS` is available to simplify styling. All React components are located in the `src/components/` directory. The `index.tsx` file simply mounts the `React` app and does not need to be modified. |
| 35 | + |
| 36 | +We are also using the `vite-plugin-api-routes` plugin to create directory-based API routes. Both `routeBase` and `dirs` are set to: `api`. To add additional routes, simply create a new file in the `api` directory with the desired route name. For example, `src/api/aggregate.ts` will create a `/api/aggregate` route. An exported `GET`, `POST`, or `PUT` function in that file will define the method handler in the respective route. |
| 37 | + |
| 38 | +The `tests` directory is available for adding test cases. It includes subdirectories for `client` and `api` to help organise your tests. To simplify testing, we’ve integrated Mock Service Worker (`mws`). `msw` allows you to create a mock server and simulate API responses. You can find an example in `src/tests/client/App.test.tsx:8`, which demonstrates mocking the `api/data` route. |
| 39 | + |
| 40 | +We are using `TypeScript`. If you're unfamiliar with it, `TypeScript` extends `JavaScript` with syntax for adding static types. It infers types wherever possible, but you can explicitly add types to reduce the likelihood of errors in your code. As an example, we’ve included a `SampleData` interface in `src/api/types`. You should not need to modify or configure the TypeScript compiler options. |
| 41 | + |
| 42 | +Good luck! :thumbsup: |
| 43 | + |
| 44 | +## Getting Started |
| 45 | + |
| 46 | +### Install |
| 47 | + |
| 48 | +Install dependencies. |
| 49 | + |
| 50 | +```bash |
| 51 | +pnpm install |
| 52 | +``` |
| 53 | + |
| 54 | +Serve with hot reload at <http://localhost:5173>. |
| 55 | + |
| 56 | +```bash |
| 57 | +pnpm run dev |
| 58 | +``` |
| 59 | + |
| 60 | +### Lint |
| 61 | + |
| 62 | +```bash |
| 63 | +pnpm run lint |
| 64 | +``` |
| 65 | + |
| 66 | +### Typecheck |
| 67 | + |
| 68 | +```bash |
| 69 | +pnpm run typecheck |
| 70 | +``` |
| 71 | + |
| 72 | +### Build |
| 73 | + |
| 74 | +```bash |
| 75 | +pnpm run build |
| 76 | +``` |
| 77 | + |
| 78 | +### Test |
| 79 | + |
| 80 | +```bash |
| 81 | +pnpm run test |
| 82 | +``` |
| 83 | + |
| 84 | +View and interact with your tests via UI. |
| 85 | + |
| 86 | +```bash |
| 87 | +pnpm run test:ui |
| 88 | +``` |
0 commit comments