Short Message Templates with Vue.js

A short message / template editor with Vue.js

Overview

This app is a basic editor for short messages, with a couple of “extra” features. The user can use free text, location information and previously saved snippets of text to assemble a short passage of text, which can be saved as a template. I might convert it to a mobile app, to allow actually sending the messages as SMS, or connect to a web to SMS service — though this is rather unlikelly since it costs too much for a hobby! The editor relies on the contentEditable attribute on HTML elements which is a web thing.

I made this app while I learn Vue.js and I mix and match various features, techniques and components. The code -while heavily documented- might be strange at times, or make little sence, and certainly could be done differently — it’s part of the process.

webpack 3 is used to run this thing, with Mocha and expect for TDD. I also use Vuex, vue-router, axios, the Google Geocode API for location suggestions based on user input or GPS position (if available), and Vue-multiselect. vuex-persistedstate is used to save the state in localStorage, but it shouldn’t be difficult to use Firebase or something else instead. The Bulma framework is used for styling (because, why not) and a single Buefy component is loaded too.

ToDo

• Fix the issue with vuex-persistedstate saving the currently edited template without pressing save first — my bad!
• Use the Selection API to better handle location / snippet insertion…
• …maybe allow editing of previously entered location information of text, or finally…
• [ ] …investigate Quill integration — though a full-fledged editor is beyond the scope of this project!
• Learn how to test / mock Vuex actions and mutations!
• Localize the interface· currently, only the location suggestion that is returned from the Geocoding API is localized. Maybe use vuex-i18n?
• Turn this to an Android app, maybe iOS too, to actually send SMS, or…
• …investigate the option to use a web to SMS service
• So much to do so little time!

Instructions

If you want to run this project, you will need a Google Geocoding API key, saved in Vuex state — there is a related comment in /src/js/vue/store.js.

There are 4 npm scripts:

• npm run dev starts the webpack-dev-server with your local IP at the default port (8080), for you to develop your application. I still have an issue with rebuilding and injecting the stylesheets and I will find a solution, sooner or later…
• npm run build compiles production-ready styles and scripts
• npm run test runs the Mocha / expect tests, once
• npm run watch runs the above tests continuously, to enable test driven development