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
  • Useful resources
• Getting Started
  • System Requirements
  • Installation
  • Bugs
  • Contributing
• 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: https://www.frontendmentor.io/solutions/shorty-responsive-web-app-that-shortens-links-mlzuUJHKxK
• Live Site URL: https://url-shorty.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• CSS Animations
• React - JS library
• shrtcode API - API tool
• Vite - JS Rapid Development Tool
• Tailwind CSS - For Inline styles

Continued development

Future Updates/Features

• Integration of login and signup features
• Option to instantly share the shorten link

Useful resources

• shrtcode API - This is an API tool used to integrate the link shortening. I recommend you use this if you plan on re-creating this.

Getting Started

In order to view this project locally, you need to make sure you clone this repository and install it's dependencies.

System Requirements

• [git] - [https://git-scm.com/] 2.31.1 or greater
• [node] - [https://nodejs.org/en/] 14.16.1 or greater
• [npm] - [https://nodejs.org/en/] 8.7.0 or greater

To check which versions you have installed you can run these commands:

git --version
node --version
npm --version

If requirements above are not installed in your computer, you'll need to install them. By clicking on them you can go to their website, which can lead you the way.

Installation

• Clone the repository

  git clone https://github.com/Michaelajayi150/URL-Shortener.git

• Navigate to repository folder

  cd URL-Shortener

• Install npm packages

  npm install

• To run the app in the development mode run in the project directory:

  npm run dev

Bugs

Please feel free to create an issue if you see a bug or something unexpected in the app.

Contributing

• Fork the Project
• Create your Feature Branch (git checkout -b feature/yourFeature)
• Commit your Changes (git commit -m 'Brief explanation of feature')
• Push to the Branch (git push origin feature/yourFeature)
• Open a Pull Request

Author

• Website - Michael Ajayi
• Frontend Mentor - @michaelajayi150
• Twitter - @michaelajayi150
• LinkedIn - @ajayi-michael-692bb6203