After deploying Videoknight to Heroku I was full of confidence. I had just completed my first full stack web app. I was so ready to start working on Makro. Little did I know about the problems which were patiently waiting for me to find them.
This time I started with the back end. At first it ended up looking quite the same as with Videoknight. When I was done with that I tackled the front end. I had simple layout (designed by my GF) to aim for and based on that I made the decision of the needed components etc.
First up was search. The actual search was really simple at first; just array.filter based on user input. No sorting of the results whatsoever. This is where I encountered the first big problem: it didn’t work. The search component was made to get food data from database when mounted (no idea why I decided to get it every time it mounts instead just when created – I did change it later on) and save it to variable. But for some reason the filter method did not return any results and the error message was ‘TypeError: undefined is not an object (evaluating ‘this.searchTerm’)’. I spent quite some time trying to debug this but eventually had to ask help from StackOverflow. The reason was that for some reason the data I had downloaded from Fineli had some foods that were missing the name key – value -pair completely.
After the search component was working I made component for the foods the user had added. After giving it some thought I decided to make a separate component for different meal to avoid duplicate code. So I made component AddedFoods which had a child component foodTable where the foods user had selected were passed as props. AddedFoods handles the total count for macros and calories while foodTable handles the totals for the meal. I think with these two (at least at this point) I didn’t have any significant problems. Maybe some minor hiccups calculating the totals when given the user the possibility to change the amount of the food added afterwards.
If my memory servers me right at this point I was ready to make login, register and navigation bar components. Nothing special with them. After I got the registration and login working I started working on the possibility to add (missing) foods to database if the user was logged in, the ability to edit their own information (height, weight etc) to get their base daily calorie expenditure. Then the last feature which was the possibility to save the day the user had planned to database. I’m quite sure that there wasn’t any big problems with these and Makro was almost ready to be deployed.
Or so I thought. I had forgot to work out a solution for the selected foods to be saved somewhere so that they wont disappear if the users goes to check their dashboard or anything. For this I decided to use local storage. I had to code some parts again so that the foods saved in local storage would be loaded when navigating back to dashboard and so on. I almost forgot to guard routes and while doing that I realized that if I want to have my app have any traction, it has to be over https instead of http.
After I was done guarding the routes I started working on the https part. That didn’t require any changes to the code but just some stuff made on server. Luckily for me there were step-by-step guides for setting up nginx and LetsEncrypt certificate for my app. And I was done. I deployed Makro to my DigitalOcean droplet and posted about it to couple of forums just to let people know and to see if anyone would be interested. By the time I’m writing this Makro has 36 registered users which is huge for me. After I got Makro online and told people about it I realized that most of the heavy lifting is done on the client side. That happened actually by accident since I’m much more comfortable working on the front end but it is a good thing. The droplet I use to server Makro is not that powerful so that is not stressed as much as it could have been.
Later on I have added couple more features (replaced the array filter based search with vue-fuse) and will continue on working Makro as much as needed. I had to learn a lot more stuff during this project than I anticipated based on my experience with Videoknight. I got better with backend and MongoDB and of course with Vue.js. But I still have a lot to learn.