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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
localStorageto save the current state in the browser that persists when the browser is refreshed. - Bonus: Instead of using the
createdAtstrings from thedata.jsonfile, try using timestamps and dynamically track the time since the comment or reply was posted.
- Solution URL: Frontend Mentor
- Live Site URL: GitHub Pages
- Semantic HTML5 markup
- SASS- all custom properties
- CSS Grid
- Mobile-first workflow
- React - JS library
- Vite - Frontend Tooling
I learned that, when dealing with implementation of CRUD, it is way better to implement the logic first- like the functions/operations, before proceeding with the design. In doing so, all I needed was to call the ready-made functions to integrate into design. Not the other way around. I shall take that into consideration FIRST thing for future projects.
I am looking to implement animated sorting of arrays. This feature shall be added soon.
- Sass Documentation - I consulted the docs for using features such as mixins, partials, etc.
- Deploying Vite to GH Pages - Helped me deploy my Vite App to GH Pages. Worth checking out!
- Vite - Getting Started - Very EASY-to-follow to scaffold a React project really fast.