Shortly

Overwiew

This is a solution to the Shortly URL shortening API Challenge on Frontend Mentor. Frontend Mentor challenges help to improve coding skills by building realistic projects.

The app is built with bundle of modern web technologies: React JS library, SCSS preprocessor, semantic HTML and Session storage.

Technologies

• HTML5
• SCSS preprocessor
• React - JS library (functional components & hooks)
• Clipboard API
• Session storage
• shrcode API

Workflow

1. Project initialization as a public repository on GitHub
2. Planning out HTML structure and CSS classes based on design files
3. Creating well-structured content as React components with JSX
4. Styling the page from top to bottom by utilizing mobile-first approach
5. Adding media queries for desktop layout
6. Implementing main functionality of the website - shortening valid URLs
7. Integrating Session storage to prevent losing results after refreshing the browser
8. Configuring repository to publish code with GitHub Pages

Fulfilled user stories

• 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