All solutions

This project was my first time using React, Next, and Tailwind... so a lot of new tooling and ideas.

In particular, I'm unsure about best practices when using Tailwind and custom colors that aren't really part of the app's theming (here, the background colors of the cards). I extended the colors from tailwindconfig.js, but I'm interested in hearing if there is a more correct way to handle this.

I'm also interested in general tips using React and/or Next.

This was a very interesting project! I really feel like I have a better understanding of CSS pseudo-elements and the javascript event model.

I'm sure the javascript is very messy, so any suggestions about idiomatic javascript are appreciated!

I had some difficulty choosing a breakpoint for the mobile vs desktop display in particular, since small images at the bottom of the page stretch quite a lot. Is there a nice way to preserve the images aspect ratio across different screen sizes while maintaining the relative division between the image and the text in those boxes?

I spent quite a bit of time thinking about semantic HTML for this project. I have a couple of questions regarding best practices:

• I treated the individual notifications as <li> in an <ol>. For this project, this just leads to a more nested HTML structure, but was it still "correct" to do this, or should I have just treated the notifications as individual <section>'s?
• I couldn't figure out a nice tag for the private message. I eventually went with <p tabindex="0"> so that it was still focus-able. Was there a better choice for this element?