veltadestiana / vue-buefy-grid

💸experimental voucher listing with grid layouts made with vue.js, webpack and buefy.

Voucher Listing with Grid Layouts

Voucher listing with grid layout working search functionality made with Vue.js, Webpack and Buefy.

Getting Started

• Clone this repository and install dependency

    $ cd (root-project)
    $ npm install

• Run the application

    # serve with hot reload at localhost:8080
    $ npm run dev

    # build for production with minification
    $ npm run build

    # build for production and view the bundle analyzer report
    $ npm run build --report

Using

• Vue.js 2.5.2
• Buefy 0.6.1
• Webpack 3.8.1

Screenshots

• On Desktop and Mobile

Notes

• Buefy is used to make the whole crafting session faster, and as for the grid system itself I personally implemented the multiline feature to display certain amount of cards before the line breaks.
• Redesigned the card using corner ribbon, grid layout and coupon tags. Added some animations here and there. For some reasons, I just want to experiment a little :)
• What could be improved? Filter functionality to sort the tags, as for this stage I only assume that users can only search based the title/name. The reason being is because I don't have enough data to show/filter with, so I guess this will be enough.