Submitted over 2 years ago

React project built desktop view first using styled-components

carlos fabian venegas•60

@primelos

Preview site View code

This is a solution for...URL shortening API landing page

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

Solution retrospective

I had a hard time deciding how to build the search component. I should have planned it better. That would have saved me a lot of headaches. I wasn't sure if the validation was correct. When you enter the search field and type, then you delete your text the warning appears under the input. I'm not sure if that was correct functionality if not I can fix it!

Community feedback

Fazza Razaq Amiarso•2,340

@fazzaamiarsoPosted over 2 years ago

Hello Carlos! Great work!

I have suggestions for you.

for useLocalStorage hook, I think you should declare it either outside the Search component or in other file.
In these useEffect, you are missing a dependency.

useEffect(() => {
    if (!urlData) return;

    axios
      .get(`https://api.shrtco.de/v2/shorten?url=${urlData}`)
      .then((res) => {
        setShortenUrl([
          ...shortenUrl,
          {
            id: uuidv4(),
            urlOld: search.urlName,
            urlShort: res.data.result.short_link2,
            copyBool: false,
          },
       // ....... omitted
  }, [urlData, search.urlName]); //missing search.urlName

Please refer to this great blog post https://kentcdodds.com/blog/react-hooks-pitfalls

I hope it helps! Cheers!

carlos fabian venegas•60

@primelosPosted over 2 years ago

@fazzaamiarso Thank you.

Please log in to post a comment

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