Submitted about 3 years agoA solution to the URL shortening API landing page challenge
Shortly: URL Shortener using React/Typescript/HTML/CSS
accessibility, fetch, react, typescript, node
@cbserra

Solution retrospective
- I'm not a fan of how I designed ShortenedSection.tsx -- I think there's too much going on. The Form could probably be in its own component, along with the REST calls to the API. I got a little too deep into the weeds with the error handling and CSS.
- A few things I noticed while testing the responsiveness of the application:
- If starting in desktop mode, and resizing the window so that it would trigger the mobile media query, sometimes the Hamburger component would not load -- but I mostly only found this to be a problem locally. I think I read something about React running in strict mode locally, and it either not reloading components or reloading them too often?
- Also, going from desktop to mobile would then trigger the Menu to appear -- which normally only will show/hide when clicking the Hamburger. This likely could have been solved having a separate Desktop Menu from a Mobile Menu, but I was trying to reduce redundancy. I then attempted to add a scroll trigger, so that the menu would disappear when a user scrolls down the page. It seems to work sporadically.
Any feedback would be appreciated! Especially best practices around React. I want to look into CSS post processors to clean up my rules.
Code
Loading...
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Chris's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord