Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found

Submitted

Interactive Card Detail form with React

@DonHeidi

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I like the solution with react-hook-forms that allows you to write your custom components and integrate them with react-hook-forms' features like validation.

I also used GitHub Actions to build and host the site with GitHub Pages for the first time.

For the next time, I want to use a router like Tanstack router to navigate to show the different views (the form and the success)page.

What challenges did you encounter, and how did you overcome them?

Using vanilla forms was getting complex fast. After some research, I decided to try out react-hook-forms which was helpful.

I have had problems with the images being hosted on GitHub pages. Using the repository name as the base URL in the Vite configuration solved the issue.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord