Interactive card details form using React, TypeScript and Sass modules

Challenge overview

With this challenge I wanted to practice React but using TypeScript instead of vanilla JS. This is my first ever project using TypeScript in React, and it was interesting to discover how React is typed because I feel that helps a lot in understanding more the code I'm doing, which is the thing I love the most about TypeScript.

Also, this was my first time creating a 'real' form where I managed things like input validation and overall form validation, which I felt was something I really lacked because I think that correct form validation is a really important skill any frontend dev should know.

Things I wonder about my code

• I kind of feel that my code is a bit long, taking into account that the project isn't complex, but at the same time I like how it came to be.
• My CSS classes and component names could be better, but I didn't wanted to overthink and waste too much time with that.
• I tried to separate the components with their main logic as much as I could, which I feel I succesfully managed to do.
• Taking into account that this was a card info form, I did some research about the topic and read about the Luhn algorithm to help users with card number validation at the frontend, but I didn't implement it because the idea of this form is not to input real data, but could be a nice addition in the future.
• Responsive layouts always felt kind of annoying to me, but this was the first time I actually felt it was very easy to implement.

What I learned with this challenge

• Input validation
• Form validation
• Using TypeScript with React
• useContext
• React's special types