Project Showcase #5: ListX

user count

This initially started off as a quick and dirty Shopping List for my family. My mother was sick of using pen and paper to list our needed groceries, so I began coding.
This is what my initial draft looked like.
How ListX initially looked like The code can be found at lucakiebel/

There was a single List which we could add items to, it worked perfectly well for what we needed it for.
But, since I didn't implement any security into this, everyone could use this list as well. This wasn't really a problem, since the worst thing that could have happened was someone deleting our grocery list.
My family was fine with that, but I wasn't. I wanted to gain the experience of building a full-fledged web app, and this was just the project for that.

I had already used NodeJS, Express and MongoDB for the initial draft, so that's what I used to begin working on ListX.
The first thing I wanted was a Dashboard, that showed a user's lists and some basic settings. I headed over to Google and after a quick search I found VinceG/Bootstrap-Admin-Theme-3.
It had everything I really needed.
User control was the next thing I integrated. I used a token-based authentication system that was really clunky and not at all user-friendly. It involved looking up the MongoDB _id of Users, and could easily be the target of spoofing.
I made some light research into what was the best technology to use for authentication.
I didn't want to learn how to use Express-Passport, so I just stuck with bCrypt and easy self-made authentication with Sessions (more on password-security in this post).

I always develop API-first for the backend and mobile-first for the frontend, because that's what I am best at, so at this point I decided to go ahead and do some heavy server development (with everything still looking like the image above). This involved deciding how I would like the users to interact with each other. The primary use-case for ListX (as I thought) would be families using it like we do. So I named lists "families" and the Items were still called "Todo". This obviously didn't make much sense, even we (at this point) used 3 lists, so... 3 families...? They had to be called "Lists".

The design of the product home-page was easy enough, it was a fork of another website I had previously published (now offline and not in the wayback machine), the features were those 100vh sections and the large background-image in the header. Since then I did a lot of work to make it look like it currently does.

But with the new index page the Dashboard began to look completely out of place - and it was, being that it was developed in 2014 - so I needed a new one.
I didn't want to use someone else's work directly this time around, so instead of google'ing for code "examples", I looked for Dashboards that were already in use and that attracted mostly positive feedback. I never enjoyed doing that quite as much as just copy&paste (mostly because I can't wrap my head around anything more than text-style and (margin|padding)-spacing when it comes to CSS) but it was needed.
So began my journey in the quest to find the perfect Dashboard.
It was easier than I though.
While I was looking for a new design for ListX, I also searched for server providers that I could utilize to run the app. Even though I don't currently use their services, I "stumbled" upon DigitalOcean. If you compare the two, you already see that there isn't a lot of difference in the general design (at least that's what I hope you all agree on):
ListX and DigitalOcean compared What I wanted was:

  • a lot of white for a clean look
  • the Nav that DigitalOcean uses (to some extend)
  • listing of the "products" (Servers|Lists)

And I think I nailed that as good as possible.
The good thing with DOs approach (at least for me) was that they didn't use Bootstrap (like I am) but made the design themselves. This required me to build the page from scratch, which also gave me the possibility to make the design responsive, because DO doesn't have a design for mobile devices.
Now, this still wasn't everything. This is how my whiteboard for projects currently looks like:
My Whiteboard On the left there you can see what I am currently working on and in what stage it is. As you can see I started with the user settings.
For those I wanted users to be able to change their email-address and name, set a username and their physical address. The design was copied from the dashboard, I wanted everything to fit together for a seamless user experience.
Since I need to comply with EU data privacy laws, there is also a button to delete all data associated with a user and one to mail this data.

The next bullet point is list settings.
They too had to look like the previous pages of the app. Though here we needed two different versions, one for normal users of a List, they really only needed to see basic information about the list, this includes the email-address of the list's admin and the ability to leave the list. The second version is for the list's admin. Here the admin had to have the ability to change the data that was set in the making of the list. Also this page has elements for inviting new users and for removing some from the list. This page will - in future updates - include the ability to delete permanent items, and some more stuff.

After that the last thing besides some performance that I did is speech recognition. I found TalAter/annyang somehow (I really can't remember how) and implemented it, it's really, really easy to get started.

You can view the projects I am working on with ListX here: ListX/projects.

Project Metadata:
  • Name: ListX
  • URL:
  • My Function: Developer
  • Project Type: Shopping List / Webtool
  • Language: NodeJS

Luca Kiebel

MEAN-Stack Developer (and PHP if I *have* to); Student 👨🏼‍💻🎓

Münster, Germany

Subscribe to Luca Kiebel

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!