/fm-url-shortener

Primary LanguageTypeScript

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
  • Next.js - React framework
  • Styled Components - For styles

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

Continued development

Useful resources

Author

Acknowledgments