URL Shorty: A React App for Shortening Links

SHORTY URL FULL STACK DEVELOPMENT

A clean & elegant design using Ant Design framework and React Hooks for optimal performance and Express Server for backend operations. All serverless function which is easily deployed on vercel.

Tech Stack

CLIENT: React, Hooks, Ant Design 5+

SERVER: Node, Express

Features

  • SSL Secure Shorty Links
  • Only HTTPS Links Allowed
  • Downloadable QR CODE TAG
  • Report Scam Links
  • Route Free Single Page Design With Dynamic Menu
  • Total Links & Links Clicked Stats
  • Per link Stats how many times clicked individually and other info

Live Preview

https://shorty-cut.vercel.app/

Screenshots

See SS here.

Home Page View

Link Generate View

Report Form View

Contact Form View

Pre Requirements

  • React 18+
  • Node
  • XAMPP / Or any cloud based MySQL Database
  • VSCODE With ES6+ Module

Highly Recommended

Download the release zip for complete Frontend & Backend files and skip cloning steps from Installation for less confusion beacuse of seperate repos for Frontend & Backend

Installation

Clone the project

  git clone https://github.com/shehari007/url-shorty.git

Go to the project directory

  cd url-shorty

Rename the .env.example file -> .env and fill out the empty fields

## BACKEND SERVER ENDPOINTS HERE 

REACT_APP_API_URL=                #e.g http://localhost:5000/
REACT_APP_API_REPORT_URL=         #e.g http://localhost:5000/report
REACT_APP_API_STATS_URL=          #e.g http://localhost:5000/stats
REACT_APP_API_CONTACT_URL=        #e.g http://localhost:5000/contact 

REACT_APP_GITHUB_URL= https://github.com/shehari007/

## set false for production
REACT_APP_DEBUG_MODE=true 

Install dependencies

  npm install

Start the frontend

  npm start

For Backend Node Express Server

Clone the project

  git clone https://github.com/shehari007/url-shorty-server.git

Go to the project directory

  cd url-shorty-server

Rename the .env.example file -> .env and fill out the empty fields

## MAIN PORT ##

PORT=5000   ## keep it 5000 if you used example links in env file for frontend

## DB connection ##

DBHOST=                
DBPORT=
DBUSERNAME=
DBPASS=
DBNAME=

## CORS ORIGIN DOMAINS & METHODS ##

DOMAINS= http://localhost:3000             ## Local running frontend address
METHODS= 'GET,POST'

## SHORT URL GENERATE CONSTRUCTOR ##

SHORTURLDEF=http://localhost:5000/co/      ## this is the default constructor for generated URL's 


##DEFAULT LENGTH OF NANOID PARAM FOR SHORTYURL

PARAMLEN=5 

Install dependencies

  npm install && npm install nodemon --global

Start the server

  nodemon index.js

Server Deployment

To deploy as a serverless function vercel json config is provided in server files you can deploy this on vercel without any extra configuration

Roadmap

Integrate Google Captcha to emit the use of bots generating short links (work in progress)

Per link Stats how many times clicked individually and other info (completed & live)

Show links generated by same ip in a table for each user individually (work in progress)

Feedback

If you have any feedback, please reach out at shehariyar@gmail.com


Details download:

Author: shehari007
Source: https://github.com/shehari007/url-shorty

License:   MIT license

#nodejs #react 

URL Shorty: A React App for Shortening Links
2.95 GEEK