/url-shortener

This is a MERN project that shortens URLs, this a task to join Appgain.io backend development internship

Primary LanguageJavaScriptMIT LicenseMIT

URL Shortener

alt text

Table of Contents

Built With :

Getting Started

This is a list of needed instructions to set up your project locally, to get a local copy up and running follow these instructions.

  1. Clone the repository.

  2. cd into backend folder and create a file named "config.env" and fill it with this fields with your information like ./backend/example.env

  3. Follow this article to install node js and npm Install Node js and npm

  4. cd backend && npm i && npm start

  5. cd .. && cd frontend && npm i && npm start

Description

This is a MERN project that shortens URLs, this a task to join Appgain.io backend development internship.

The user enters the landing page through https://localhost:3000/ , then he enters URL, Slug (optional), iOS primary and fallback URLs, Android primary and fallback URLs, then he receives a shortened link.
If he clicks on it, he receives a link according to his device Desktop, iOS, or Android.

He also can update the attributes of the shortened URL, and he can list all shortened URLs information in a table.
Used Node.js, Express.js, MongoDB (and MLab for deployment) for backend part, and React.js for frontend part.

Documentation

You can look on the API documentation at API Documentation
Or through running postman collection stored in ./documentation/URLShortener.json

Screenshots

  1. Form to create a new short URL (slug is optional).

  2. Form to create a new short URL (slug is optional) 2.

  3. Recent short link is shown after creating.

  4. Receiving a link for my device (Desktop) after clicking on the link (there is a link for iOS, and another for Android if detected any of them)

  5. Error when trying to create a new URL with old slug.

  6. Creating a new URL without submitting a slug.

  7. Updating desktop (web) link of an URL.

  8. Showing all created URLs in table after clicking on "Show Short Links".

  9. Expanding columns when hovering on them.

  10. Responsive Design.