kensparby/fem-url-shortener

A solution to the 'URL Shortener API landing page' challenge from Frontend Mentor (https://www.frontendmentor.io/)

Frontend Mentor - Shortly URL shortening API Challenge solution

This is my solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor.

Table of contents

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

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

Mobile	Desktop

Links

• Solution URL: https://github.com/kensparby/fem-url-shortener
• Live Site URL: https://kensparby-fem-url-shortener.vercel.app/

My process

Built with

• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind - Tailwind

What I learned

This one took a good while as I wanted to learn and use NextJS for this challenge, and so I spent a few days really testing out and learning before even getting started, and then another three days building the challenge.

I got a lot of good practice with both the Pages and the App routers in NextJS, and I also decided on trying Tailwind again; still not impressed with the spaghetti code it turns into and how cumbersome it is to change things once said spaghetti code is a fact. I don't know, I just find writing CSS/SCSS much more enjoyable and far easier to handle.

NextJS is now a permanent part of my toolbox though, and I absolutely love using it. 12/10, would recommend.

I opted for not adhering to the challenge requirement of the created links to persist past browser refresh, as that just seems like poor UX...? They're instead stored in state and will persist until the browser is refreshed.

On a fun sidenote, I wasted over an hour on debugging a setTimeout() that just would not run. I figured this had to be some quirk of NextJS until I tried it in another browser and it immediately worked as expected. Caching issues are always fun :)

Continued development

I wanted to add animations -- in particular to the hamburger menu -- but eh, maybe some other time. A few quick ready-made icons will do for now.

Useful resources

• Youtube: Next.js 13 Crash Course

Author

• Website - https://sparby.dev/
• Twitter - @kensparby
• Frontend Mentor - @ksparb

Acknowledgments

• Brad Traversy, for his great video tutorials and for just being a good guy all around.