creditas / mx_challenge_frontend

Challenge Frontend - Creditas

The application is very simple, is about filling a credit card info which reflects each value into a credit card layout as shown below.

🧑‍🎨 Layout

• What to do?
  • Re-create it similar, be careful with the details (the little animations).
  • Layout the whole form from scratch, it means, you should create your own form components what satisfy the functionality shown above.
• How to do it?
  • You can use whatever you want (Vanilla CSS, Sass/Scss, JSS, etc.) Make it easy and comfortable for you.
  • Use a methodology to name your classnames.

🧑‍🔧 Functionality

• What to do?
  • While the user is typing the card info, change it in the card layout.
  • Stand out ( in the card layout ) the info that the user is typing.
  • Detect the the financial entity with the first digits of the card number, in this case detect VISA ( 4*** ), MASTERCARD ( [ 51 | 52 | 53 | 54 | 55 ] ** ) and AMEX ( 3*** ).
• How to do it?
  • Use React, typescript and some state manager.
  • Make it like components, we are also checking the file structure.

🤩 Extra Point

A good programmer always tests his code, so give it a chance to test your components.