Markdown App using React

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

⭐ Hey everyone! I finished this Markdown app challenge, and I'm very proud of the results. Please check it out, and feel free to provide feedback.⭐

📝 Some notes:

• Utilized localStorage to allow user's info to persist beyond refreshing/closing the browser
• Used the package react-markdown to parse user's markdown into HTML for the preview
• Added the ability for the user to download their file (as title.md) to their device/computer
• Added custom code to ensure that users are able to use the Tab key (to create 4 spaces) as well as erase the full tab (instead of 4 individual spaces, one at a time).
• Made it as pixel-perfect and responsive as possible.
• Followed best practices throughout project, adhering to DRY, SRP, and separation of concerns with custom hooks, as well as utilizing the Context API to reduce prop drilling.
• Tested all components with Jest and RTL

✅ Some other things I added or changed:

1. As the user types on the left side, the textarea element automatically increases in height, allowing uninterrupted experience for users when typing long documents.
2. As the user types on the left side, the right side (the preview) automatically scrolls to show the bottom, unless the user purposely scrolls up somewhere, in which case it doesn't automatically scroll for them until they go back to the bottom.
3. Added download icon next to the delete icon
4. Delete and download icons don't appear for a new document until its been saved, to prevent trying to delete or download a document that technically doesn't exist yet.
5. "Unsaved changes" warning appears when trying to navigate to a new or existing document with unsaved changes
6. Error messages appear when trying to save a document with:
   • a title with a dot (.) in it (which could cause issues if downloading the file in terms of determining the extension)
   • a blank title
   • a title identical to another file's title
7. Currently selected document's name is highlighted in the light-orange color, and is unable to be clicked (since it's already selected)
8. When the title is too long for its space, it is indicated with an ellipsis (...) at the end
9. Originally when the user clicked the 'Save Changes' button, there was no indication that it was successful, so I added a 'Saved!' indicator (with a checkmark ✔️) that disappears after a set amount of time (3000ms, or 3 seconds). User is unable to click the button again until the 'Saved!' text reverts back to 'Save Changes'.
10. Made the M of the 'Markdown' logo the site icon 😊