DEV Community

Cover image for Project Idea 01 – Simple Url Shortener
Itachi Uchiha
Itachi Uchiha

Posted on • Edited on

10 2

Project Idea 01 – Simple Url Shortener

This post published on my blog before
Hi everyone! Today I'm going to talk about a simple project idea.

User Screen

These are the ideas you don't have to apply to all of them.

Optional Ideas

  • This shortener should have users. But it should be optional. For example, users can store their URLs.

  • Users can assign an end date to URLs. I mean, a URL cannot be accessible if today's date bigger than the end date. But this should be optional.

  • URLs can be password protected. As you know, a URL can have critical details. For example, you have source code.

  • Also, each URL can have a category. Which means users can create categories.

  • Users can filter URLs by categories, title, URL, short URL, description or between two dates.

  • Users can change the URLs' status. These are the statuses for this action (activate, deactivate).

Required Ideas

  • Each URL must have visit details. These details will bring analytics to users. You can use apexcharts, amchart, etc.

  • This chart should show URL visit details on the chart day by day. For example, 15.04, 16.04, 17.04

  • A user can filter analytics by between two dates. You may also want to have different data for a visitor. This can be regional data. Country, IP, etc.

  • Users must have the ability to remove URLs. But it should be logged into a table for legal reasons. This table can have user id, url id, removal date, description, IP address.

End-User Screen

This screen about the URL shortener screen. If the visitors are not registered users, they should see only input by default.

Optional Ideas

  • All users (registered or non-registered) can create custom URLs. For example, short.url/custom.

  • I'm not sure but you can still store non-registered users' URLs on the browser's cache like localStorage.

  • You should show a warning/information message to users like that Your URLs stores on your browser. You can't access your URLs from different browsers. You can register to access from everywhere.

  • Non-registered users can see their URLs' analytic details.

  • If a non-registered user registers to the system and this user has data in the localStorage, all data insert into the database and remove from localStorage.

Required Ideas

  • If a custom URL existing in the database, and the user who tries to create a short URL has that URL, you must show an alert like that 'You already used this URL before. Want to see it?'.

  • If this user doesn't have this URL but URL exists in the database you must show an alert like that 'This URL used before. Please try a different URL'.

  • Attention, this control should work on custom URLs. You should never control real addresses.

  • If a non-registered user wants to set a password, it should log in to the system.

  • If a non-registered user wants to set an end date it should log in to the system.

  • Non-registered users can't remove URLs.

  • Non-registered users can't add or choose categories.

Technologies You Should Use

Actually, you can use whatever you want. But if you want a framework these are good for this project. You can use these libraries and frameworks for the end-user screen and admin screen.

Front-End

  • Vue
    • Vuex
    • Vue router
    • Bootstrap Vue
  • React
    • React Hooks or Redux
    • React Router
    • React Bootstrap
  • Angular
    • NgRx
    • Angular's itself router
    • ng-bootstrap
  • socket.io client

These are popular libraries and frameworks for the front-end. But you can use vanilla js. You shouldn't describe yourself by a framework or library.

Backend

These are the frameworks and technologies you can use. But you don't have to use them. You can use your basic script.

Frameworks

  • NestJS
  • Express
  • Fastify
  • Flask
  • Django Rest Framework
  • Laravel
  • Symfony
  • Slim Framework
  • .NET Core Web API

Technologies

These are technologies that depend on your choices.

Database Technologies

  • TypeORM
  • Sequelize
  • SQLAlchemy
  • Django ORM
  • Eloquent ORM
  • Entity Framework
  • MongoDB
  • Firebase Realtime Database
  • Redis
  • socket.io server

Authentication

  • JSON Web Tokens
  • Firebase Authentication
  • Passport.js

What Will I Do?

These are basic technologies. I'll create a URL shortener using this idea. I'm going to use these technologies;

  • NestJS (Backend API)
  • VueJS (FrontEnd)
  • MongoDB Backend

I hope this idea helps you.

Thanks for reading :)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay