Project Idea 01 – Simple Url Shortener
Tags: ideas, webdev, urlshortener, sideprojects
Published: 2020-04-15 10:17:21

*This post published on my blog [before](https://aligoren.com/project-idea-01-simple-url-shortener/)*
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 :)