Technical Assesment

Technical Requirements:

  • Use React, node.js and typescript for your application
  • Authentication and DB are not needed
  • Spend around 3 hours on this project

Functional Requirements:

  • The main purpose of this application is to create a webpage to validate a Credit Card number
  • Use the Luhn checksum algorithm for validation
  • Validation should happen in the back-end (API) not the frontend

Minimal UI Requirements:

  • At least one text box should be included for credit card input
  • Screen should display if the number is valid or not

Do the following commands

  • npm install
  • npm run dev (to start)
  • npm run test (to run test scripts)

Tech Stack

  1. React
  2. Typescript
  3. Node
  4. Remix
  5. Tailwind

TODO

  1. Improve UI
    1. Allow credit card input to take different amounts of characters to allow for all card types
    2. Autoformat input to add a space every 4 characters to improve readability
    3. Make CreditCard input and Alerts their own components
    4. Improve Accessibility
  2. Move validation code into its own file
  3. Add unit tests for UI
Screenshot 2024-01-13 at 9 26 09 AM Screenshot 2024-01-13 at 9 26 29 AM Screenshot 2024-01-13 at 9 26 38 AM