{"id":25247192,"url":"https://github.com/catevika/interactive-comments-react","last_synced_at":"2026-04-29T16:33:03.154Z","repository":{"id":200775987,"uuid":"706199117","full_name":"Catevika/Interactive-comments-react","owner":"Catevika","description":"This is a solution to the Interactive-comments - CLIENT - challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.","archived":false,"fork":false,"pushed_at":"2023-10-27T18:18:48.000Z","size":641,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T02:57:26.153Z","etag":null,"topics":["material-ui","momentjs","react-plugin","react-redux","react-router-dom-v6","redux-toolkit","rtk-query","vitejs"],"latest_commit_sha":null,"homepage":"https://interactive-comments-react.onrender.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Catevika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-17T13:45:05.000Z","updated_at":"2024-06-20T09:24:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"554aec2f-9190-473d-88b2-ad9f614aeb9f","html_url":"https://github.com/Catevika/Interactive-comments-react","commit_stats":null,"previous_names":["catevika/interactive-comments-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catevika%2FInteractive-comments-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catevika%2FInteractive-comments-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catevika%2FInteractive-comments-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catevika%2FInteractive-comments-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Catevika","download_url":"https://codeload.github.com/Catevika/Interactive-comments-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406078,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-ui","momentjs","react-plugin","react-redux","react-router-dom-v6","redux-toolkit","rtk-query","vitejs"],"created_at":"2025-02-12T02:57:29.382Z","updated_at":"2025-10-06T04:06:28.783Z","avatar_url":"https://github.com/Catevika.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Interactive comments section solution - CLIENT\n\nSee [interactive comments SERVER](https://github.com/Catevika/interactive-comments-backend)\n\nThis is a solution to the [Interactive comments section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Frontend Mentor - Interactive comments section solution - CLIENT](#frontend-mentor---interactive-comments-section-solution---client)\n  - [Table of contents](#table-of-contents)\n  - [Overview](#overview)\n    - [The challenge](#the-challenge)\n    - [Screenshot](#screenshot)\n    - [Links](#links)\n  - [My process](#my-process)\n    - [Built with](#built-with)\n    - [What I learned](#what-i-learned)\n    - [Useful resources](#useful-resources)\n  - [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the app depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Create, Read, Update, and Delete comments and replies\n- Upvote and downvote comments\n- **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.\n- **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.\n\n### Screenshot\n\n![](./screenshot.png)\n\n### Links\n\n- Solution URL: [https://github.com/Catevika/interactive-comments-react](https://github.com/Catevika/interactive-comments-react)\n- Live Site URL: [https://interactive-comments-react.onrender.com](https://interactive-comments-react.onrender.com)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Desktop-first workflow\n- For the Backend:\n\n  - [Node.js](https://nodejs.org/fr) - Javascript runtime environment\n  - [Express.js](https://expressjs.com/) - React framework\n  - [express-async-handler](https://www.npmjs.com/package/express-async-handler) - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers\n  - [Morgan](https://www.npmjs.com/package/morgan) - HTTP request logger middleware for Node.js\n  - [MongoDB](https://www.mongodb.com/en-us/atlas) Integrated suite of cloud database and data services\n  - [Mongoose](https://mongoosejs.com/docs/guide.html) mongodb object modeling for node.js\n\n- For the Frontend:\n\n  - [Vite + Plugin React](https://vitejs.dev/) - Development environment + JavaScript library\n  - [React-router 6](https://reactrouter.com/en/main) - Client side routing\n  - [Redux-toolkit / RTK Query](https://redux-toolkit.js.org/rtk-query/overview) - Predictable State Container for JavaScript Apps toolset / Powerful data fetching and caching tool\n  - [Material UI](https://mui.com/material-ui/react-dialog/) - Delete dialog box with customized styles\n  - [TypeScript](https://www.typescriptlang.org/docs/) - JavaScript with syntax for types\n  - [moment](https://momentjs.com/) - Used for for comments elapsed time since creation\n    To launch backend and frontend with one command line:\n\n  - [concurrently](https://www.npmjs.com/package/concurrently) - Run multiple commands concurrently\n\n### What I learned\n\n- This project has been **really challenging**\n- 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**\n\n- The current user can:\n\n  - **read** and **write** comments and replies from **others**,\n  - **upvote** or **downvote** comments \u0026 replies,\n  - **send** replies to comments **and replies**,\n  - **edit**, **update** or **delete** his **own** comments and replies\n\n- Finally, I made it on my own, **without any help**, from start to finish\n- It has given me the opportunity to learn **Redux-toolkit / RTK Query** with **Typescript** \u0026 **Material UI**\n- I am proud of the structure I have ended up with to get a code as **DRY** as possible\n\n### Useful resources\n\nAll the documentation listed above.\n\n**POV**: **Redux-toolkit / RTK Query** is not the clearest one even if you are a Redux expert 😉\n\n**IMPORTANT**:\nTo be sure that **Immer** will work properly with **RTK Query**, create or add to your `.eslintrc.cjs` file:\n\n```\noverrides: [\n  {\n    files: ['src/features/api/*.slice.ts'],\n    / avoid state param assignment\n    rules: { 'no-param-reassign': ['error', { props: false }] },\n      }\n]\n```\n\n\u003cem\u003eFeel free to replace\u003c/em\u003e `['src/features/api/*.slice.ts']` \u003cem\u003ewith your preferred file pattern - eg. 'src/\\**/*Slice.ts'\u003c/em\u003e\n\n## Author\n\n- English porfolio - [Catevika Portfolio EN](catevika.github.io/Catevika_Portfolio-EN/)\n- French Portfolio - [Catevika Portfolio FR](catevika.github.io/Catevika_Portfolio-FR/)\n- Frontend Mentor - [@Catevika](https://www.frontendmentor.io/profile/Catevika)\n- Twitter - [@dominique_bello](https://twitter.com/dominique_bello)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatevika%2Finteractive-comments-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatevika%2Finteractive-comments-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatevika%2Finteractive-comments-react/lists"}