Skip to content

Latest commit

 

History

History
68 lines (49 loc) · 2.34 KB

README.md

File metadata and controls

68 lines (49 loc) · 2.34 KB
Raw

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