https://github.com/gbw699/interactive-comments-section-main-frontend-mentor
Solution for Intermediate Challenge on Frontend Mentor
https://github.com/gbw699/interactive-comments-section-main-frontend-mentor
angular localstorage scss
Last synced: 2 months ago
JSON representation
Solution for Intermediate Challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/gbw699/interactive-comments-section-main-frontend-mentor
- Owner: Gbw699
- Created: 2024-12-16T13:03:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T15:34:57.000Z (over 1 year ago)
- Last Synced: 2025-03-08T23:07:20.920Z (over 1 year ago)
- Topics: angular, localstorage, scss
- Language: TypeScript
- Homepage: https://interactive-comments-section-gbw699.vercel.app/
- Size: 762 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - 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)
- [Built with](#built-with)
- [Author](#author)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## 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: [GitHub Repository](https://github.com/Gbw699/interactive-comments-section-main-Frontend-Mentor)
- Live Site URL: [Vercel Deployment](https://interactive-comments-section-gbw699.vercel.app/)
## Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Reactive state managment with Signals
- 100% Coverage with unit testing
- [Angular 18](https://v18.angular.dev/)
- [SASS](https://sass-lang.com/) for styles
- [Jasmine](https://jasmine.github.io/pages/docs_home.html) - [Karma](https://karma-runner.github.io/latest/index.html) for unit testing
## Author
- Frontend Mentor - [@Gbw699](https://www.frontendmentor.io/profile/Gbw699)
- Linkedin - [@Gabriel Barimboim](https://www.linkedin.com/in/gabriel-barimboim/)