Skip to content
Submitted about 1 year ago

Interactive Comment Section WebApp using React JS and Tailwind

_nehal💎•6,710
@NehalSahu8055
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive comments section
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is solution for the Interactive Comment Section Web App

🛠️ Built with

  • 🕸️ Html 5, Tailwind CSS & React JS
  • 📱 Mobile First Approach
  • 🎥 Sprinkle of Framer Motion
  • 🤹 Daisy UI

🎨 Features

  • 🪁 Relative Source Font
  • 💈 Custom Scrollbar
  • ✨ Prettier Plugin
  • 🔁 Theme Mode with localStorage
  • 🧏 Tested on windows OS with NVDA & preinstalled screen reader
  • ✔️ Tested with linter (eslint)
  • ⌨️ Accessible with keyboard

📜 What I learnt?

  • React Hooks
  • Implementing ErrorBoundary
  • Complex State Management
  • Prop Validation
  • Intermediate Accessibility

💡Bonus

  • Switch Users
  • Theme Toggle with system pref + (manual + localstorage)
  • RealTime timestamp
  • Detect Censor words and make it *
  • Emoji Picker
  • Hit Enter key to send the comment

Future Updates

  • LocalStorage for comments
  • Making more accessible

I'll be happy to hear any feedback and advice!🤗

Community feedback

  • Lee•170
    @tripkminPosted about 1 year ago

    This is a very good solution. Thanks a lot for the reference 👍

    1
    _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    Thanks @tripkmin for your positive feedback :)

    0
    Ibeaka Godson•360
    @WarmarthPosted 12 months ago

    @NehalSahu8055 Your work is very nice it's simple and unique

    1
    _nehal💎•6,710
    @NehalSahu8055Posted 12 months ago

    Thanks Buddy for your feedback 🙂, I am glad you liked it.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord