https://github.com/ikennarichard/interactive-comments-section
This is a web app that allow users to make comments and add replies to a comment. You can also upvote and downvote comments, Built with React and Redux
https://github.com/ikennarichard/interactive-comments-section
frontendmentor-challenge react redux vite
Last synced: 3 months ago
JSON representation
This is a web app that allow users to make comments and add replies to a comment. You can also upvote and downvote comments, Built with React and Redux
- Host: GitHub
- URL: https://github.com/ikennarichard/interactive-comments-section
- Owner: ikennarichard
- License: mit
- Created: 2023-08-13T19:36:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-11T12:33:43.000Z (almost 3 years ago)
- Last Synced: 2025-04-04T19:39:27.988Z (about 1 year ago)
- Topics: frontendmentor-challenge, react, redux, vite
- Language: JavaScript
- Homepage: https://rich-interactive-comments.netlify.app
- Size: 409 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Interactive comments section solution
This 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.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## 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/ikennarichard/Interactive-comments-section)
- [Live site](https://rich-interactive-comments.netlify.app)
## My process
### Built with
- CSS Grid
- Mobile-first workflow
- Redux
- [React](https://reactjs.org/) - JS library
### What I learned
I enhanced my proficiency in React and Redux while also gaining valuable experience working with JSON files.
### Continued development
Enhance skills by delving into advanced React concepts like custom hook and optimizing rendering performance.
Explore redux middleware for asynchronous actions, mastering selectors and understanding immutability.
### Useful resources
- StackOverflow
- Mozilla Developer Network
- Frontend Mentor projects
## Author
- [Ikenna Richard](https://ikennarichard.netlify.app)
- [@ikennarichard](https://www.frontendmentor.io/profile/ikennarichard)
## Acknowledgments
- Frontend Mentor
- [Microverse](https://www.microverse.org)
- Everyone thats given me a lesson!