Credit Card Display and Form

Description

This project is a React application that displays a credit card with its details and includes a form to input the card information.

Screenshots

Technologies Used

• 
• 
• 
• 

Features

• Display of credit card details including card number, cardholder name, expiry date, and CCV.
• Input form for entering credit card information.
• Real-time update of card details as they are entered in the form.
• Automatic formatting of the card number to include two spaces after every four digits.

Components

MainPage

The main component that holds the state for the card details and renders the Cards and Form components.

Cards

A component that displays the front and back views of the credit card using the provided details.

FrontCard

A component that displays the front view of the credit card, showing the card number, expiry date, and cardholder name.

BackCard

A component that displays the back view of the credit card, showing the CCV.

Form

A component that provides input fields for entering the card number, cardholder name, expiry date, and CCV. It updates the state in MainPage in real-time as the user types.

Future Enhancements

• Add validation for card number, expiry date, and CCV.
• Improve the UI/UX of the form and card display.
• Add animations for card flip to show the back view when entering the CCV.
• Support for multiple card types with corresponding card designs.