URL shortening App using TinyUrl API

Responsive web application for shortening links. Enter a link in the text box, click on “Shorten it !” and get a quick copyable result.

Table of contents

• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

My process

Built with

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

What I learned

My first project using styled components library ! At first it was a bit clunky (since I was limiting myself to using util classes), but with each new component I got better and development felt faster. In this project I used my knowledge of conditional styling using custom props and style extanding. Apart from that, I'm also quite happy with how I was able to utilize the grid for a responsive layout, particularly in the advanced stats section.

Continued development

In future projects I should try to refactor some styles like media queries into components, as I usually try to do when I use scss and its mixins.

Useful resources

• Codevolution - Tutorial series on styled components library