In-browser Markdown Editor

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

I learned a lot with this project. I used various different libraries such as tw-merge, shadcn/ui, react-markdown. I am happy that I was able to navigate their documentation and integrate them into my project.

I am also quite happy about learning to use shadcn. I have developed a few projects now which have included toggle switches in the designs. Prior to this I was creating my own each time. This was getting quite tedious and reciting the pattern from memory was not very effective. I looked to component libraries to solve this problem and found shadcn to be a good match. After getting over a slight learning curve and understanding the ethos behind shadcn, I believe it will be a good tool going forward to give me a good base to work off of and save me a lot of time.

If I were to do this project again I would most likely use TypeScript; I came across quite a few situations where typing would have been nice. I saw a few opportunities where I could have used types to better document my components, as well as a few times where enforcing types on props for example would have led to less error-prone use of components in the future. For example for my theming I used a state which uses a string and should use only values 'light' or 'dark'. Without typing, I have no way to check I haven't simply typed the value wrong in a prop for example.

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

I encountered a lot of challenges in this project. One such problem was with customizing a shadcn component. It uses a library called tw-merge to choose which utility class is ultimately applied to a component if there are multiple classes given which target the same style property. I encountered a problem where my text was not displaying the colour given to it with text-orange. It baffled me for quite a while but it turned out that tw-merge was picking up on my utility class text-preview-h4 which targets the font-size property (preview-h4 is a custom font-size variable, not a colour) and deciding that it targets the 'color' property. This is because of the way tw-merge parses utility names to determine their property. I overcame this by configuring tw-merge as per the docs.

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

My component structure is currently quite messy I feel and could be cleaned up a lot. Any tips on useful React patterns I could apply would be greatly appreciated!