/wine-beer-cellar-vuejs

Frontend case: Wine/beer cellar using Vue.js

Primary LanguageHTMLMIT LicenseMIT

Wine & Beer cellar Vue.js App

Simple app listing wines/beers with detail view and option to add new items to the list.

It uses localStorage to store the data and also as state using Vuex. If there's no data on the localStorage with reads an initial list from a local json file. When add new items to the list, the image is gave on Cloudinary (a cloud-based image and video management service) The solution uses Vuex in order to easily be changed to work with an external API removing the code where it saves and read from localStorage or combine them to have persistent state. It allows to reload the item detail page and, also filter and/or sort the item without doing extra requests to the API. This idea is based on app that will not have an huge quantity of items to list, otherwise it would be better to implement pagination on the API. If you prefer for an app simple like this and, few products, you can fetch the data from the API and remove the Vuex and implement a simple logic. Check this reposity for more details.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.


Snyk Code Coverage and packages vulnerabilities report.

Snyk Vulnerabilities for GitHub Repo

✓ Tested 447 dependencies for known issues, no vulnerable paths found.

File % Stmts % Branch % Funcs % Lines Uncovered Line #s
All files 80 100 62.5 80
Filters.vue 50 100 33.33 50 49,53
WineDetails.vue 90.91 100 80 90.91 52
----------------- ---------- ---------- ---------- ---------- -------------------

Test Suites: 4 passed, 4 total Tests: 13 passed, 13 total Snapshots: 1 passed, 1 total Time: 7.057s Ran all test suites. ✨ Done in 9.65s.