Dessert Store with React, React Router, and Headless UI

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

I'm proud of using React Router for the first time with the help of this video. I really worked to make this accessible and user-friendly, even straying from the design where needed. For example, I used Headless UI for the modal to make sure it had all the accessiblity pieces. And in the design, there wasn't a button to close the modal, only to "Start a New Order" and that seemed like a poor UX to me, so I added a close modal button. But that opened a whole new challenge because it didn't make sense for the user to close the modal and then still be able to edit their order after it has been confirmed. That's why I used React Router to redirect them to a Order Confirmed page when they closed the modal. This seemed easier and like a better UX than disabling every button on the original page.

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

I learned useContext halfway through working on this project and that was somewhat confusing, especially trying to manage state in separate parts of the application without using it at first and then migrating to it later. This is one of my first React projects ever so I spent a lot of time thinking about how to separate it into components. The Add to Cart button that transforms into a toggle was especially tricky, but I ended up creating two sub components within my Add to Cart component. One called and one called .

When I've looked into Tailwind in the past, I hated the idea. But with this project - specifically having very similar but slightly different components in 3 different places, I can see why it would be helpful. I was making new classes just to apply slight changes and keeping 90% the same as the other similar components. I know I can also do this by passing a few styles in through props.

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

The overall organization of the website. The basic concepts of React because I am just starting to make projects with it.