Frontend Mentor - Interactive card details form solution

Links

• Solution URL: solution
• Live Site URL: live

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Fill in the form and see the card details update in real-time
• Receive error messages when the form is submitted if:
  • Any input field is empty
  • The card number, expiry date, or CVC fields are in the wrong format
• View the optimal layout depending on their device's screen size
• See hover, active, and focus states for interactive elements on the page

Screenshot

Mobile View

Desktop view

My process

Built with

• MUI 5 React component library
• CSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• MUI 5 React component library - design system

What I learned

planning:

Planning a project is probably one of the most important steps. I often found myself wanting to dive right into coding before having any real idea of what I wanted to accomplish. But holding myself back coming up with an approach to build this project was key. Was it perfect planning? Definitely not, but some planning is better than none. Working with breakpoints was tricky at times, as there are so many screen sizes to consider. But I learned that it is better to go with general sizes than trying to adjust the CSS for each screen-size. There are just too many of them. With that in mind, I decided to follow the Bootstrap breakpoints, as this would give me a foundation to build the responsiveness of my app on.

priorities:

This kind of ties in with planning, but prioritising what or how to code first was difficult. Since I went with a mobile first approach for the design, I decided to do all the styling before the functionality. Which caught me off guard at times since I often had to refactor CSS when I got to the JavaScript part. It may be better to work on the layout and functionality of the app first, then finish off with styling.

form validation:

Instead of using a library, I wanted to implement my own validation strategies for practice and to better understand why form validation is important.

Continued development

I would like to come back to this project and implement a simple backend that stores the submitted data. I would also like to iterate on the responsiveness of the app as I believe it could be a lot better.

Useful resources

• react-folder-structure - This repo was a great example and gave me some ideas of how to structure the folders in my project.

• Kevin Powell - Kevin Powell's videos are a great resource for anything CSS related!

• css tricks - Great article on using flexbox.

Author

• Frontend Mentor - @Evomatic
• LinkedIn - Evan Trujillo