A free and simple URL shortener featuring a clean design and perfect user experience.

Table of contents

• Table of contents
• Overview
• The challenge
• Screenshot
• Built with
• What I learned
• Author
• Acknowledgments

Overview

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

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

Screenshot

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Tailwind CSS - A utility-first CSS framework

What I learned

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.

Author

• Website - Chris Pantak
• Frontend Mentor - @Kielx

Acknowledgments

Again used beautiful CSS spinner from Loading.io This is a solution to the URL Shortener on Frontend Mentor