Submitted 11 months ago

Interactive Comment Section WebApp using React JS and Tailwind

_nehal💎• 6,710

@NehalSahu8055

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive comments section

HTML
CSS
JS

3intermediate

View challenge

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

@tripkmin

Posted 11 months ago

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

_nehal💎• 6,710

@NehalSahu8055

Posted 11 months ago

Thanks @tripkmin for your positive feedback :)

Ibeaka Godson• 360

@Warmarth

Posted 11 months ago

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

_nehal💎• 6,710

@NehalSahu8055

Posted 11 months ago

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

Please log in to post a comment

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