Frontend Mentor - Interactive Comments Section solution

This is a solution to the Interactive Comments Section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Interactive Comments Section solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Desktop
      • Mobile
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources

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

Desktop

Mobile

Links

• Live Site URL: Github Pages

My process

Built with

• JSX markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Astro - All-in-one framework
• React - Frontend framework
• Tailwind - CSS framework
• Nanostores - State management library

What I learned

I've learned a lot more about Astro, its not really great when it comes to web apps. I learned on how to integrate other frameworks and libraries with Astro (Like Tailwind, React and Nano stores).

Useful resources

• Astro docs - The official documentation of Astro is very complete and easy to understand. The best resource if you're looking to learn Astro by far.
• React docs
• Tailwind docs