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 🙂