Some background

Some time has passed sinced I presented the first version of my web-application “MensaVue”, which was my first try at the JavaScript frontend-framework Vue.js. The app basically fetches canteens and their corresponding meals from the OpenMensa-API and lets the user select, browse and filter those. At the time I included the Vue-code via CDN and wrote the app entirely as one index.html file. It worked okay, but as you might guess this is a nice approach for a small prototype to test the framework, but in terms of structure, readabilty and extensibility a middle-scaled catastrophe. As i progressed in my work with frontend-development and especially within Vue I gained some experience and made a note in the back of my mind to re-write this nice application in the proper Vue-way some day. Currently I am in my exam-phase at university and had a bit of stress, but I did the rewrite now anyways and had some fun, also the application runs a bit better now, is open to more development and looks a lot better!

The implementation

Here is what I did:

  • Re-wrote the app with using .vue-components and a proper stucture.
  • Implemented some small new features.
  • Used Vuetify Material Design components (again).
  • Used webpack as minifier and bundler.
  • Set up proper github-pages branch and “deploy-pipeline” (a shell script).

As already said, I am proud of this new, better and more stable version, that allows implementing new features way easier.

This is what the result looks like.

Outlook

For the future I plan on extending the app a little with those features:

  • Establish proper mobile layout (maybe pwa, never did that before though).
  • Cache selections.
  • Let users favourite meals & canteens.
  • Implement sharing-option for meals.
  • Fix security issues in node-modules.

Check out the code on GitHub.