Pierre Havelaar: Frontend & Backend Technical Assesment

[pierreh]

Overview

Hi Everyone 👋
I know I was free to choose either the Frontend or Backend assessment, however I really wanted to do both!
Here is my Loom video with an introduction of myself, a FE demo and a FE code walkthrough. Since I added a FE demo the Loom ended up just over 5 mins.
https://www.loom.com/share/0ebbd1f242524e6c8889186cf55bc473

Frontend

Basic functionality

This PR contains the following components:

• Modal
• Button
• Portal

The modal will render a modal dialog inside a React portal outside the DOM for the page content. To display the modal the show property needs to be set to true. It is possible to disable the portal by setting the noPortal property.
By default the Modal dialog will be animated when shown, you can disable this by setting animation to false.
Modals can be nested without issues and can be navigated with the keyboard. The Escape key will close the dialog, as well as clicking outside the Modal.

How to use

To use the modal component you will need to add the component where it is needed and you manage it's visibility state through a React state variable:

() => {
    const [showModal, setShowModal] = useState(true);
    return (<div>
        <Modal handleClose={() => setShowModal(false)} show={showModal} title="Modal Title">Modal Content</Modal>
    </div>);
}

Quickstart

Frontend

nvm install 16.11
$ nvm use
$ yarn 
$ yarn test
$ yarn dev

Backend

nvm install 16.11
$ nvm use
$ yarn 
$ export POSTGRES_CONNECTION_STRING=postgresql://localhost:5432/contra
$ yarn migrate
$ yarn testdata
$ yarn dev

Dependencies

Frontend

The frontend relies on focus-trap-react and tailwind-css.

Backend

On the backend I added graphql-scalars in order to handle DateTime

GraphQL schema

enum FlagType {
  boolean
  string
  json
}

type Feature {
  contextId: Int!
  name: String!
  type: FlagType
  value: String!
}

type User {
  id: Int!
  givenName: String!
  familyName: String!
  emailAddress: String
  createdAt: DateTime!
  updatedAt: DateTime!
  environment: String!
  features: [Feature!]!
}

type Mutation {
  """
  Setup a feature flag for a group of users. The feature flag and value must already exist.
  """
  targetUsers(userIds: [Int!]!, flag: String!, value: String!, environment: String!): [User!]!

  """
  Update an existing feature flag for a single user.
  If the feature is not availabe for this user or is assigned to multiple user an error will be thrown.
  """
  updateFeatureForUser(userId: Int!, flag: String!, value: String!, environment: String!): Int
}

type Query {
  """
  Retrieve all the users in the system and their feature flags for the given environment
  """
  users(environment: String!): [User!]!
}```