Public Demo: https://bisnow-contacts-ui.netlify.app/
Here is my implementation of a contact list Vue application. The code challenge requirements called for a simple UI for searching through a contacts list. Here are the basic foundational factors that I had to keep in mind for this project:
- Email validation on form submission, with UI alerts/notifications of errors
- Being able to search more than just the email, optionally
- Ability to sort results, based on custom parameters
- Allow users to be able to highlight/save contacts to their bookmarks, allowing for more opportunities such as data collection for custom personalization.
My goal was to build an interface and application structure that lays the foundation for allowing user’s to ability to fully “manage” a customers list.
- Routing
- Vuex Store Implementation
- Searchability
- Filtering & sorting
- Saving Favorites to a session
As for the framework, I went with Bootstrap. I usually setup a SASS/LESS implementation but decided to keep the styling files to a minimum for this project.
Leveraged ESlint and prettier to keep the format of code consistent across all application files.
Created a Vuex store to handle global functionality across multiple components. Since the store was created, I used this as a opportunity to play with saving bookmarks to a user session ($store wise)
I used a simple regex validation that displays the format error to the user, but since I’m running the search on @keyup instead of @click button, the validation runs on the fly, and only impacts the UI visually.
npm install
npm run serve
npm run build
npm run test
npm run lint