A content management system allowing to organize sources in a diaporama to be played from a webpage.

Demo

Why did I do this?

I already used a very simple HTML/JS app, the first version of hexibits, to show slides from multiple media sources on TV screens at work. But it was pretty limited and content management was done by manually adding files to a git repo.

I love to use real and useful projects as learning opportunities, so I used Laravel to build a dashboard to manage the slides content. The app allows to define displays to groups many screens together and accessed using an URL(which can be password protected). Then, within a display, you can do CRUD operations on screens. Each screen has a title, duration, source and color. The source can be one of the following: URL, image, video, html file or zip file(containing an index.html file at its root and any relevant files).

What I learned

I got a better grasp of Laravel by doing yet another small project with the framework. Also, the screens management part of the app is pretty interactions-heavy, so I used JavaScript to make it snappy. At first, I tackled it with jQuery, but the code was messy and bug-prone. After some time, I rewrote this part with Vue.js. Since I have been doing Angular, I was curious to see the differences with Vue, whose progressive feature became obvious pretty quickly. I kept jQuery UI for the drag-and-drop mecanism to order the screens, because if it ain't broken, don't fix it ;).