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
Cypress Component Testing
Run Unit Tests withnpm run test:unit # or `npm run test:unit:ci` for headless testing
Cypress
Run End-to-End Tests withnpm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing
ESLint
Lint withnpm 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