Building large scale application is more difficult than many people understand or expect. Join me in this long running series where I set out to duplicate one of the most popular social media platforms ever creating using Java, Spring Boot, Spring Security, PostgreSQL data, React JS web application framework and more.
In this episode we work on fixing the weird spacing issue with the hover effect of the message component that we ran into at the end of the last episode. To do this we created a new component for the message hover components, extracting all the necessary code out of the message component, including the CSS. Once we finished the code for the new component, we had to make a small change to the MessageConversationImage because it was found that gray message images are actually smaller than blue message images. Finally after all of that we refactored the message component to display the hover effect center on only the message content rather than the message content and the reaction container. After refactoring we tested to make sure everything looked good and fixed a small css bug.