Midterm Project - Digital Address Book - CI256

Midterm Project - Digital Address Book

Brodie Davis
3 mins to read
Home / Midterm Project - Digital Address Book

Your Midterm and Final project will be creating a “Digital Address Book” in React. For the Midterm, we will be focusing on the basics of the application, then expanding the functionality for the Final Project.

You can find an example of the midterm here: https://midterm.ci256.cloud

Grading Rubric

Your Midterm will be graded on the following categories:

Percentage Item Description
10% Functionality Does it run?
10% Git Application is stored in class Git server https://git.ci256.cloud
20% Contact List Display a list of all available contacts. Scrolls if needed
20% Search Contacts Ability to search contact list by name
20% View Pane When clicking a contact name, the view page shows all contact info, including any extra fields.
20% Add New Users Ability to add additional users to the list. These users are not expected to persist across page loads.

Webpage Styling will NOT be graded on the midterm, but will be on the final.

Application Requirements

The application requirements for the midterm:

  • A functional React website (must compile/run!)
  • The midterm project must be stored in the class git repo
    • Git cheatsheet available here: https://docs.ci256.cloud/git
    • Please ask me if you have any questions! I’m happy to help.
      • I take regular backups of the git server if your repo gets into a bad state.
  • Loading “Address book data” from a static JSON file in your repo
  • A sidebar with a list of contacts
    • The sidebar should contain the ability to search the contact list
      • Only the names of the contacts must be searched
      • The search should be case-insensitive
      • The search should be “if first or last name includes query” (ex, not “starts with”)
  • A viewing pane for contact details
    • When a name is clicked in the sidebar, the viewing pane should be updated with that contact’s information

Data Format

A contact will have this data format:

export type Contact = {  
  id: number;  
  firstName: string;  
  lastName: string;  
  email: string;  
  phone: string;  
  extra: Record<string, string>;  
};

The extra field is an Object of key/value pairs which can be anything, allowing the user to add any additional fields that may not exist on all users. For example:

  {  
    firstName: "Zendaya",  
    // ...
    extra: {  
      address: "123 Euphoria Ave, Los Angeles, CA 90210",  
      birthday: "09/01/1996",  
      department: "Drama"  
    }  
  },  
  {  
    firstName: "Elon",  
    // ...
    extra: {  
      address: "42 Innovation Way, Austin, TX 78701",  
      company: "SpaceX",  
      title: "CEO"  
    }  
  },

Zendaya and Elon both have an address field defined, but Zendaya has birthday and department where elon has company and title. You must display both the key (“company”) and the value (“SpaceX”) when displaying Elon’s entry.