Attest Frontend technical stage

This is the base code for Attest's Frontend technical stage interview.

Background

This code is not a direct representation of Attest's code or coding principles; it is designed to guide the technical stage interview. You are asked to familiarise yourself with the existing code - you can make notes on improvements you may make given you had the opportunity to do so.

You will be asked to do some technical tasks to complete the functionality of the mini-application. You can complete some of the immediate tasks at home - prepping/completing these tasks at home gives more opportunities in the final technical stage. If you don't have time to start these tasks at home then don't worry we will complete these in the first part of the interview.

Description

Attest is a platform where users can design and send surveys to the public. The Attest platform will then collect responses from many users; your task is to represent the results of a completed survey and allow the user to filter the data.

The sidebar on the right displays and applies demographic filters, this is used to filter the response data, i.e. clicking "London" will change the responses shown on the left to only display the responses of users that match the filters selected.

What's included?

• A design - you can use figma to look at the design files.
  • Create an account. https://www.figma.com/
  • Import __files__/design.fig (default state)
  • Import __files__/design-interactive.fig (Interacted state)
• A vite config that supports:
  • .(css|postcss) files - see for included base plugins .postcssrc.js
  • .(less) files
  • .(sass|scss) files
  • .(js|jsx) files
  • .(ts|tsx) files
• Base css variables src/styles/vars.css
• Vitest is the provided library for unit tests.
  • We have included all the necessary packages and setup

Tasks

We will run through tasks during the pairing interview. We provide the repository ahead of time to allow you to get familiar with some of the code base.

Prior to the pairing interview please setup the local repository and make sure everything is running.

There is a failing unit test, as we will use this as a reference for the completed task being correct.

Setup

You can use mise to setup environment

mise install

How to run?

• Open up the Dev Server on https://localhost:3000 with pnpm start
• To retrieve the survey data request http://localhost:3000/api/survey.json
• To retrieve the filter definition data request http://localhost:3000/api/filter-definition.json
• Run unit tests pnpm test (these will only pass upon successfully completing task 3)
• Run type checking pnpm typecheck