Rick-And-Morty-DB

This is my second project with using Vue.js and vue-ecosystem
using open REST API with data about all character from Rick and Morty cartoon

---

Local install and other command

Install all dependencies

$ npm i

Run local-host and hot reloading

$ npm run serve

Build a prod version with minifying code

$ npm run build

Build a prod version with minifying code

$ npm run dev

Run test

$ npm run test

---

Some screens with explanations

Main page

We have a control panel, where we can change the current page(1 - 30) by entering a value in input, or increase/decrease by click at next/prev Every page contains up to 20 cards, and if you click at any, you change active card (on the left side) and could read more information.

Random page

This page generates random id, and get a character with this id from DB using HTTP request after that render this info into the card and we can see it. Too, for better UX I block scroll on this page using watcher on $route. At one time, the page cant has more than 3 cards.

Search page

This page contains 2 blocks:

Filters - consist 2 select with 'gender' and 'status' options and text input. After the change, any of it app create HTTP request to the database and get results with data. If DB hasn't data with this filter - the user sees label about it.

Results - up to 20 cards with active card(like at main page)

Other

Status - the color of dots is calculated before rendering according to status info from request. Navigation - change route of the app without reloading the page

Worked with minimization, choose better font extension, add "tree shaking" and minimization plugins for .js and .css

All techonolies here: Vue, Vue-router, Vue-test-utils / Jest , Bootstrap, Axios, Webpack, SCSS, ESlint, Babel, Prettier, npm