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 objectives not completed ❌
- Solution URL: https://www.frontendmentor.io/solutions/reactjs-solution-vanilla-css-altered-design-3qq4EDUnSW
- Live Site URL: https://valleyman89.github.io/FrontEndMentor-Solution---Interactive-comments-section/
- GitHub Repo: https://github.com/valleyman89/FrontEndMentor-Solution---Interactive-comments-section
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- react-gh-pages - react-gh-pages - used to deploy the front-end solution on GitHub Pages
- I seperated the original data.json file to distinguish between user data and comment data - something which I think would mimc a real-world scenario better.
- A comment/reply must be at least 1 character long, and at most 256 characters.
- Users can only vote once per comment/reply.
- Comment/Reply scores cannot go below 0.
- I thought about switching the + and - buttons on mobile view, which made sense from a UX-perspective, but ultimately I left it.
- I had trouble of adhering to the design spec for replies (the straight gray line on the left hand side). I think this could be achievable if I went back and used CSS grids for the laying out the comments. As a workaround, I used a box-shadow to emulate the line on each individual reply.
- I think I implemented the .map function weirdly in /components/Comments.jsx and this caused me issues in following the design spec properly - instead I opted for Reply/Update/Delete operations to be presented as a modal box.
- I created a common component called Button.jsx but couldn't implement this on the modal discard button as I wasn't sure how to pass through an onClick function as a prop.
- On new comments/replies, I hard-coded the createdAt property as 'a moment ago'
This project is a good opportunity to practice back-end functionaility - so that will be my next project (albeit not on this particular project).
- GitHub - @valleyman89
- Frontend Mentor - @valleyman89
- Twitter - @steven_rolph