Skip to content

Danny-Lenko/r-fm-comments-section

Repository files navigation

Interactive comments section

Table of contents

Overview

Functionality

Users are able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Create, Read, Update, and Delete comments and replies
  • Upvote and downvote comments
  • Use localStorage to save the current state in the browser that persists when the browser is refreshed.
  • Use timestamps and dynamically track the time since the comment or reply was posted.

App's intended behaviour:

  • First-level comments are ordered by their score, whereas nested replies are ordered by time added.
  • 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.
  • Adding a new comment or reply uses the currentUser object from within the data.json file.
  • You can only edit or delete your own comments and replies.

Screenshot

Links

My process

Built with

  • React - JS library
  • TS - JS superset programming language
  • Redux - JS apps state manager
  • MUI - React UI framework
  • Vite - Frontend build tool

What I learned

  1. set the cursor after the text on focus: StackOverflow

  2. render images dynamically in the dev mode in vite placed in the src folder: StackOverflow

Useful resources

  • Scrimba - The educational platform for learning Frontend with the huge community
  • Foxminded - The mentoring based educational platform with wide variety of technologies

Author