This project taught me invaluable lessons on planning before coding

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

So this took me 2 (yes, that long) days. A lot of challenges came up on this one, but I am proud to have stuck through it and got it to the finish line.

Forced myself to keep using React x Tailwind. I'm starting to get the hang of Tailwind CSS for responsive designs and translating my vanilla CSS knowledge with ease (although I hit an epic fail on the React part).

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

This part is definitely going to be very long so I hope I won't hit the max char count :)

I'm splitting my challenges into these 2 categories:

Design

• I've always found designing forms too painful. I figured that since I am already using Tailwind I'd give tailwindcss-forms a go. Boy was that a mistake. I could not target what I intended to style so I just reverted back to styling the generic HTML form elements.
• Radio button styling. I tried the trick of creating my own custom radio but I could not get it to switch, so after a few hours I decided to use the default HTML radio buttons.
• The input fields have an icon design. This is another painful part of the design process. I figured absolute positioning a span element would do the trick. Finally got it to work after another few hours.
• I could not get the hover states exact as well. Also, when I wrapped up the logic of the app I could not get some transitions to work (such as fading in the results instead of immediately appearing).

Logic

• Still using React for my core logic. I did take some time to structure my components, but realized later on that some of them had to be moved around due to needing access to state.
• I was too overconfident with trying out useReducer and immediately figured out I was biting more than I could chew. I could not get access to any of my states from other components, since the reducer was residing in my form - way down the component tree. Another few hours of troubleshooting until I decided to simply use useState.
• Since my forms are controlled elements in React, I basically created another issue with my validation. I could not leverage HTML form validation and had to come up with my own.

What specific areas of your project would you like help with?

Transitioning React components, and best practices for handling forms (state, validation and styling) in React.