Interactive Card Details Form Solution

Hello Frontend Mentor Community,

This is my solution for the Interactive Card Details Form challenge. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, React Hook Forms, Next.js, and TailwindCSS.

Difficulties Encountered:

Component rendering: Initially, I was struggling to have the text on credit cards update in real time from the form inputs. I figured out that the forms were re-rendering on every input change. Decoupling the form from the page into a component, and then passing in the state as a prop fixed it!

Technologies Used:

• React
• React Hook Form
• Next.js
• TailwindCSS