Listify – Web app

This was my first web development project. I focused on the frontend while the backend was already given. ‘Listify’ is a nodeJS app written in HTML/CSS/JS/JQUERY and also using the jqueryUi Library for drag’n’drop. Features that were included into the app are create lists, rename lists, create cards, rename cards, delete lists, delete cards and swap both, lists and cards through drag’n’drop. Probably I’m going to implement more features in the future.
The interface itself was designed in order to be as minimalistic as possible for the user to ensure a quick start and easy understanding.

 

 

Create, edit and delete lists

Use the big plus in the upper left corner to add new lists to your board. Rename lists or cards by simply clicking on its name. To edit a whole list click on its edit button in the top right corner. The edit button transforms itself into a remove button. By clicking it the whole list disappears. If you want to delete single cards from a list, bin icons will appear when clicking on the edit button. An empty input also leads to the removal of the card.

 

 

Drag’n’drop

All lists and cards are drag- and droppable. Simply drag them by clicking anywhere on them. You can drag items in between lists or within its own list. Items can also be dropped on an empty new list.

Without further ado, enjoy trying listify for yourself!

 

Do you want to few this in full screen? View here

Write a comment