All solutions

In order to make this project more realistic and usable, I added user authentication to the project to make sure a given user can post comments and replies with their chosen name/handle. I haven't added the ability to upload profile images yet, but that will come down the line to complete the project.

I also made some design alterations to ensure the user authentication is being utilized to its full extent, such as disallowing a user from editing or deleting feedback that they did not generate and adding a login/signup modal. There are other design additions, but I kept the vast majority of the project true to the design spec.

If you'd like to interact with the site, I've provided a demo login that you can populate by clicking the button at the bottom of the modal that comes up when you click "Log in"

I used this project as an excuse to practice transitions and my technique for form validation. If anyone has some solid methods for form validation that are more robust than mine, I'd love to learn your method.

The most difficult part of this project would be the drag-and-drop functionality by a mile. After trying out a few different approaches that attempted to combine my methods for form validation, state management, and the reordering functionality, the solution I found was to 'clone' the node when the specific link is selected and reposition it based on mouse position, reordering the links when the selected link's position crossed certain thresholds on the page.

Maintaining a consistent layout while this is happening also proved difficult, however I found a solution that relied mainly on CSS. This solution relies on the ':has' selector as well as data-attributes for whether the links container contained a cloned node.

This project overall was fairly straight-forward, however the top-border of the "Instagram Card" was actually a challenge at first. The other cards used solid colors as their top-borders, so that was pretty easy, however this card used a gradient which I knew would trip me up. After doing a little research, I resorted to using a psuedo-element positioned at the top with the same width as the other borders. Additionally, I set the top left and right border radii as the same as the other cards, which I was unsure about to begin with but ultimately it worked out.

My question is, does there exist a better way to go about doing this? I guess my main concern is that this isn't necessarily a solution that I find to be modular enough to put into larger projects.