A free and simple URL shortener featuring a clean design and perfect user experience.
- Table of contents
- Overview
- The challenge
- Screenshot
- Built with
- What I learned
- Author
- Acknowledgments
The project was a challenge from URL Shortener on Frontend Mentor. It was a good challenge to solidify my external API usage, responsive layout, and React skills.
The challenge was to integrate with the shrtcode API to create shortened URLs and display them like in the designs. User stories that needed to be fulfilled:
-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
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Tailwind CSS - A utility-first CSS framework
The project was another small step in my Web Developer journey. It strengthened my skills in areas like API usage, React Hooks, and Tailwind CSS.
- Website - Chris Pantak
- Frontend Mentor - @Kielx
Again used beautiful CSS spinner from Loading.io This is a solution to the URL Shortener on Frontend Mentor