Skip to content

๐ŸŽ“A front-end test for habx recruitement

Notifications You must be signed in to change notification settings

CodeDruid13/test-client-front

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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 ! ๐Ÿค—

About

๐ŸŽ“A front-end test for habx recruitement

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 66.7%
  • HTML 25.7%
  • Dockerfile 7.6%