Dliex — A web-based application to save links and collections of links in a beautiful UI

Idea

As I'm in a work field that improved and evolve 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 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 browsers default bookmark that is really useful for this job but I don't like their interface much plus the options are limited of 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, and we have like a thousand bookmarks it makes the situation really weird — we type something in the address bar and suggestion 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 became my personal project later. The project 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 include life experience :). I've created this project back then in 2018 and using it since then to save links and/or collection 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:

1. Theme preference: To change themes.
2. Search box: To search item or items by many different ways.
3. Single link card: Contains only one link.
4. 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 colors 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 together; thus got this futuristic-looking gradient pink theme.

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 my personal needs.