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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
• Author

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

• Solution URL: https://www.frontendmentor.io/solutions/mobile-first-with-sass-functional-javascript-bem-and-parcel-bundler-SQ7sX89Nm
• Live Site URL: https://shortly-api-page.vercel.app/

My process

Built with

• Semantic HTML5 markup
• SCSS
• CSS Flexbox
• CSS Grid
• Functional Javascript
• Parcel V2
• Mobile-first workflow

Continued development

I'm exploring more about bundlers and I will continue to do that! Parcel is pretty easy, just set up the scripts and then play with it. I was thinking about getting into bundlers like Vite or Snowpack that uses the unbundled development technique and it's just amazing. I'm learning Webpack as well, currently I'm working in a few react projects with them and I was thinking about learning a little bit about Rollup because Vite uses it under the hood for production build.

Author

• Website - Coming Soon!
• Frontend Mentor - @Galielo-App

Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.