SecureURL – A JWT Authenticated URL Shortener

A secure URL shortener with user authentication and a personal dashboard to manage links.

Comment

Inspiration

While browsing the internet and sharing links with friends, I realized that many URLs are unnecessarily long and difficult to share. URL shorteners already exist, but most simple implementations online do not include user authentication or a way for users to track the links they create.

This inspired me to build SecureURL, a URL shortener that not only shortens links but also allows users to securely manage their links through authentication and a personal dashboard. I wanted to explore how authentication systems like JWT can be integrated into a simple but useful web tool.

What it does

SecureURL allows users to register, log in securely, and generate shortened URLs. Once logged in, users can access their personal dashboard where they can see all the links they have previously shortened.

The application focuses on combining simplicity and security, ensuring that only authenticated users can create and manage their shortened links.

Key features include:

  • User registration and login
  • JWT-based authentication
  • URL shortening functionality
  • Personal dashboard to view previously generated links
  • Protected routes for secure access
  • Simple and responsive user interface

How I built it

The project is built as a full-stack web application.

The frontend was developed using React with TypeScript and styled using Tailwind CSS to keep the interface simple and responsive. React Router was used to manage navigation and protected routes.

The backend was implemented using Node.js and Express.js, where REST APIs handle authentication and URL creation. JWT (JSON Web Tokens) is used for user authentication and session management.

The application stores user accounts and shortened URLs in a MongoDB database. Axios is used on the frontend to communicate with the backend APIs.

Challenges I ran into

One of the main challenges was implementing authentication properly and making sure protected routes work correctly on the frontend. Handling login and logout states so that the UI updates correctly without refreshing the page also required careful state management.

Another challenge was connecting the frontend and backend smoothly, especially managing tokens and ensuring secure communication between the client and server.

Debugging small issues such as token handling, route protection, and UI behavior helped me better understand how authentication systems work in real web applications.

What I learned

Through this project I gained practical experience in building a full-stack web application and integrating authentication into a real system.

I improved my understanding of:

  • JWT authentication
  • React routing and protected routes
  • API communication using Axios
  • Backend API design with Express
  • Managing data using MongoDB
  • Structuring a full-stack project

This project also helped me learn how frontend and backend systems interact in a real application.

What's next for SecureURL

There are several improvements that can make SecureURL more powerful in the future:

  • Click analytics for shortened links
  • Custom short URLs
  • QR code generation for links
  • Link expiration time
  • Statistics dashboard for tracking link usage

Built With

Share this project:

Updates