Rick-Morty-Api-Exercise VUE

Challenger week 4 - 5 Empathy Academy Front-End Path

This challenge is developed with VUE framework.

Main branch have the first week working with Vue.

Vuex branch have my second week working with Vue and I will be using Vuex to improve my implementation from the first week.

gh-pages branch have deploy of Vuex Branch

Requirements from Vue challenge:

• Create Basic HTML and CSS structure in App.vue without any logic. ✅
• Modify text input so it makes API calls to rick & morty API using the filter endpoint. Save the results and print the characters by console. ✅
• Paint dynamically with v-for the characters with its name, status and image. ✅
• Modify the filters so they use the filters inside characters and print them dynamically with v-for. Make the filters work also.✅
• Move each filter, character card and input to a separate component but ensure the application works properly after these changes.✅
• Make one API call per filter, following API specification.✅
• Put CharacterCard inside a Grid component to use slots.✅

Bonus requirements

• Create FilterList component that allowed us to change the component used in the v-for.✅
• Add fade-in transitions to the filters using the Transition components pre-built on Vue.✅
• Add a button on the page so it shows a list of all the episodes. Everything else should remain the same.👨🏻‍💻

Requirements from Vuex challenge:

• Create a basic store and move some data from your components to the store.✅

• Use getters and the state to retrieve the info from the store.✅

• Create mutations that modifies the state.✅

• Create an action to call the api.✅

• Divide the store en two modules, these modules should interact between them. Use namespaced:true.✅

  Symbols Leyend:

  - ✅ complete
  - 👨🏻‍💻 In process
  - 👨🏻‍🦯 I want to implement but i don´t start or I don´t know how to start ahahaha
  - ❌ I don´t do it
  

  DEMO IS HERE:

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint