Skip to content
Submitted almost 2 years ago

Interactive Comments

react, tailwind-css, next
Mehmet Akif AKKUŞ•170
@mehmetakifakkus
A solution to the Interactive comments section challenge
Preview (opens in new tab)Code (opens in new tab)

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.
Code

Please log in to post a comment

Log in

Community feedback

  • Conan Crawford•30
    @cjcrawford

    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!

  • Alexander Hergert•710
    @alexander-hergert

    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

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