Skip to content

Latest commit

 

History

History
120 lines (81 loc) · 2.9 KB

README.md

File metadata and controls

120 lines (81 loc) · 2.9 KB

Front-end technical test 👨‍💻

The goal of this test is to recreate a housing setup like we have at habx. It should take you less than 2 hours but feel free to take more time if you still have something to show us!

This repository is the template of the test, you are asked to complete it to fill all the requirements.

How to start the test

Fork the repo and clone it, then:

  npm install
  npm run start

with yarn

  yarn
  yarn start

When you're done you can just send us the repository link 👨‍🏫

Requirements

Description

The component should be a form with 4 fields:

  • Budget (price in euros)
  • Surface (area in square meters)
  • Typology (nb of rooms) one option possible
  • Exposure (north, south, east, west) multiple options possible

The form should have a minimum of validation and be based on project properties that should be fetched from the api.

User inputs have to be saved with the upsertSetup mutation with all required values.

That's it ! ⛳️

Tech

We ask you to use React with apollo-client to make your GraphQL API calls. 👮‍♂️

Nice to have

Pick at least one among the following

  • use Typescript in strict mode (you can generate graphql types by running npm run build:types) 🤓
  • do some animations with tools you like 💃
  • test the application: you can use jest or even cypress if you want 🤹‍♀️

Recommended libraries

Here are some libraries we use daily, but you can use whatever you want ! 😉

You could start by editing the Setup component. You are free to imagine the UI/UX. 👨‍🎨

Feedbacks

Any thoughts about our development environment ? (create-react-app/graphql...) What tools are you using daily ?

API

The api is mocked client side and is described bellow

Graphql API

Graphql schema

Project query

  query {
    project {
      id
      name
      properties {
        priceRange
        surfaceRange
        exposures
        typologies
      }
    }
  }

Setup mutation

  mutation($setup: SetupInput!) {
    upsertSetup(setup: $setup)
  }

If you have any question, don't hesitate to ask our team 🤘

Good luck ! 🤗