url-shortner banner

url-shortner

26 devlogs
21h 1m 14s

This is a full-stack URL shortener that turns long links into clean, shareable URLs.
It supports custom short codes, password-protected links, and click tracking.
Users can manage, delete, and expand their links through a simple interface.
The …

This is a full-stack URL shortener that turns long links into clean, shareable URLs.
It supports custom short codes, password-protected links, and click tracking.
Users can manage, delete, and expand their links through a simple interface.
The app includes authentication, an admin dashboard, and a terminal-style command UI.
Built with React, Go, and MySQL, it’s a complete modern web application.

This project uses AI

I used a lot of AI in frontend UI/UX designing but it is not vibe coded . I Asked AI and learn about the concept and how it works and implemented it in the project

Demo Repository

Loading README...

jaisondavidm.cs25

Shipped this project!

I made a URL Shortener service that takes links and makes them short and easy to share.
The tough part was figuring out what to do when things did not go as planned like when two links wanted to use the short code and making sure everything was safe and secure especially when links had passwords and needed special permission. After trying a lot of things and making mistakes I finally got it working well by trying again when things failed using special codes to keep things safe and checking everything carefully.
My URL shortener also lets people make their special codes count how many times a link is clicked and it has a simple interface that looks like a computer terminal and even a special page for administrators to manage people and links.
I am pretty happy, with how my URL shortener turned out.

jaisondavidm.cs25

Updated Readme file . and given credenital for admin dashboard . but if you login as a admin please dont delete any urls or users . it is only for review process

Attachment
0
jaisondavidm.cs25

Added a info page that will show all details about the URL shortener site . it will completely explain how to use it and all features in it

Attachment
0
jaisondavidm.cs25

Just modified the navbar . i completely built a new navbar with responsiveness . the old Navbar feels boring and non professional . so i modified it

Attachment
Attachment
0
jaisondavidm.cs25

Just now added details about terminal UI in the readme file

Attachment
0
jaisondavidm.cs25

Instead of boring basic UI . i just now added a terminal UI . which you can do all things i give the basic steps in help command . it is like using linux terminal . it feels good . you must try this . while sleeping this idea spared

0
jaisondavidm.cs25

Added information about admin and what can admin can do . all details are clearly updated in readme file . and i altered the things like endpoints to production level . and i deployed it to the internet . frontend is deployed using vercel and backend is using render . which gives better free tire usage

Attachment
0
jaisondavidm.cs25

Added delete option to admin page . not only deleting from the table . it involves proper logic like if one user is deleted by admin . the urls created by that user also been delete . which is producation grade system

0
jaisondavidm.cs25

After sturggling for an hour . successfully add admin page . but fr i used ai to fix the bug while authentication the user as admin or normal user . not compleletely i developed it and fixed the bug using AI

0
jaisondavidm.cs25

Just Now added a README.md file . it will clearly explain why and how it works . i will develope this project in more and update that also

Attachment
0
jaisondavidm.cs25

Improved the UI of the protected url screen . it is in backend so it is hard to make changes . but i done

Attachment
0
jaisondavidm.cs25

After struggling for an hour , successfully added protected url shortened link . in the first i think that i can handle eneterting password in frontend and tried it but it is not the good method so i use html in backend . and ask password if correct means it will redirect to the destination url

0
jaisondavidm.cs25

Just now successfully added page not found page . which is very important in any big projects . i used some funny quotes feels like the page unique

Attachment
0
jaisondavidm.cs25

Added MyURLs page to see how many shorten urls are you created and you can delete the unwanted one . using proper authentication , only the owner of the link can only delete this

0
jaisondavidm.cs25

Improved the ui in the expand url page . created a backend routes to get list shorten url created by you

0
jaisondavidm.cs25

Successfully added a service that convert shorten url to original . before opening the short url , you can check the url in this page and get the original url . you can prevent the harmfull or hacker’s phising url protecction . which is essentail service in this site

0
jaisondavidm.cs25

improved UI to random code like wise custom code component . it will give better user experience

Attachment
0
jaisondavidm.cs25

Imporved UI and UX in the custom code page . showing model to copy the short code , improved the experience of the users

0
jaisondavidm.cs25

Added custom code availabilty checker in both frontend and backend . before creating the short code you can check is it available . and then you create the short code which provides better user experience

0
jaisondavidm.cs25

Just now added a profile page with logout option which is simple but it is a important resource to see our information and our role in this site

Attachment
0
jaisondavidm.cs25

Added logout modal to confirm logout which will prevant sliping to touch logout btn . and aligned the homescreen properly

0
jaisondavidm.cs25

Successfully added Navbar and footer. not only for page navigate . u can also navigate to specific part of the page . which is done using searchparams from react-router-dom package . i will still need to modify navabar i will do it log that also a devlog . bye

0
jaisondavidm.cs25

Successfully added random short code generating . it is done using go package “math/rand” . currently it saving clicking counts but i not display analytics . i will add it later . I think this devlog is uploaded but it is not done but my work for another 1 hour is done . i next added custom url creating . cheking it already exists and it will create the custom . which is shown in referrence videos

0
jaisondavidm.cs25

Added protected and public routes to maintain the proper authentication system . if your logged in , you cannot go to login page until the jwt token expires . same like if your not logged in , you cannot go to home page . it is implemented to maintain proper auth workflow . Added loading component also

0
jaisondavidm.cs25

Successfully implementer google login and normal login and register in both fronend and backend . it is just base . i need to make protected routes and implement proper authentication and authorization . still making the site professional on the way

0
jaisondavidm.cs25

Add cors in backend to provide proper access to the frontend to access backend api services . and add test page and test the api endpoints .

Attachment
0
jaisondavidm.cs25

After struggling for an hour . Sucessfully made Database connection to backend . in the previous projects . i first test in local database and later use cloud database . but in this project i start to connect with cloud to perform the project soon as possible

Attachment
0