My first Vue.js app - DevDiary #0

Welcome to my first devdiary. Traditionally we programmers start to count with zero and I hope you forgive me the joke calling it accordingly number zero.  Let's start at the beginning of my journey to this point. Don't worry I will not write anything about the Egyptians, the invention of the computer or my birth. It starts around a year ago, when I met with a guy named David. He works at the a voluntary association named kofee. It is a German acronym and translates to coordination office for volunteering and engagement (the french word). I am from Germany by the way and the app is in German, but no worry I will explain everything. kofee does exactly what the name says: They find a fitting voluntary work for you. Currently they do this by meeting people face to face, which has a capacity very limited by the size of the consulting team. When I met David, he presented me his idea of having a database with all the voluntary organizations, that the consultants and more importantly everyone could access to find a fitting voluntary work. Then I studied a semester abroad (which is a completely different story), came back and after another meeting with David and his colleague Ilias I started to work on the project on voluntary basis. The idea developed and now it is a web app that is on the brink of going into closed beta.
First of all I want to show you how it looked a month ago just with HTML, minimal CSS and some Javascript. The start menu consists of title, some text and two buttons. The first button is for "finding voluntary work" and the second is for "offering voluntary work". If you press on "finding voluntary work" you see something like the second picture. That is how it looks to find a voluntary work. The small two elements are input elements. The first one is to toggle between "finding voluntary organisations", "finding voluntary jobs" and "finding both" and the second input element is to choose impact areas (forests, elders, children...) you are interested in. The second part consists of one card for (in this case) every voluntary organisations, that are active in the chosen impact areas.

It was fun to build, but it doesn't look very good and if I imagine code all I did in my current version without a framework, then well that would be a lot of work to organize all the code, so I don't have to search hours for the right line to change, when developing the next version. I already mentioned in my last article how I chose the framework for my project. Vue.js has a community that is big enough and is capable of anything, so to be honest the only reason why I chose it was that I wanted to start with the project as soon as possible and Vue.js is said to be easier to learn than the other known alternatives. A few words to my stack: I am using Vue.js as a framework, additionally Vuetify to have that material design in all components without writing CSS and firebase, which is a backend-as-a-service provided by google, so that I can communicated with a database without writing backend-code. Funfact: I did "learn" PHP before recognizing, that firebase is the easier and faster solution, which costed me round two days of development, but that is totally fine.
Alright now it is finally time to look at the current webapp.

The first picture is the the new start menu. Now there is a header over every page with a logo, that leads back to the start menu on the left side and a button for the "organisations area" on the right side. The focus is on the "start" button that leads to the user area. I change it that way because most users will want to find some voluntary work and they should to do the minimum work possible to do that. I amplified the effect with the colors and the form of the buttons.

If you press on start you will be on the user area. Remember the jobs thing? We pushed it back to some future version. Our first step is to create a minimum viable product. That means the first version really only include features, that the app wouldn't work without. Apart from that not really a lot changed except that it looks nicer thanks to Vuetify. Also the cards have an image now (at least some) and it is possible to visit the organisations' websites and write an email. Also there is a touch of corporate design by using the orange and the blue of the logo to color the buttons. You probably see, that there is an issue with the cards' sizes. I will work on that for the next version.

If you press on the button to the "organisations area" button in the right corner and login, then you see the card of your organisations with a button called "edit". What you see on the picture above is the edit mode. There are two buttons: One for saving and one for going back. The whole menu is too much clicking for my taste, so I will rework with until the next version to reduce the number of clicks you have to do to edit your card. Also we decided, that every account should only have one organisation and only organisation can only be edited by one account. The communication with the database is implemented, so it actually works. Maybe you noticed the "Yee Mans Club" Organisation. Well, that was not me. I don't want to call names, but...

*Looking in general direction of David or Ilias*

Before we start the close beta there are some things to do. Because I am kind of lazy right now I will just make a list. Let's see how much of that I can do until new Friday, when I plan to do the next devdiary.

Changes until next version ordered by priority:

1. cards: They should all have ruffly the same size. Images will cut quadratic and organisations without an image will get a blank image
2. cards: The name of the organisation should be on the image
3. cards: The description will be replaced by a short catch phrase and there should be three questions, that open when you click on the card
4. organisations menu: reduce the number of clicks necessary
5. account system: Only one organisation per account/ one account per organisation
6. account system: Implement e-mail confirm
7. account system: Implement password reset

I will tell you next friday how much of it I managed to do. This friday (tomorrow) and the following days is reserved for learning more Vue.js. You aks why? My last article explains everything: https://arturkunz.blogspot.com/2020/03/this-weekend-is-perfect-opportunity-to.html

Have a great day!