https://github.com/tusho7/interactive-comments-section

https://github.com/tusho7/interactive-comments-section

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/tusho7/interactive-comments-section
• Owner: Tusho7
• Created: 2022-11-29T09:20:11.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-29T09:30:21.000Z (about 3 years ago)
• Last Synced: 2025-03-22T20:30:03.550Z (9 months ago)
• Language: JavaScript
• Homepage: interactive-comments-section-mauve.vercel.app
• Size: 626 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## 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

In this project I mainly needed to focus on page layout and page responsiveness.

### The challenge

Users should be able to:

- View the optimal layout for each page depending on their device's screen size

- See hover states for all interactive elements throughout the site

### Screenshot

![](/public/design/desktop-preview.jpg)

![](/public/design/mobile-design.jpg)

### Links

- Solution URL: [GitHub Code](https://github.com/Tusho7/interactive-comments-section)

- Live Site URL: [GitHub Live](https://interactive-comments-section-mauve.vercel.app/)

## My process

Create comments section

Create replies section

Create textarea to add comment

Create modal container to delete comment or reply

Give styles in CSS

Add hover effects in CSS

Add media queris

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Media Queries

- React

### What I learned

While working on this project, I gained more practise of using React, the main challenge that I overcame was to create React punctionality to add comment and reply. After research and practicing different ways for resolving this step, I wrote the React code which worked eventually.

### Continued development

I want to create other projects like this to finally master coding and make more dynamic,interactive and responsive projects.

## Author

- GitHub - [Sandro Tushurashvili](https://github.com/Tusho7)

- LinkedIn - [Sandro Tushurashvili](https://www.linkedin.com/in/sandro-tushurashvili/)