Aims

This is a challenge from FrontEndMentor, a website that provides the resources and some screenshots/Figma files and requires you to recreate the website.

My main goals were:

• - Working on mobile/web designs that have very different designs.
• - Working on form validation and creating a robust front-end system that will reject invalid inputs.
• - Live updating an interactive component (card design).

Architecture

This was a very simple project in terms of architecture, I used Vite with React and Typescript and then built the app and deployed it to Github Pages as static website.

Responsiveness

This challenge helped me on my responsiveness when the design doesn't translate exactly between mobile and desktop.

There are several viewpoints to ensure that the size of the card and the position is consistent with the screen width.

Form validation

An important aspect I wanted to focus on when building this application.

All fields are set to required so by default an error will be shown if a user attempts to submit without filling any of the fields.

For the cardholder's name, I disallowed any number/symbol input so the user can only type in a name.

For card number, the user must type in a 16 digit number, any other input type (alphabetical/symbols) is disallowed. Once the digit has been typed, I used the Luhn Algorithm which checks to ensure that someone hasn't typed in a random set of 16 digits.

Expiry date and month are both set to validate when there is exactly 2 digits and once again only allows numerical inputs.

CVC is set to validate when there is exactly 3 digitals and only allows numerical inputs.