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 :)