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)
Top comments (0)