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.
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.
- Solution URL: https://github.com/Catevika/interactive-comments-react
- Live Site URL: https://interactive-comments-react.onrender.com
-
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
-
-
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
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'
- English porfolio - Catevika Portfolio EN
- French Portfolio - Catevika Portfolio FR
- Frontend Mentor - @Catevika
- Twitter - @dominique_bello