Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nadavbitran/comment-section-web-app

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/nadavbitran/comment-section-web-app
Owner: NadavBitran
Created: 2023-12-24T17:06:26.000Z (11 months ago)
Default Branch: main
Last Pushed: 2023-12-28T15:50:17.000Z (11 months ago)
Last Synced: 2024-05-07T09:53:56.657Z (6 months ago)
Language: HTML
Size: 2.85 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Comment Section App 🚀

Welcome to the Comment Section App, a fullstack application that allows users to engage in conversations through a comment section component. 

Additionally, the app features a contact page for user inquiries, an about page providing more information about the project, and a profile page displaying user details, statistics, and comment history.

![Home Page](./Pictures%20And%20Videos/Main%20Page.png)

## Table of Contents

- [Features](#features)

- [Live Site](#live-site)

- [Tech Stack](#technologies-and-libraries-used)

- [Acknowledgements](#acknowledgements)

## Features

### Comment Section Page 💬

- Users can engage in real-time conversations by posting comments and replies to each other.

- Real-time updates enable users to see new comments and replies as they are posted.

- Users can express their opinions by liking or disliking other posts within the comment section.

- The comment section provides a dynamic and interactive user experience.

![Comment Section Page](./Pictures%20And%20Videos/Comment%20Section%20Page.png)

### Contact Page 📧

- Allows users to submit inquiries and messages to the contact team for prompt assistance.

- The contact form includes fields for name, email, subject, and a description, ensuring comprehensive user feedback.

![Contact Page](./Pictures%20And%20Videos/Contact%20Page.png)

### Profile Page 👤

- Displays personalized user details, including username, avatar, and registration information.

- Presents statistics such as the number of comments posted, liked posts, and overall user engagement.

- Features a comment history section, showcasing the user's past interactions within the comment section.

![Profile Page](./Pictures%20And%20Videos/Profile%20Page.png)

### About Page ℹ️

- Provides an in-depth overview of the project, its objectives, and the technologies used.

![About Page](./Pictures%20And%20Videos/About%20Page.png)

### Design Support 📱💻

- The website is designed to support a wide range of screens, including phones, tablets, laptops, and desktop computers.

- Responsive design ensures a seamless and visually appealing experience across various devices and screen sizes.

![Design Support](./Pictures%20And%20Videos/Mobile%20View.png)

## Live Site 🌐

Check out the live version of the Comment Section App [here](https://commentsection.onrender.com).

The app is hosted on [Render.com](https://render.com), a cloud platform that simplifies the deployment and scaling of web applications. 

Render provides a hassle-free experience for hosting, managing, and scaling applications, allowing seamless deployment.

## Technologies and Libraries Used 🛠️

| Category | Technology/Library | Role | Logo |  |  |  |  |

|---|---|---|---|---|---|---|---|

| Frontend | React | User Interface | ![React Badge](https://img.shields.io/badge/-React-61DAFB?style=flat-square&logo=react&logoColor=white) |  |  |  |  |

|  | React Router | Navigation | ![React Router Badge](https://img.shields.io/badge/-React_Router-CA4245?style=flat-square&logo=react-router&logoColor=white) |  |  |  |  |

|  | Axios | HTTP Requests | ![Axios Badge](https://img.shields.io/badge/-Axios-007ACC?style=flat-square&logo=axios&logoColor=white) |  |  |  |  |

|  | SCSS | Styling | ![SCSS Badge](https://img.shields.io/badge/-SCSS-CC6699?style=flat-square&logo=sass&logoColor=white) |  |  |  |  |

|  | Vite | Frontend Build Tool | ![Vite Badge](https://img.shields.io/badge/-Vite-646CFF?style=flat-square&logo=vite&logoColor=white) |  |  |  |  |

|  | Socket.io | Real-time Communication | ![Socket.io Badge](https://img.shields.io/badge/-Socket.io-010101?style=flat-square&logo=socket.io&logoColor=white) |  |  |  |  |

|  |  |  |  |  |  |  |  |

| Backend | Node.js | Server-Side JavaScript | ![Node.js Badge](https://img.shields.io/badge/-Node.js-339933?style=flat-square&logo=node.js&logoColor=white) |  |  |  |  |

|  | Express.js | Web Application Framework | ![Express.js Badge](https://img.shields.io/badge/-Express.js-000000?style=flat-square&logo=express&logoColor=white) |  |  |  |  |

|  | MongoDB | Database | ![MongoDB Badge](https://img.shields.io/badge/-MongoDB-47A248?style=flat-square&logo=mongodb&logoColor=white) |  |  |  |  |

|  | Mongoose | MongoDB ODM | ![Mongoose Badge](https://img.shields.io/badge/-Mongoose-880000?style=flat-square&logo=mongoose&logoColor=white) |  |  |  |  |

|  | JWT | Authentication | ![JWT Badge](https://img.shields.io/badge/-JWT-000000?style=flat-square&logo=json-web-tokens&logoColor=white) |  |  |  |  |

|  |  |  |  |  |  |  |  |

| Testing | Vitest | Unit Testing | ![Vitest Badge](https://img.shields.io/badge/-Vitest-646CFF?style=flat-square&logo=vite&logoColor=white) |  |  |  |  |

|  | React Testing Library | Unit Testing | ![RTL Badge](https://img.shields.io/badge/-React_Testing_Library-E33332?style=flat-square&logo=testing-library&logoColor=white) |  |  |  |  |

|  | Cypress | E2E Testing | ![Cypress Badge](https://img.shields.io/badge/-Cypress-17202C?style=flat-square&logo=cypress&logoColor=white) |  |  |  |  

## Acknowledgements 🌟

This project is an extended version of a [Frontend Mentor](https://www.frontendmentor.io/) challenge. 

The original challenge can be found [here](https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9).