Teste Técnico Frontend

Snowdog

Javascript, Node

Poznan - Polônia

Ecommerce

50 - 200

A Snowdog é uma agência digital criativa especializada em soluções de comércio omni-channel e mobile

Sobre o Teste

Para o desafio técnico Snowdog Front-end Recruitment test, você deverá utilizar o framework [AdonisJS](https://adonisjs.com/), um framework full stack Node.js, para recriar um formulário de checkout com validação em JavaScript. Você não precisa escrever nada para o backend e não é necessário ter experiência prévia com Adonis ou frameworks similares. O objetivo é recriar o formulário de checkout com validações personalizadas em JS e enviar os dados validados para o endpoint `POST /order`, exibindo mensagens de sucesso/erro baseadas na resposta da REST API. Você pode escolher a forma de escrever estilos que preferir e o Adonis suporta PostCSS, SASS, Less e Stylus para estilização. O desafio exige a formatação correta para dados como CEP, número de telefone, cartão de crédito, CVV e data de expiração.

Instruções do Teste

Snowdog Front-end Recruitment test

  • Please use real Github accounts.
  • We will not be responding to any questions about this test. All candidates will receive the same set of information for fairness.
  • This test is not a representation of the tech stack we are using in real projects.

Before you start

  • Fork this repository; it needs to stay publicly available on Github.
  • The test is based on AdonisJS, a full stack Node.js framework, but you don't need to write anything for the backend, nor have any experience with Adonis or similar frameworks.
  • After installing the dependencies and running npm run dev, you should see a start page on http://localhost:3333. If something goes wrong, you are probably using the wrong version of Node.js.

Task

Take a look at the design. Your task is to:

  • Recreate the checkout form and provide your own JS validation.
  • Send validated form data to the POST /order endpoint and show a success / error message based on the REST API response.

Hints

  • Use any way of writing styles you are comfortable with.
  • By default Adonis supports PostCSS, SASS, Less and Stylus and you need to enable one of them, but it's just Webpack under the hood, so feel free to hook whatever you like the most.
  • Endpoint accepted data formats:
    • Postal code: 00000
    • Phone number: 000000000
    • Credit card: 0000000000000000
    • CVV: 000
    • Exp. date: 00/00

Good luck 🤗