All solutions

The biggest problem I had building the project was sharing state between Astro islands. At first, I used React Context to manage state app-wide, but that doesn't work in Astro. Instead, they provide their own version of app-wide state management called Nano Stores, which was a bit tricky to use at first, but got more familiar as I spent more time with it.

The only area in my code I wasn't completely positive on was the positioning of the cards when the filter bar is toggled. At first, I used absolute positioning for the header, but found that you could also use relative positioning for setting the top/right/left/bottom CSS properties. I'm still not sure if there was a better approach to this, but as it stands right now, the app looks like the challenge.

Unfortunately, I didn't focus too much on accessibility this time around, so there's not much styling in that department.

What did you find difficult while building the project?

One of the biggest challenges was creating number-only inputs. I wasn't too familiar with Regex, but with a bit of trial and error, I believe the expressions I implemented work well enough.

Which areas of your code are you unsure of?

My implementation for responsive styling could use a bit of work. I think I was trying to account for too many viewports, and I ended up getting lost in my own code. What is currently there seems OK, but I think I could have found better solutions.

The other area I'm not sure of is displaying the values for the total and tip values per person. Large numbers will lead to overflow, and I wasn't sure if I wanted to decrease the font size in accordance to the amount of numbers in the string, or just add trailing ellipses.

Do you have any questions about best practices?

How would you tackle responsive layouts? Would you consider display width only, or display height as well?

How far off the mark is my solution to the actual solution (i.e. card is too wide / tall, colors aren't matching, etc...)?

• Which elements in the component(s) am I off on?

  • Was the width of the form too wide or narrow?
  • Was the background color incorrect?
  • etc...

• How could I have better organized my "Rating.tsx" component? I bundled a lot of code in there, and it does look a bit cluttered. Any suggestions are welcomed.

• Anyone working with Astro know how to reset the form on refresh?

  • After submitting the rating, the same rating that I selected stays selected when I refresh the page
  • The form only resets when I exit the site and open it up again
  • I'm not sure if this is just me, or if testers will experience this too.

• I wasn't able to test this challenge with a screen reader, so it'd be nice if someone with an accessible tool to let me know if this project is accessible-approved

• Any other feedback I might not have addressed is welcomed!

• In my Card component, I had a lot of conditions to display certain styles and values if the props met those conditions. Would this structure be acceptable, or would it have been better to break the Card down into sub components to be more manageable to read?

• I think I was a bit meticulous about having multiple nested objects in my data.ts file. It definitely shows in my Card component, as the className of almost every tag were quite long. At that point, should I have created utility classes, like in TailwindCSS, rather than follow the BEM style? Or, would the BEM still work, just that I would need to tweek my structure a bit more efficiently?