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

• Table of contents
• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Solution URL: Solution
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Svelte
• Gitpod

What I learned

Instead of the typical web development with HTML, CSS, JavaScript, the web application was developed using Svelte. With Svelte, I break down parts of the web into Svelte Components. I chose Svelte instead of other frameworks because frameworks such as React and Vue feels different than the usual code style that I am used to without using frameworks. Svelte approach feels straightforward and it is pretty easy to learn.

Useful resources

• Svelte - Web framework.
• Gitpod - Automated dev environment in the cloud.

Author

• Frontend Mentor - @sj0n