/poke-shop-vue

Primary LanguageVue

Frontend Personal Project - Poke Shop

Table of contents

Overview

The challenge

Your users should be able to:

  • (V) View the optimal layout for each page depending on their device's screen size
  • (V) See hover states for all interactive elements throughout the site
  • (V) Add new item to the cart
  • (V) See the items in the cart even when the pages reloads
  • (V) Search a pokemon by name
  • (V) Change the item quant in the CartPage

Screenshots

OBS: THE IMAGES MAY NOT BE IN THE SAME SCALE.

Static Preview

My process

Built with

  • Semantic HTML5 markup
  • Flexbox
  • CSS custom properties
  • CSS Grid
  • CSS Animations
    • CSS Transitions
    • CSS Transform
    • CSS Animate.css library
    • CSS CSS-animated delicious hamburgers library
  • Sass
    • Sass Variables
    • Sass Mixins
  • Vue.JS
    • VueX
    • Vue Router
  • Mobile-first workflow

What I learned

This project teached me a lot: I had to learn new js functions such as map and reduce, how to better organize my store with modules, how to create and export js files so I can reuse them in other components, how to use router-view transitions, how to work with pagination & carousel components and how to better work with promises.

Continued development

While working in this project I realized that promises can be confusing, so I want to create another project with APIs to get used to it.

Useful resources

Author