An interactive credit card form using React and TypeScript

An Interactive Credit Card Form is a React application that allows users to enter their credit card information and submit the form. The form is validated and the user is notified of any errors. The form is responsive and will adapt to different screen sizes.

• A MUI theme is used to create custom styles for components such as Button, Textfield and Input to ensure consistency in the design.
• I use Formik and Yup library for the fields validation.
• The project has a clear folder structure and is easy to navigate. I use TypeScript to ensure type safety and to make the code more readable and potentially scalable.

Difficulties in project building

• Creating a gradient outline for the fields on focus was a challenge since it is not a standard feature of CSS. I had to use a combination of pseudo-element and detailed selectors to achieve the desired effect.
• The Grid system in MUI is not fully customizable, so I used my own CSS to override the default styles.
• I achieved responsive design by using MUI media queries, and it's grid system.

Please, let me know if you have any questions or feedback.