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.
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 thedata.json
file, try using timestamps and dynamically track the time since the comment or reply was posted.
- Solution URL: https://github.com/aok207/Interactive-comments-section-solution
- Live Site URL: https://interactive-comments-section-aok207s-projects.vercel.app/
I ended up making it front-end only. So I used the localstorage to store the comments.
- Mobile-first workflow
- React - JS library
- Tailwind CSS
- TypeScript
I learned a lot about typescript. And for React, I particularly learnt a lot about passing data from child to parent component.
- Resource 1 - This helped me understand how to pass data between child and parent component.
- Website - Aung Oo Khant
- Frontend Mentor - @aok207