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.
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
-
Semantic HTML5 markup
-
CSS custom properties
-
Flexbox
-
CSS Grid
-
Mobile-first workflow
-
React - JS library
-
Axios - JS library
-
CSS modules for React
Building this project helped me learn to use and improve my knowledge of some React and JS tools, such as:
- CSS modules.
- React Context.
- Axios.
- Local Storage.
- The clipboard object.
-
I tried to follow a modular approach while writing my CSS stylesheets, which helped me avoid common problems, such as selector collisions or affecting other selector's styles by mistake.
-
I used useState React hook in order to handle the possible errors that could happen while requesting information from the API.
-
To connect to the given API and fetch the information I used AXIOS, a JS library that works with promises.
-
Implemented the
@media (hover: hover) {}
CSS media query, which is used to detect if the user's device has a cursor, to add hover transitions. -
Instead of using useState to handle my inputs state, I used useRef because it won't re-render the whole component every time that the input's value change.
-
I added some smooth animations to the elements that the user can interact with.
-
There were some components that could be re-used, so I tried to write styles that would work no matter where the component is used.
- CSS modules - This helped me understand the basic usage of CSS modules and how to integrate them into a React project.
- Why are CSS modules useful? - This article helped me understand the benefits of working with modular CSS stylesheets, such as component-scoped styles, which means no selector collisions.
- Axios - This is the documentation of Axios, a promise-based JS library that helped me request information from an API.
-
Website - Jose Saúl Guerrero Serrano
-
Github - @josesaulguerrero