Skip to content

Latest commit

 

History

History
96 lines (66 loc) · 3.62 KB

README.md

File metadata and controls

96 lines (66 loc) · 3.62 KB

Frontend Mentor - Shortly URL shortening API Challenge solution

This is a solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • Shorten any valid URL
  • See a list of their shortened links, even after refreshing the browser
  • Copy the shortened link to their clipboard in a single click
  • Receive an error message when the form is submitted if:
    • The input field is empty

Screenshot

Links

My process

Built with

What I learned

This was my first independent project using Create React App and styled components. I gained experience breaking the project down into components and creating custom hooks.

  • All shortened links are saved to local storage, so I added a delete button to the cards for better UI.

  • I wanted to implement a scroll effect using the React scroll component, so I added a 'Try it out' link to the top menu. As this only makes sense on the home page, I created a custom hook to check whether the current page is a specified path and conditionally render the component.

// custom hook
const useComparePath = (path) => {
    const [currentPath, setCurrentPath] = useState(window.location.pathname);

    useEffect(() => {
        const onLocationChange = () => {
            setCurrentPath(window.location.pathname);
        }
        window.addEventListener('popstate', onLocationChange);
        return () => {
            window.removeEventListener('popstate', onLocationChange);
        }
    }, [currentPath]);
    return (currentPath === path);
}
// In the header component
const isHome = useComparePath('/');

{ isHome ? 
    <LinkWithin to='try-app' smooth={true} duration={500} spy={true} exact='true' offset={-60} tabIndex='0' fontSize='1rem' fontWeight='700' color='var(--text-med)' hoverColor='var(--text-dark)'>Try It Out</LinkWithin> 
: null }

  • I learnt how to create a custom loader animation using styled components.

  • I would like to add a page to this project - a sign up form, so I set it up using React Router to make this easy to do in the future.

Continued development

  • React scroll links don't seem to work like normal links which poses an accessibility challenge - I added a tabindex in the markup to make them focusable but they cannot be activated with the Enter key - I will need to come up with a solution to this.

  • I also need to explore accessibility of the link-shortening api - how to announce loading a link, and a result showing up on the screen.

Author