Frontend Mentor - Interactive comments section solution

This is a solution to the Interactive comments section challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
  • AI Collaboration
• Author

Overview

The challenge

Users should be 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

Bonus features (not implemented):

• If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed.
• Instead of using the createdAt strings from the data.json file, try using timestamps and dynamically track the time since the comment or reply was posted.

Screenshot

Links

• Solution URL: https://github.com/kbelltree/interactive-comments-section-main
• Live Site URL: https://interactive-comments-section-main-zeta.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• React
• TypeScript
• Vite
• date-fns
• ESLint
• Prettier

What I learned

HTML & Accessibility

• Practiced using semantic HTML elements to structure comments, replies, and interactive controls.

• Explored keyboard accessibility and native button behaviors, including Enter, Escape, and disabled states.

• Learned how the native <dialog> element handles modal behavior, including the top layer, keyboard interactions, and accessible naming with aria-labelledby.

• Integrated native dialog methods (showModal() and close()) with React's useRef and state management to implement delete confirmation.

CSS

• Improved my understanding of css selectors and pseudo-classes for styling specific elements and interactive states, including :hover, :active,:focus-visible, and:disabled

button:disabled {
  cursor: not-allowed;
}

React & TypeScript

• Practiced organizing components according to their responsibilities and managing state for comments, replies, and forms.

• Worked with TypeScript to define component props, handle optional properties, and safely manage form inputs and events.

• Improved form handling by separating reply metadata (replyingTo) from submitted content, validating input, and preventing duplicated or empty username prefixes.

• Gained experience improving existing code by reviewing component structure, simplifying logic, and debugging unexpected behavior.

Useful resources

• Prevent a page from scrolling while a dialog is open - This helped me fix the comments page scrolling behind dialog backdrop.

AI Collaboration

I used ChatGPT throughout the project to help troubleshoot TypeScript errors, review React component architecture, explore unfamiliar concepts, and evaluate code quality.

The discussions helped me understand underlying concepts, identify causes of unexpected behavior, and compare alternative implementation approaches before making changes.

Author

• Github - KBelltree