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 :)
Top comments (0)