Interactive Comments Section

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

I'm just proud of being able to complete this project with all the requirements. I used only front end tools. so there is no database. the data is imported from the json file on first run. stored in React State and synchronised to local Storage to have some kind of persistence state.

This is the first project of intermediate level that I tackled and I got a say the difficulty does show. it's close to a functional app. it is essentially a small CRUD app for Comments.

The thing that I'm proud of is managing the state using a reducer function and the useReducer react hook. the state along with the dispatch function provided by the hook. are passed to all components in the tree using a context provider.

Next time I tackle a project of this level I'd like to spend more time thinking about how to design different components to build the app in a simple way.

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

There were a lot. the first one was which components to create.

for that I created the following components:

• ComponentWithReplies: this component we pass it one comment object and it renders the comment along with it's replies offseted a little bit to the left to indicate ownership.
• Comment: this is the component used to render comments and replies alike. from the interface there is no practical difference. so I made it work for both of them.
• AddComment: this is the form under the bottom of the page used to add a comment. but it also shows when the user is replying to a comment.

There are other low level component such as the Vote, PostButton, ActionButton and also the Comment Component is further divided into subcomponents that was a little refactoring because it was getting quite long.

Other challenges that I faced was thinking about the UX. for that I implemented some features that I thought were good from my own experience browsing the web:

such as clicking outside the comment while editing or replying will cancel the editing or replying, when editing or replying the textarea is autofocused and the cursor is at the end. and so on.

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

I'd like help to know if my code is readable, understandable and follows best practices.

Any feedback is of course welcomed!

Thank you for viewing my solution!