Next.JS 13 URL-Shortener

A URL shortening service with an analytics dashboard. Built using Next.JS 13, backed by Prisma and MongoDB for data management

Features

Homepage & URL Shortener

Analytics Dashboard

Graphs and Charts created utilizing React-Vis.

Top Performers

Displays the top 5 best performing links of all time for the logged in user. It displays the name/alias of each link as well the destination, # clicks, and whether or not the link has risen or fallen in ranking.

Click Metrics

Displays a line graph containing the data of the number of clicks in a time range (Daily, Weekly, Monthly, YTD, All Time). Hovering over a section of the graph will display

Top Referrers

Displays a bar graph containing data for the top sources/website from where users are clicking the shortened links. Hovering over a section of the graph will display the name of the source and any relevant data.

Devices

Displays a pie containing data on the devices and browsers users are clicking links from. Hovering over a section of the pie chart will display the name of the device/browser, number of occurances, and any relevant data.

Geolocation & Link Traffic Heatmap

Geolocation Collection

Upon a shortened link being clicked, the user's IP address is collected and use to grab the general location of the user. From there, coordinates are organized and displayed onto the Mapbox component as a heatmap.

Custom Link Aliases

From the dashboard, users will be able to create and customize new links, as well as viewing and/or modifying exisitng links. The link's "alias" is what replaces the random string of characters that identifies the Short URL. For example, rather than https://tinyclicks.co/d7Qw2eP, a user could set the alias for their URL to be https://tinyclicks.co/CoOlLiNk. In the event of duplicate links, they will point to the same original URL/destination, but the link will be modified to avoid issues with collecting analytics for each link and user.

Password Protection

To Be Developed

QR Code Generation

To Be Developed

Bulk Shortening

To Be Developed

Link Tree Hosting

Integrated with Amazon Web Services S3 Buckets to store user profile pictures. Link Portals are stored as records in the database, with links being connected through a relation. These links are stored as the pre-existing Link model so they will be able to collect analytics as well.