Skip to content
Submitted almost 2 years ago

Interactive Comment Section WebApp using React JS and Tailwind

accessibility, motion, react, tailwind-css, vite
_nehal💎•6,710
@NehalSahu8055
A solution to the Interactive comments section challenge
Preview (opens in new tab)Code (opens in new tab)

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!🤗

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on _nehal💎's solution.

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