Tip Bank

How much did I make again?

Have you got a bunch tips counted, but have no place to sort them or know how much you actually made? This MEAN stack app will answer your call. Enter what you have made on a day and how many hours you worked, then let the app take care of the rest.

Features Include:

  • See the grand total of how many tips you made over all the hours you have worked
  • See how many days you have worked a certain time period and how many tips per hour you made as well
  • Be able to add, edit or remove a day thanks to the RESTful API

Another personal app made by myself that is currently still a work in progress, but with all the work that has gone into the app, it definitely deserves a spot in the portfolio. This app actually started out as a native JavaScript program that I made last summer. It was capable of showing the separate days, how much you made, the hours you work and the tip and hours worked intervals. This was made possible by reading the data from a local JSON file.

It wasn’t the greatest however, if I wanted to add a new day, I would have to add it to the physical JSON file. Which was just… I don’t know how to word it, but it just didn’t felt right because I wasn’t able to add a new day in the physical app. So when we were taught Full Stack Programming and learned how to build full stack applications using the MEAN stack of programming languages, this gave me the chance to upgrade my app.

An interesting part of this app was that I need to create a date converter. When adding a day it uses a date field that sends a value like 2018-09-30, but when initially I created the JSON, I made the dates like September 30th, 2018. So to fix this, the converter took parts of the date string and converted it based on what value it was.

As I mentioned earlier, this app is currently a work in progress and the put method is part of that category. Now, it does do it’s job and edits a day, but it’s just not complete yet. The fields need to be properly checked to make sure they are not empty before sending, which should be done by using ngModel for two-way binding of the data.

The put method is definitely on top of the list of things to do, other things will include adding a loading screen, clearing fields once filled out and posted and making the data selected the newest day by default when showing the all the days. Some of this stuff will be easier to implement into the app, but they will all help increase the user experience. Once done with the needed stuff, I hope to add additional features like a search bar and maybe separating days by the day of the week, but I’ll focus on the needed stuff for now.

While I’m still working on getting the MEAN app ready, here is what the JavaScript app looked like.

Want to see this app’s code? Here it is on my GitHub repo, though be warned that it is still a work in progress.