This project involved working on an interactive comments application.
Frontend Mentor provided local data.json file, so use that to populate the content on the first load. If you want to take it up a notch, feel free to build this as a full-stack CRUD application!
Your users should be able to:
Desktop Version:
Desktop Version Dark Mode:
Mobile Version:
Lighthouse Report:
I began my project by downloading all the necessary assets from the design folder. After this, I installed Vite, ReactJS and TailwindCSS for the project. Finally, I updated the Tailwind config js file with all the design color assets and Google Font "rubik".
My project involved many different moving pieces; therefore, I thought it was appropriate to review the design to determine how to approach the project. I used my Notepad to write out the various aspects of the project from functionality, buttons, design, and reusable components. Based on these factors, I started my creating a generic comment card which would be reusable for numerous aspects of the project. The comment card included the avatar image, user's name, timing since published, reply button, comment section and a styled increment decrement button.
After finishing the reusable comment card, I decided to work on the User Comment section to style it. I started with adding an avatar image, a text box and a button. I decided to use a reusable SEND button for the application therefore creating it's own component.
During this, I decided to work on the increment and decrement counter (i.e. likes for the comment). I used useState to hold the state of the count, then created two functions to increase and decrease the count while console logging the amount for testing purposes.
After this step, I worked on passing the props between each component to display the results. I spent a significant amount of time trying to figure out how to display the reply to specific comments. I found that I was able to get the replies to display; however, they would always be nested in the comment card display.
The next day, I worked on the user comment component. This component is the form submission text box at the bottom of the webpage tied to the end user in which they can provide a comment that appears on the screen. In order to make the user's comment display, I needed to life the state up to the App.jsx and pass a function to the UserComment component to update state and handle submission. Some issues I ran into was where to include the handleSubmit function in the form versus the button as well as prop handling. The handleSubmit button calls the onAddComment prop function in the App.jsx which updates the App component and starts a new render of the page. Additionally, I wanted the form submission to be tied to the end user's name and picture - therefore, I added the user information in the App component and included the user information when adding a new comment. Finally, styling of the new comment had it's own challenges such as being no the full width of the page, the reply button being incorrectly formatted, etc. I played around with this for quite a bit of time to find a scenario in which the formatting was correct.
After working through some formatting issues, I decided to work on the delete button functionality of the end user's specific comments if wanted. To begin, I needed the delete function to only be avilable for the end user, juliusomo, for his posted comments therefore I needed to render the delete button based on the username of the comment. In App.jsx, I passed the current user information to the CommentCard component and conditionally rendered the delete button in the Comment Card component based on the username. One error I worked through involved an error messaged involving the currentUser prop being undefined in the CommentCard component. I determined the currentUser prop was passed correctly from the parent component and added a default props to handle cases where it may be undefined.
The final pieces of the project involved styling it based on the design assets. I started with working on the user comment section as the input box would not stretch the width of the screen. I played around with different CSS styling - checking the App.jsx container, the User Comment component container and then each individual div. I learned that the parent container needed to be set at w-full, while the containers of the avatar image and form needed to set to flex-grow and flex-shrink-0 in order for the form to grow as needed.
Here are several things I learned throughout this project:
I will continue to work on JavaScript fundamentals, TailwindCSS styling and much more.