How mjunhaochen/contact-manager works
Contact Manager is a Vue app for browsing and maintaining a contact list. Users view, search, and filter contacts, add or edit validated records, and delete or favorite them; mutations persist in browser localStorage. The sampled source confirms the router, view-to-store actions, and persistence calls. The README also documents these capabilities. The HTML entry file and any unsampled implementation details were not provided, so they are not mapped.
Main entry points: index.js Route Dispatch · Home.vue Browse Contacts · contacts.js Contact Store · AddContact.vue Add Contact
Components 11
Application Shell
- App Bootstrap
src/main.js - Navigation Shell
src/App.vue - Route Dispatch
src/router/index.js
Contact Workflows
- Browse Contacts
src/views/Home.vue - Contact Card
src/components/ContactCard.vue - Add Contact
src/views/AddContact.vue - Edit Contact
src/views/EditContact.vue - Validation Toast
src/components/Toast.vue
Contact State
- Contact Store
src/store/contacts.js
Other components
- User
- Browser Storage
Connections 15
- User → Navigation Shell: uses
- App Bootstrap → Navigation Shell: mounts
- App Bootstrap → Route Dispatch: installs
- Navigation Shell → Route Dispatch: renders routes
- Route Dispatch → Browse Contacts: dispatches
- Route Dispatch → Add Contact: dispatches
- Route Dispatch → Edit Contact: dispatches
- Browse Contacts → Contact Store: loads, deletes, favorites
- Browse Contacts → Contact Card: renders
- Contact Card → Browse Contacts: emits actions
- Add Contact → Contact Store: adds contact
- Edit Contact → Contact Store: loads, updates
- Add Contact → Validation Toast: shows errors
- Edit Contact → Validation Toast: shows errors
- Contact Store → Browser Storage: reads, writes