catmash

#Heroku https://front-end-catmash.herokuapp.com

A Vue.js project

The goal is to create an application with two pages.

• Arena page: In this page you can vote the cutest cat between of two cats.
• Ranking page: In this page you can see all the cats and how many votes has every cat.

To achieve the above I chose to develop a Vue.Js app.

• I created the NavBar in order to switch the pages.
• I created the store and I imported the api.
• To choose between two pictures I had to create a function that print two random pictures from the array by using a v-for in the template and these two pictures are not the same.
• Also, everytime that you pick a picture I update the store with the new count.
• Last but not least, I get all the images from the store and print them in the Ranking page with their values by using a v-for in the template.

Build Setup

# install dependencies
npm install

# 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

For a detailed explanation on how things work, check out the guide and docs for vue-loader.