Caffeine Critics: January update
Tags: webdev, ux, opendevelopment, development
Published: 2024-02-14 14:40:56

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](https://www.npmjs.com/package/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo7a7k95oi95oh5bmpgf.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wi5e94nsuq3nmr45gnyt.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsqcijzsto3jbf3f3gbx.png)

## 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

## Conclusion
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.