Frontend Mentor - Interactive comments section solution - CLIENT

See interactive comments SERVER

This is a solution to the Interactive comments section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Interactive comments section solution - CLIENT
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • 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: 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.
• Bonus: 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/Catevika/interactive-comments-react
• Live Site URL: https://interactive-comments-react.onrender.com

My process

Built with

• Semantic HTML5 markup

• CSS custom properties

• Flexbox

• Desktop-first workflow

• For the Backend:

  • Node.js - Javascript runtime environment
  • Express.js - React framework
  • express-async-handler - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
  • Morgan - HTTP request logger middleware for Node.js
  • MongoDB Integrated suite of cloud database and data services
  • Mongoose mongodb object modeling for node.js

• For the Frontend:

  • Vite + Plugin React - Development environment + JavaScript library

  • React-router 6 - Client side routing

  • Redux-toolkit / RTK Query - Predictable State Container for JavaScript Apps toolset / Powerful data fetching and caching tool

  • Material UI - Delete dialog box with customized styles

  • TypeScript - JavaScript with syntax for types

  • moment - Used for for comments elapsed time since creation To launch backend and frontend with one command line:

  • concurrently - Run multiple commands concurrently

What I learned

• This project has been really challenging

• The result is a full-stack comments section, fully responsive and interactive. As a bonus, the time since the comment or reply was posted is also dynamic

• The current user can:

  • read and write comments and replies from others,
  • upvote or downvote comments & replies,
  • send replies to comments and replies,
  • edit, update or delete his own comments and replies

• Finally, I made it on my own, without any help, from start to finish

• It has given me the opportunity to learn Redux-toolkit / RTK Query with Typescript & Material UI

• I am proud of the structure I have ended up with to get a code as DRY as possible

Useful resources

All the documentation listed above.

POV: Redux-toolkit / RTK Query is not the clearest one even if you are a Redux expert 😉

IMPORTANT: To be sure that Immer will work properly with RTK Query, create or add to your .eslintrc.cjs file:

overrides: [
  {
    files: ['src/features/api/*.slice.ts'],
    / avoid state param assignment
    rules: { 'no-param-reassign': ['error', { props: false }] },
      }
]

Feel free to replace ['src/features/api/*.slice.ts'] with your preferred file pattern - eg. 'src/**/*Slice.ts'

Author

• English porfolio - Catevika Portfolio EN
• French Portfolio - Catevika Portfolio FR
• Frontend Mentor - @Catevika
• Twitter - @dominique_bello