Interactive Comment Section built with Next

What are you most proud of, and what would you do differently next time?

I am most proud of having implemented some features that weren't explicitly part of the challenge. Those include the reply and edit buttons saying "Cancel" when replying/editing, and the placeholder for replies saying "Add a reply" instead of "Add a comment". I also challenged myself to implement a dark mode. It didn't turn out ideal color-wise, but it's a start and I'll keep working on it in future projects.

I'm thinking my CommentsList component might have turned out a bit big, so maybe next time I'll consider splitting a component like that into smaller components.

What challenges did you encounter, and how did you overcome them?

Oh boy, what challenges didn't I encounter? 😅

For starters, this is my first project built with Next.js. Having previously used React, I decided I wanted to work with Next moving forward (for SEO and performance optimization - and also to be able to build multi-page apps in the future). It definitely took some adjusting to no longer having a src folder, working with the App Router, understanding the use of a page file instead of an index file etc.

This project also required the most JavaScript by far out of all the projects I've done so far. Figuring out all the necessary functionalities and writing functions accordingly certainly was no easy feat for me, but it was a valuable learning experience for sure. I'm also fairly new to data fetching / working with APIs (although obviously in this case the data came from a static file).

This directly ties into my next point, which is that my biggest struggle was with the deployment process. I learned that I wouldn't be able to deploy to Github Pages if I wanted server-side rendering. So I used Vercel instead, and it took me longer than I would've liked to figure out why fetching the data using a relative URL ("/data.json") wasn't working. I feel like I tried a million different solutions before finally arriving at the one that worked (ditching the fetch request altogether and instead using process.cwd() to directly read the file).

It took me a while to figure out how to make it so newly added comments/replies would have a timestamp that updates to reflect when it was added. On the flip side, I think I'm starting to understand the useEffect hook better.

I also had never heard of recursion before but as it turned out, I needed it for quite a few of my functions (to make it possible to traverse nested replies). This was definitely a major learning experience for me (and I'm still not sure I fully understand it 😅)

What specific areas of your project would you like help with?

I can't think of any specific questions right now, but any and all feedback as to how I can improve my solution is welcome!!