Frontend Mentor - Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

Primary challange was to build the website as close as possible to the original design materials. I have gone one step further to connect to a hosted databse and to practise my learnig. It was quiet challanging to accomplish all the validation using useReducer hoock, but i was able to achieve the goal. 🫡

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
• Card number is saved in vercel server.

(please avoid inserting, your card details. Just fill up dummy information).

Screenshot

Deskpot view

Error messages

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• React
• Styled components
• Flexbox
• CSS Grid
• Mobile-first workflow, However only 2 device sizes were developed
• React - JS library
• Styled Components - For styles

What I learned

This project was really a good project for me. it helped me learning reducer, and dispatcher functions properly. at some stage I have connected the app with MongoBD data base, schema validation was really challanging, not to mention, the complexity of sending data between two different hostig Vercel (used for backend) and Netlify (used for fronend).

Continued development

I would like to add feates like edit and delete a card in the future. I feel still I need more knowledge on github. it was too much to commit and push every single changes during last minute change. That's real headech. code structure was not very organised in this project which gave me a hard time specially styled components and and making them responsive later on. I'll have to find a way to organise them differently.

Useful resources

• Axios Help - This helped me to solve cors problem. I really liked this pattern and will use it going forward.

Author

• Website - Md Ashraful islam
• Frontend Mentor - @Ashraf0011
• Twitter - @Ashraf_SIndex

Acknowledgments

I would like to thank my mentor Md Didarul Islam for his effort to answer all my silly questions. I't becomes really painful to satisfy my q's some times 🥴.