Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keepserene/interactive-comments-section-fem
It's a challenge from Frontend Mentor: https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9
https://github.com/keepserene/interactive-comments-section-fem
Last synced: 17 days ago
JSON representation
It's a challenge from Frontend Mentor: https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9
- Host: GitHub
- URL: https://github.com/keepserene/interactive-comments-section-fem
- Owner: KeepSerene
- Created: 2024-11-29T21:18:05.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-04T15:41:16.000Z (about 2 months ago)
- Last Synced: 2024-12-04T16:38:04.189Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://commenting-connoisseur.vercel.app
- Size: 382 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Commenting Connoisseur 💬
## Overview
Commenting Connoisseur is an interactive, feature-rich comments section web application built with React. It provides a seamless user experience for managing comments and replies with full CRUD (Create, Read, Update, Delete) functionality.
## 🖼️ Screenshot
_A full view of the interactive comments section showing comments, replies, and user interactions_
## 🌟 Features
- **Interactive Comments**: Add, edit, delete comments and replies
- **Voting System**: Upvote and downvote comments
- **Responsive Design**: Fully responsive across all device sizes
- **Accessible**: Follows web accessibility guidelines
- **Persistent Storage**: Uses localStorage to save user interactions
- **Toast Notifications**: Provides feedback for user actions
## 🛠 Tech Stack
- **Frontend**: React.js
- **Styling**: CSS (with CSS Variables)
- **State Management**: React Context API
- **Notifications**: React Toastify
- **Build Tool**: Vite
- **Linting**: ESLint
## 🎨 Styling
- Fully customizable via CSS variables
- Responsive design
- Accessible color contrasts
- Custom scrollbar
- Text selection styling
## 🚀 Getting Started
### Prerequisites
- Node.js (v18+)
- npm or yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/KeepSerene/interactive-comments-section-fem.git
```
2. Install dependencies
```bash
npm install
```
3. Run the development server
```bash
npm run dev
```
## 🔮 Future Updates
- [ ] Backend integration
- [ ] User authentication
- [ ] Database storage (MongoDB/Firebase)
- [ ] Real-time commenting
- [ ] Enhanced moderation tools
- [ ] Social media sharing of comments
## 👤 Author
**Dhrubajyoti Bhattacharjee**
- GitHub: [@KeepSerene](https://github.com/KeepSerene)
- Portfolio: [Dhrubajyoti Bhattacharjee](https://math-to-dev.vercel.app/)
- LinkedIn: [Dhrubajyoti Bhattacharjee](https://linkedin.com/in/yourusername)
## 🌐 Live Demo
[View Live Demo](https://commenting-connoisseur.vercel.app/)
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🙏 Acknowledgements
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [React Toastify](https://fkhadra.github.io/react-toastify/)
- Frontend Mentor for the challenge inspiration