Midterm Project: Mobile Address Book App

Name of Project: BESTIES

(made in React.js)

Description: BESTIES is a mobile address book app (in IphoneX) designed for people who make friends from all over the world, and would like to have a list of Besties that one can easily manage.



The idea of this app actually stems from my own experience studying here at NYU Shanghai. NYU Shanghai is composed of people from a diversity of backgrounds, and so it is relatively easy to make friends from different places in the world. Stepping a step back, the fact that many of us are making “best friends at the current time from a new country” is just amazing, like I having an Indian bestie who has come to China since she was 11-month-old. Back before college, most of our contacts are all from our hometowns or home countries, and we may have spent a good three, four, or more years studying with and becoming closer to them. However, attending NYU Shanghai is like entering into reality: it is mostly impossible for us to expect who we will meet and among them, who will become our new best friends, and how long can they still be close friends that you can see frequently.

Old best friends are still besties, but perhaps some of them has lost some intimacy as time goes by. But at the same time, it is also easy to become very familiar to each other again if there’s an event or any other opportunity that brings people together. Besties or not? Well, BESTIE can possibly solve this determining issue. It is actually further developing the existing, inescapable settings of “normal contacts and favorites;” instead, the app has a list of “besties and best of best,” which can possibly co-exist with other address-book app. With this app, one can easily manage one’s contacts of besties, and see a clear view of who are in the “best of best” list. The app may be even more useful when one starts working and traveling around. Overall, by using Besties, the user is able to pull out his/her list of besties really fast without the need to think for a long time over the entire life span: who is important to me?

User stories and Showcase:

User Story: When open the app on iPhoneX, a user can see the default layout of a list consists of a profile, best of best, and “all” meaning all contacts, in the order sorted by first name.

Other description: There is a go-to-top icon that can directly lead the app page to the top wherever the user is at on the page.

User Story: As a user, I can decide which sections I want to look at, by clicking on the arrows on the list to collapse or close the groups.

User Story: As a user, I can click on the search icon to search for contact names and their detailed information by typing them into the search bar at the bottom.

Other description: Search icon is at the bottom so it’s more reachable. The profile pictures in the middle will be highlighted green if the contact is considered “best of best.” See the next user story for explanation.

User Story: As a user, I can click on each contact to view his/her detailed information.

User Story: As a user, I can determine whether the contact is only a bestie or best of best, by selecting or unselecting the star icon.

Other description: If the star icon is selected, the contact will be shown in both the “best of best” and “all” sections. If not, the person will only be shown in the “all” section.

User Story: If I want to change the default order of the list of contacts, as a user, I can click on the menu icon on the top-left corner to access the sidebar, which has the ability to sort in different ways.

Other description: The default order is sorted by first name. Right now, the list is sorted by last name. The design of the layout, by centering everything and separating first and last names, the sorting result is easier to read.

User Story: As a user, I can filter the contact list by country, by clicking on the country options in the opened side bar.

Other descriptions: Here, the country filters are dynamic components that will show based on the information of the contacts. The country filters go with the concept that we want to keep connect with our besties all around the world.

User Story: As a user, I can add contacts to the current list, by clicking on the “add” icon on the top-right corner.

Other description: Press the confirm button if confirmed name, and the user will be led to another page filling up more details about the added contact. (Function not developed yet.)

Last but not least…

The app will automatically update the contact’s information if the person is also using the app and has provided the information on his/her profile. If not, one can still type in those information themselves.


Competitive Research: From analyzing the existing address-book app, I thought a lot about functionalities in regard to the reasons behind, especially whether they are necessary.


Building the Concept and Revisiting the Questions: Initially I had a lot of ideas, but I knew that I want to make this app personal and useful, and thus the app BESTIES. Before starting right away, I thought a lot about what a “favorite” person/contact means nowadays. The definition actually varies by person, but a thing that stays the same is that we would love to keep touch with the favorites, no matter they are parents we seldom contact with, friends who are living on the other side of the planet, or besties made just this semester of school, we can use BESTIES to easily manage/check our relationship status with them individually.

Making user stories, and drawing the sketch: I do not have a fancy mockup because some of my styles are actually based on the functions. The making of user stories is definitely useful when we drawing the sketch of the app, to see logic works visually and visuals work logically. Here are some of my sketches (sorry for the mess because they were intended to be able to be read by me only):

Implementing the basic layout: Having the basic ideas with basic structures, I hard-code the information of the contacts. Afterwards I finished the basic layout so to have better ideas where I was going to.

Adding functions: This is the hardest part, of course. I want to deal with the functions first while css later. Functions can be seen by the showcase and user story sector.

Adding styles: A function comes with a little sprinkle of some css, and then revise the function, and then revise the styles. It may look something like the below…


more functions with more styles: true,

debugging: false



more functions with more styles: false,

debugging: true



more functions with more styles: false,

debugging: false



more functions with more styles: true,

debugging: true


User Testing: Asking for others’ opinions on the styling and if there are confusing parts regarding the functions.

I was constantly stuck on a single thing for a day-long or more. This happens many times and so I cannot move on until a specific issue or question is debugged. I tried my best playing with my friend console.log(), but I do not think that it likes me for the time being. There are still many problems I encountered that are yet solved and features that haven’t been added to the current app. The most important function that I want to add is by clicking on the star inside the personal information popup, the user can determine whether or not the person goes in the “best of best” group. Thanks to Romola in our class, she told me that my structures and logic is weird, thus it’s hard to know which one I clicked. It should be something like the nytimes assignment where there is an Article.js that repeats a block of an Article component. However, right now I have all the contacts in a component called List.js and later mapped out. However, it is not the list that repeats, but the contacts, so the contact should be inside a component called Contact.js, and other features of the list can be written in App.js. I only realized this near midnight yesterday (the day before its due), and tried to figure out how I could rewrite this. But since all of the functions are based on the existing list structure, it will be a thorough construction, which I am afraid that I won’t be able to finish by time, handing in a crashed app.

I have tried my best in the limited of time, knowing that there are definitely still a lot of work to do for this app. I think I will make a copy of current address-book app sources and try to restructure the whole thing, in the right way React.js should be and the way it actually benefits. For now I often still code in the way pure javascript can do, but I am proud that as a beginner with React.js and much less experience in coding compare to other classmates, I have created an app like this and understand the functions I wrote. Therefore, this midterm project really helps me to view through what I really have learned in heart and what I need to study more, and thus the most important thing, to continue to improve a project.

UPDATE: Has started restructuring the code in another react app. Currently working on it!

More to come for BESTIES:

For the next stages of BESTIES’ development, I want to be able to make the app more unique by adding more special features a Bestie can have (like nicknames and notes I have now), making the app bestie-oriented. This could be achieved by adding weird rankings, multiple categories of favorites, etc.

Leave a Reply