I just completed a Feedback system for monitoring if a FAQ post was helpful or not. Every post in a support section has little feedback buttons at the end of the post - a little "Was this Helpful" with a yes or a no. If they hit "Yes" It just logs the date, and the post id - If they hit no, it asks them simply why it wasn't helpful and the date and post id. When an admin logs into the backend of Wordpress there is a admin panel that displays all the feedback across all the posts. It displays the newest posts first and allows the admin to filter, sort and export the feedback from the system.
The front end is just a little JQuery - to submit the feedback with Ajax and display the thank you messaging.
The backend system is built in Vue.js. It has screens for sorting by post, sorting by new, or sorting by response type; good or bad. When you click on a post you can view all the feedback for that single post. You can also sort for all feedback that is good or bad, which is very useful at diagnosing any potential confusion or problems with the article.
The main reason I wanted to use a JS for this backend functionality was so that it wouldn't have to be managed with a bunch of url variables. I wanted the system to be easily input into a Wordpress install, and not require a bunch of PHP built pages. Using JS meant I could just hit the db, and use PHP to return JSON objects that the JS could then update the DOM with. It meant the real computing was handled on the client side. The only PHP I needed was to accept the post calls - post calls to insert the db records and post calls to return the records.
I chose to build it in Vue since it seems to be garnering a lot of current interest and it seemed like an appropriate use case. The main reason I wanted to make the dash in a JS framework is so that it acted like a single page application, with a few screens and nice responsive sorting. Vue looked like it was perfect and I wanted to give it a try.
Building the menus was really easy using Vue. Each screen is a Vue template made in HTML and using variables inserted with string interpolation. The buttons and actions just trigger methods that are described in side of the individual Vue components.
Of all of the new JS frameworks (Angular, React and Vue) Vue was approachable and easy to work with. I watched a little course over it on Lynda.com and was able to use what I learned directly in the project. The whole thing was completed in about 3 days.
Screen Shots
