Responsive React contact form with JSON-driven validation and Tailwind

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

I am most proud of completing my first React-based Frontend Mentor challenge and understanding how React manages the UI through state instead of direct DOM manipulation.

I also learned a lot about controlled components, custom validation, error states and rendering form fields from a JSON structure.

Next time, I would plan the component structure earlier. In this project, I started by building most of the logic inside App.jsx, which helped me understand the flow, but it also made the code more complex. I would like to refactor the form into reusable components, such as a generic FormField, to make the logic cleaner and reduce nested conditional rendering.

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

The main challenge was changing my mindset from vanilla JavaScript DOM manipulation to React state-driven rendering. Instead of selecting elements manually and changing their classes, I had to think in terms of state: form data, validation errors and success state.

Another challenge was handling different types of form fields. Text inputs, textarea, radio buttons and checkbox fields all needed slightly different logic, especially for value and checked. I overcame this by using controlled components and a shared handleChange function.

I also found the error state challenging because the visual feedback had to depend on the validation result. I solved this by storing validation messages in an errors object and using conditional rendering and dynamic Tailwind classes to update the UI.

By the end of the project, I understood more clearly why reusable components and a better planned structure would make the code easier to maintain.