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.

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)