Project Idea 01 – Simple Url Shortener

English Programming Project Ideas Web App Ideas
Ali
Project Idea

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 🙂