All solutions

The most difficult part of this was definitely managing state between modals and the main page when submitting pledges and changing the statistics for the project. Transitioning between the modals was also challenging, as well as organizing the components effectively. At one point, I had 3 different versions of both of my modals made because I initially call them inside of the button component that triggers them open.

I opted to use the Context API to handle the quantity state, and frankly, it was somewhat out of laziness because prop-drilling the values and functions to update them down would have been tedious. The only downside I could see to that approach is performance, but this is pretty lightweight as a website overall so I'm not worried about that aspect.

In terms of feedback, I'd like any on React.js best practices, where I could have potentially refactored for more re-usability, and any layout issues when moving between screen sizes.

• I'm proud of how the mobile menu came out, but my solution is highly coupled to manipulating the display property, which you can't run transitions on in CSS. Any suggestions for a better way to approach the mobile menu so I can add transitions?

The most difficult part was definitely getting the circles surrounding numbers to shape up correctly (I still think they look a smidge off). Would also be curious about how to make this more accessible and if I missed any pending/error states that could spruce it up a smidge.

I used Grid and "place items center" to center the entire component in the middle of the viewport. However, it's still a bit "off" center, even if I try to fudge positioning with margin utility classes. Any tips for getting this centered correctly?

Feedback welcome on the following areas:

• Semantic HTML. Did I structure my HTML well here? How can I improve the ways I chose to write my markup?
• Usage of padding/margin throughout the component. I felt like some of my code here was "hacky" but maybe I'm overthinking it a smidge.