https://github.com/anshuldhakate/comment-system-app
This comment system application was built with React, Firebase, and ReactQuill. Users can sign in with Google, post comments, reply to comments, and upload files. The application uses Firestore to store comments and Firebase Storage to store file attachments.
https://github.com/anshuldhakate/comment-system-app
firebase react-quill reactjs
Last synced: about 2 months ago
JSON representation
This comment system application was built with React, Firebase, and ReactQuill. Users can sign in with Google, post comments, reply to comments, and upload files. The application uses Firestore to store comments and Firebase Storage to store file attachments.
- Host: GitHub
- URL: https://github.com/anshuldhakate/comment-system-app
- Owner: Anshuldhakate
- Created: 2024-08-17T15:40:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-21T09:07:05.000Z (almost 2 years ago)
- Last Synced: 2025-05-21T07:47:44.031Z (about 1 year ago)
- Topics: firebase, react-quill, reactjs
- Language: JavaScript
- Homepage: https://comment-section-e80db.web.app/
- Size: 235 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Comment System Application
## Deployed Link
https://comment-section-e80db.web.app/
## Description
This comment system application was built with React, Firebase, and ReactQuill. Users can sign in with Google, post comments, reply to comments, and upload files. The application uses Firestore to store comments and Firebase Storage to store file attachments.
## Features
- Google Authentication: Sign in with Google to access the comment system.
- Commenting: Post new comments with rich text support using ReactQuill.
- Replies: Reply to comments, with nested replies up to two levels.
- File Attachments: Upload and attach files (e.g., images) to comments.
- Live Updates: Real-time comment updates are available using Firestore.
- Responsive Design: Fully responsive UI for seamless use across devices.
## Technologies Used
- **Frontend**: React, ReactQuill, CSS
- **Backend**: Firebase (Firestore, Authentication, Storage)
- **Hosting**: Firebase Hosting (if applicable)
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
- A Firebase project set up and configured.
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/Anshuldhakate/Comment-System-App.git
cd your-repo-name
```
2. **Install dependencies:**
```bash
npm install
```
3. **Set up Firebase configuration:**
- Create a `firebase.js` file in the `src` directory with your Firebase configuration:
```javascript
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const firestore = firebase.firestore();
const storage = firebase.storage();
const googleProvider = new firebase.auth.GoogleAuthProvider();
export { auth, firestore, storage, googleProvider };
```
4. **Run the application:**
```bash
npm start
```
The application will be available at `http://localhost:3000`.
## Usage
1. **Sign In:** Click on "Sign in with Google" to authenticate using your Google account.
2. **Post a Comment:** Use the comment input area to post a new comment. You can format your comment with rich text and attach files.
3. **Reply to Comments:** Click "Reply" on any comment to post a reply. Replies will be nested under the parent comment.
4. **File Attachments:** Attach images or files to your comments.
## Contributing
Feel free to submit issues and pull requests. Contributions are welcome!
1. **Fork the repository** and clone it to your local machine.
2. **Create a new branch** for your changes.
3. **Make your changes** and test thoroughly.
4. **Submit a pull request** with a clear description of your changes.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact
For questions or feedback, please contact [anshuldhakate11@gmail.com](mailto:anshuldhakate11@gmail.com).