Create a single page application that displays a list of items. These items must include a picture and a description.
The application functionality should satisfy the next use cases:
-
The user should be able to sort the items on the list using a drag and drop functionality.
-
There should be a counter in the page that shows how many items are being displayed.
-
Each item should have the actions: edit and delete. Edit allows a user to update the image of an item and the description text. Delete allows a user to remove an item from the list and update the counter.
-
A functionality to add a new item should exist. This functionality consist on a form to upload an image (jpg, gif and png extensions of 320px x 320px size) and a description text (max chars 300).
-
All the actions of the application should be done without refreshing the page (sort, add, edit and delete) and saved immediately.
-
On a page refresh action, it should be displayed the last state of the list.
Tools used for the development: vanilla JavaScript with jQuery and dragsort plugin, html5, css3, sass, with Firebase of database and storage, this site was generated for static site.
This project was realized without some JavaScript Framework like: angularjs, react, riot, vue.js, etc.