URL Shortener Service with Click Analytics

Long URLs break in print, look untrustworthy in messages, and reveal nothing about who clicked them. URL shorteners solve the first two problems; the good ones solve the third with analytics. This project builds Shortly, the full product — not just a shorten box. The hero lets users paste a long URL and get a short link with a copy button. The link manager lists five realistic links with destinations, click counts and creation dates. The analytics dashboard shows total clicks, unique visitors, top-link CTR and active links as stat cards, a 14-day clicks-per-day bar chart on canvas, and top-country and device breakdown bars. The third view generates a scannable QR code per link and exposes link settings: custom alias, expiry and password protection. The whole service domain — links, clicks, aggregates — is modelled in the front end so every screen behaves like the real thing.

1. The user pastes a long URL in the hero; the app generates a short code and shows the result card.
2. Links are stored as records with short code, destination, created date, click total and settings.
3. The manager table renders every link with its click count and a copy button.
4. The analytics view aggregates clicks into a 14-day daily series plus country and device shares, drawn as canvas bars.
5. The QR view renders an SVG QR code for the selected link beside its alias, expiry and password settings.
6. Tab navigation switches the three views; all figures derive from the same link dataset.

Tech stack:

• HTML5, CSS3, vanilla JavaScript (ES6)
• Canvas 2D API for the clicks-per-day chart
• Inline SVG QR code rendering
• Dark SaaS dashboard theme
• Static deployment for the demo front end

• [Instant shortening] Paste a long URL, get a short link with a result card and copy button.
• [Link manager] Table of short URLs with destinations, click counts, creation dates and copy buttons.
• [Click analytics] Stat cards plus a canvas bar chart of clicks per day over 14 days.
• [Geography and devices] Top-country and device breakdown bars aggregated per link.
• [QR code generation] A scannable QR code rendered per short link with download affordance.
• [Link settings] Custom alias, expiry options and password protection per link.
• [Consistent dataset] Links, clicks and aggregates derive from one model, so all views agree.

• Complete source code (single-file shortener with all views)
• Realistic link and click dataset
• Canvas chart and QR rendering code
• Setup guide (building the redirect backend with Node.js/Python)
• Project report PDF (service model, analytics, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (shorteners, analytics, hashing)

• The demo is front-end only; real redirect resolution needs a backend with a database (documented extension).
• Click counts are demo data; live logging requires the production backend.
• Passwords are described as SHA-256 hashed in the UI copy; the demo does not implement real auth.
• No user accounts, API keys or custom domains in this build.