Nathan Brown

Web Developer | Programmer

VueFriends

The VueFriends contact card web app is based on a tutorial project called Robofriends from Andrei Neagoie's course, Complete Web Developer: Zero to Mastery. It's a wonderful course, and I highly recommend it!

The original project was designed to introduce students to reactive, component-based web development using the React framework. In addition, to React, it utilizes the Robohash and JSONPlaceholder APIs to create a series of contact cards with unique robot avatars for a sample list of contacts/friends. Additionally, the Tachyons CSS toolkit is used for quick styling. The application featured contact cards that displayed the contact's name and email, as well as an avatar. The project included a search field that would filter the displayed contacts based on whether their names contained whatever was entered into the search field.

In an effort to learn something new, I decided to recreate this project using Vue instead of React. I was curious how the two would compare both from a learning standpoint as well as a use standpoint. Unlike the tutorial project, I do not utilize the Tachyons CSS toolkit in VueFriends. Instead, all styling was coded from scratch and includes a color scheme based on the Vue logo. Additionally, I wanted to add features that were not part of the original project and would provide further challenges and learning opportunities. In addition to building an app that displayed component-based, filterable contact cards, VueFriends also includes the following:

Full Robohash Use

While the tutorial project only utilized robot avatars from the Robohash API, I decided to make use of the various types of avatars the API provides:

The VueFriends application includes an option for the user to select which type of avatar they would like to use for the contact cards, adding a bit of personalization to the application.

Full Contact Card

The main view of the application displays contact cards for all contacts in the contact list. Like the tutorial project, these contact cards feature an avatar for the contact, the contact's name, and the contact's email address. The object structure for the contact list, however, allows for a lot more information to be added and stored, such as:

To view the entirety of a contact's information, the VueFriends application allows the user to click on a contact card to display an expanded contact card containing all of the contact's information in addition to their name and email address. By expanding the contact card, the user also has the option to edit the contact information or delete the contact altogether.

Edit Contact

Clicking on the Edit button on the expanded contact card will change the contact details from read-only text to text input fields, allowing the user to modify or add additional contact information. When the user finishes, that contact's information will be updated with the user's inputs. If a field is left blank by the user, then the corresponding contact information for that field will be left unchanged.

Delete Contact

Clicking on the Delete button on the expanded contact card will display a warning, asking the user if they wish to delete the selected contact while informing them that the action cannot be undone. The user can then choose to continue and delete the contact from the list, permanently removing the contact card and all associated data, or they can cancel the action.

Add New Contact

VueFriends provides the user a way to add contacts to the contact list. Clicking the Add Friend button will launch a form where the user can enter the contact's details. The form features an alert that will prevent the user from submitting and creating the new contact if the minimum information (name, username, and email) has not been entered. Once the form is submitted a new contact card is generated with a unique avatar. The new contact card can be filtered with the search function or edited and deleted just like the rest of the contact cards.

Enjoy!

Skills Featured

HTML
CSS
JavaScript
Vue.js
Filter contact cards by typing in the search bar
Adding a new contact card
Deleting a contact card
Editing an existing contact card

Project Links