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