Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Shortly: URL Shortener using React/Typescript/HTML/CSS

Chris 410

@cbserra

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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