This is a really interesting question, and what I will say is that this is a natural part of software engineering growth. I went through a similar experience on Android - Basic rendering is easy, but things get tricky when there's a lot of different user flows and edge cases. I hope you're able to look back and feel proud of yourself once you're able to get these types of features able to work 😊
That being said, here are my tips to improve here:
- I really don't think grinding Leetcode and doing those competitive programming type of problems will help you. Those problems are too isolated and not connected to real products, especially on front-end where there's actual pixels on screen.
- Take some time to think through the problem before coding - Tactically, you can write some pseudo-code after you figure out the overall logic flow. The common failure mode I see with more junior engineers is they'll jump straight into coding, write a bunch of code, hit a wall, and get frustrated trying to morph their broken code into something that works.
- If you have a mentor or just a good relationship with a more senior engineer, you can run it by them and get feedback. Ask them if there's any edge cases your proposed logic doesn't account for.
- Leverage code review - As an apprentice, don't hold yourself to the bar of nailing it perfectly on the first try with a solution that covers all cases and is elegantly written - If you can get something primitive working, even if it takes a ton of if statements or something, just get it out there in a pull request and ask for feedback on how the approach can be improved.
- Be the user that pushes products to their limits - This is the cool thing about working on front-end: It's very visual, and you can play around with things yourself, which is much harder to do if you work on back-end or ML infra or something. What I mean by "pushing to the limit" is to deliberately hit error and edge cases. Observe how websites and apps react when you do this, and you can learn from them. By having this frame of mind, it also helps you see these cases proactively when you take up any task. Here's some examples:
- Put in an invalid email when logging into a website
- On a content app like Pinterest, create a collection of items that's extremely large (100+ items)
- Click every button you can possibly find, especially those that are a bit hidden
Lastly, this isn't completely related to the question, but I recommend reading this Q&A on how to write great code faster as well.