DEV Community

Cover image for Caffeine Critics: January update
Tom Nijhof
Tom Nijhof

Posted on

Caffeine Critics: January update

Several small changes were made to the Caffeine Critics project within the past month. To gather all these updates in one place, I have decided to share them here. So, here are the updates for Caffeine Critics within January.

UX: Using stars for rating

With vue-star-rating, you can easily add a rating system to your project. The rating can now be rounded off to half stars for more precision. Clicking directly on the stars is simple, but there are also plus and minus buttons located next to them for added convenience when using a mobile device or the user has trouble with the mouse.

Screenshot of star reviews

In the database, the rating will be stored as a value between 0 and 240. This allows for some flexibility in adjusting the rating system. For instance, 240 can be divided by the numbers 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 30, 40, 48, 60, 80, and 120, which means that I can swap the current 10-step rating system for a 48-step by simply altering the front-end without affecting the database.

UX: Clear error message

When logging in, registering, or creating a new drink, you could encounter an error. In the past, this error was silent and went unnoticed, but with the integration of vue-toast-notification, users are now provided with clear messages.
I think this lack of clear messages resulted in my first user disappearing, as their account was created but never verified, making the app seem non-functional for them.
However, we can learn from this experience and strive to provide a better experience for future users.

Screenshot of an error message

New feature: Filter on producer

With the addition of a new filter, searching for drinks on our platform has become even more convenient. Now, you can specifically search for drinks produced by "Albert Heijn", making it easier to find the one you want to review

Screen shot of the filter by producer

Bugfix: Github page + VUE.js = 404 for some files

Github Pages rely on Jekyll, which in turn uses _ as a default ignore pattern for files. However, this caused an issue when vue-star-rating was introduced, because it created a file named _plugin-vue_export-helper-*.js during the build process. Fortunately, the solution was straightforward - creating an empty file called .nojekyll in the public folder resolved the problem. The amount of time spent searching for this simple fix will not be mentioned…

UX: Populate database

An app launching with nothing in it will never succeed. Users can't do all the work, so I try to gather drinks from different producers to make it more user-friendly. Instead of covering multiple markets partially, my goal is to collect all teas and coffees sold in the Netherlands' big supermarket chains and add producers I come across. At the end of January, there were 555 total drinks.

The producers added in January

  • Pickwick
  • Clipper
  • Albert Heijn
  • Zonnatura
  • Lipton
  • Pukka
  • Bellarom (Lidl brand)
  • Bean Brothers
  • Uno a basta


The app is maturing rapidly, but unfortunately, no one is sticking around to use it. Our next goal is to scrape all tea and coffee products in Dutch supermarkets and make sure drinks and producers are fully CURD (create, update, read, and delete) for maximum efficiency.

Top comments (0)