Amber//Midterm Documentation:The Address Book

Full Code can be found here.


User story:

  • As a user, I can add the contact to a “position” tag and company name. I can star the people that I would like to put at the front of my contact book. I can add LinkedIn account and email account followed by the name.
  • I can filter “position” tag by choosing different tags in a drop-down menu.
  • I can search contact by clicking “search,” but searching for “name” is prioritized.
  • I can sort my contacts by alphabetical order in “sort” button by either “first name” and “last name.”

Concept:  After looking into the competitor analysis I choose to make an address book for business use. To highlight the functionality of business, I came up with the idea to have a “position” tag, which is the key feature in my application that differentiated from others. “Position” tag stands for the job title of the contact, and the tag is emphasized by bright color, I choose to use red in this application. The user could easily identify the tags.

Therefore, filter function focuses on the position tag to make the user quickly pick up contacts that share the same position, and quickly pick up the contact they are looking for.

The ultimate goal of this application is to enable the user to add a new contact and display the information in the contact box. I am still exploring Json on local storage and data fetch. I have the structure to render data dynamically instead of hard-coding, so I wish to use the knowledge that we are going to learn in the future classes to make it possible. 

Another aspect of this application is the starred box, that displays all the information of the contact and being kept at the front. Users will have the choice to add more starred contacts, but up to five maximum. [More Json development needed :(]

Technique Development:

Mock-up by Photoshop:

This version is designed for fulfilling the requirement for sorting function. So sort of the first name or the last name is included.

However, in my mind, as a user of contact book myself, I do not feel a strong need for the sort function, so I made another mock-up to illustrate my vision of the application, which I add alphabetical index instead of the sorting function.


The basic logic of React.Js is quite straightforward for applying functional features for this project. However, CSS part is the part that I spent time on, I consider the most on the design aspect of it.

But I also see my limitation of coding, design and think more considerately for my potential users. The function of it is still pretty simple and far away from a truly functional application.


I really hope to further improve it to make it more user-friendly and facilitate communication between people.


Leave a Reply