mariatryta / manager-search

Pokemon registry app

Build on top of Vue & Vite and using Axios for fetching JSON data, this app allows you to search through managers based on their first and last name.

Main feature is accessible autocomplete, that user can navigate through with keyboard and is accessible to screen readers.

Missing feature - currently no unit testing is present on the project. See to-do list bellow.

Live site: https://manager-search.netlify.app

Repo: https://github.com/mariatryta/manager-search

Project Setup

• Create an .env file and copy data from .env.example
• Requires node v14

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Cypress Component Testing

npm run test:unit # or `npm run test:unit:ci` for headless testing

Run End-to-End Tests with Cypress

npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing

Lint with ESLint

npm run lint

To-Do

• Create search input component = [ ] show 2 managers in list + rest in overflow = [ ] enter closes search and selects manager
  • hide dropdown menu when whole component looses 'focus'
  • style component
  • click, space, enter should select value
  • arrow down enters dropdown and moves down a value
• Fetch JSON data
• Filter data
  • case insesitive
  • name + last name as one string
• Ability to return to input with value after lost focus
• Accesibility
• Unit tests
• Make more reusable