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