Submitted about 1 year ago

Interactive Comments

Mehmet Akif AKKUŞ• 170

@mehmetakifakkus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive comments section

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey, I would be glad if I hear your comments.

Visually, I tried to create the best visual results and try to make very similar to design as much as possible. Can I do much better? What is your advice or any comment?

First-level comments are ordered by their score, whereas nested replies are ordered by time added. Upvoting and downvoting scores on the first level comments changes the order.
Replying to a comment adds the new reply to the bottom of the nested replies within that comment.
A confirmation modal pops up before a comment or reply is deleted.
You can only edit or delete your own comments and replies.
Bonus1: System stores all the comments and replies on the localStore so the data persists when the browser refreshed.
Bonus2: System uses a timestamp and dynamically track the time since the comment or reply created. At first, there was a static createdAt string on data.json file.

Besides completing all the items in the challenge, I have stored comments and replies so that modified data persists when browser refreshed. For details, please visit my github:

Here are the tech stack:

React: A JavaScript library for building user interfaces.
Nextjs: A javascript framework works top on the React and uses all the benefits of
React. It helps for SSG, SSR and routing.
Tailwind CSS: A utility-first CSS framework that enables rapid UI development with pre-defined styles and components. Flexbox and CSS Grid have been used for the css layout. Typescript: Type safe version of Javascript.

Community feedback

Conan Crawford• 30

@cjcrawford

Posted about 1 year ago

The guidelines were definitely unclear around the up/down votes. The idea to flag a comment as able to be voted or not is definitely the right idea. Once you think about it from the context of the unique user on the page (again, a rather unspecified clarification), you might begin to see a few possible solutions.

I personally opted to track the user's comment votes by commentId: undefined | oneOf [-1, 1] meaning for each comment, the user could only have not voted, down voted, or upvoted. The only criteria in which the user can place a successful vote would be when commentVotes[commentId] is falsy.

Knowing the capability of the user's ability to vote also gives the benefit of disabling/enabling the arrows from a visual indicator too.

The CSS and html and UX works great though on first pass on my phone. Nice work!

Mehmet Akif AKKUŞ• 170

@mehmetakifakkus

Posted about 1 year ago

@cjcrawford Thank you for your time to investigate my project.

I liked your idea of storing comment votes in user's related object, so user can only vote one time for a certain comment. Making the one of the arrow enabled other disabled also visually helps the user. It is also a good idea.

But I think considering this is beyond the scope of this project. I want to keep it as it is for now. Thanks for your valuable comments

Alexander Hergert• 710

@alexander-hergert

Posted about 1 year ago

Great job on your project Mehmet. I also started to work on it and hope it will work out :D Your project works almost perfect but I have spotted a little bug.

I'm able to up- and downvote the comments more than once and same goes for my own comments. Maybe you could look in this issue in the future. We should probably only be able to upvote or downvote once on each comment.

best regards Alex

Mehmet Akif AKKUŞ• 170

@mehmetakifakkus

Posted about 1 year ago

@ChVoS1989 Thank you for your time to investigate my project.

I actually did not know what to do while upvoting and downvoting at the same time. My inners sense said that for each comment storing a flag to check change status. If flag is true then do not allow user to change it again. But I did not find any information about that on the project description and I kept as it is.

This project is so instructive and you can gain a lot of experience while developing.

I wish you good luck!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord