Dliex — A web-based application to save links and collections of links in a beautiful UI
This article was originaly published on June 26, 2020, on abubakersaeed.com before migrating it to here.
Idea
As I'm in a work field that improves and evolves constantly, I've to study a lot to keep up-to-date and relevant. There are really nice and well-written articles out there, along with really informative conference videos. After reading/watching them, I want to save them as links or a collection of links inside an app so that if I want to revise them, I can visit them again.
Design and development phase
Of course, there are browser default bookmarks that are really useful for this job. Still, I don't like their interface much, plus the options are limited for what we can do with them ...hence I decided to create my own web-based application with my preferred styling and options ...not to mention that if we are using that same browser in front of other people, e.g, client, live coding, etc. We have like a thousand bookmarks, it makes the situation really weird — we type something in the address bar, and suggestions keep showing up — yeah, really weird situation...
So, I start working on the design/prototype of the app using XD, and once done, I start coding it.
I created this as a side project, which later became my personal project. The project's original name is "Life Experience"; it literally means anything that I'm experiencing in life — it's a strange name, I know — but it makes sense with me, and I'm not planning to change the name ever. Then later I gave it a "Dliex" name, and it stands for "Digital Life Experience" ...still includes life experience :) I created this project back then in 2018 and have been using it since then to save links and/or collections of links.
Simplicity, Tech & Features
I’ve kept it straight and simple by only adding stuff that I actually needed without anything extra that’s only for presentational purposes — and so, the app is extremely easy to use.
Because I knew I'm going to use it for a long time ...I'd like to go with a stack that will stay around for a longer time, in this case, it's the web core technologies themselves.
So, my tech stack is:
HTML
CSS
SVG
JavaScript
JSON
...mostly web standards.
There are only four main components:
Theme preference: To change themes.
Search box: To search item or items in many different ways.
Single link card: Contains only one link.
Collection of links card: Contains many grouped links of the same topic or same event.
Themes
The application has two themes. I was playing around with different UI's and ended up creating two color schemes because one is just not enough for me ...like for real.
1. eBlue
If you know me, you probably know that I love nature ...without doubt, blue is inspired by nature, hence a sea colors for this theme.
2. ePink
I also love neon futuristic-type colors, and so in this theme I combine them; thus got this futuristic-looking gradient pink theme.
Note: In the previews, I am not using real content — I just randomly added stuff so that I can show the designs.
Final words
I've enjoyed working on this project on both development and design phases, and now I use this app to save links — useful study-related links. I might share or open-source this project with the world, or might not. At the moment, I'm not sure.
In the future, you'll see most of my projects that I've created and going to share are actually useful and can be used in real life :) Most of my projects are for my personal needs.