Contact Book Group Project

A GitHub Classroom Assignment

This assignment must be accepted on GitHub Classroom

Objective

Use what you have learned about the Vue, Vue CLI, Vue Components, BootStrap Vue, and Firebase to create an Contact Book web application which allows you to add new contact and display, edit and delete existing contacts.

Features

This simplified contact book will:

• Display a list of names
• New names can be added
• Existing names can be deleted
• All data will be retrieved and stored in a Firestore Database

Project Setup

1. Clone the Repository

Accept the GitHub Classroom assignment and clone the repository from GitHub. There are no starter files for this project.

2. Create a new Vue Project

To create a new Vue project completed the following instructions:

1. Open the Vue CLI GUI, by entering the following command in the terminal:

vue ui

2. In Vue CLI GUI, create a new project.
3. Install firebase dependencies, by entering the following command in the terminal

npm install --save firebase vuefire;

4. Add Bootstrap-Vue to the project, by entering the following command in the terminal

vue add bootstrap-vue

3. Create a Firestore Database

Using a Google account, sign into Firebase and go to the console.

Then following the instructions to Create a Cloud Firestore database.

You can also watch this video tutorial.

For this project the database should contain a single collection, contacts. Each contact will have it's own document. The only required fields for a contact is first_name and last_name.

Once created, take a screenshot of your Firestore database. It will be submitted with your project.

4. Add the Web Firebase SDK

Watch Adding Firebase to learn how to add the Web Firebase SDK to your Vue project.

Requirements

This simplified web application will consist of a single page, that will display the contacts in the Firestore database and listen for realtime updates.

The contacts should be displayed in alphabetical order by last name, using the orderBy() method.

A form to add a new contact should be available on the page. When the form is submitted it should add the new contact to the Firestore database and the display of contacts should be updated.

A delete button should be next to each contact. If clicked, the contact should be deleted from the Firestore database and the display of contacts should be updated.

Additionally, Bootstrap Vue should be used in the creation of this web application and at least 1 vue component should created.

A screenshot of your Firestore database should be included with your project.

Example

Rubric

Criteria	Pts
Successfully create a Firestore database (screenshot)	10
Successfully display contacts in alphabetically order	10
Successfully adds new contact when the new contact form is submitted	5
Successfully remove contact when delete button is clicked	5
Successfully implements realtime updates	5
Successfully creates and uses a Vue Component	5
Successfully uses Bootstrap Vue	5
Provides an appealing and intuitive user experience	5
Total	50

Submission

1. Create a commit with the message "Completed the Contact Book assignment"
2. Push to GitHub
3. Submit the URL to your GitHub Repository to the Contact Book assignment in BrightSpace

By making the submission you also agree to the Algonquin College Student Attestation of Academic Integrity below:

I hereby declare that the work I submit throughout the duration of this course/program will be my own work.

I understand that plagiarism, whether done deliberately or accidentally, is defined as presenting someone else’s work, in whole or in part, as one’s own, and includes the verbal or written submission of another work (for example, ideas, wording, code, graphics, music, and inventions) without crediting that source. This includes all electronic sources (for example, the Internet, television, video, film, and recordings), all print and written sources (for example, books, periodicals, lyrics, government publications, promotional materials, and academic assignments), and all verbal sources (for example, conversations and interviews).

I understand that the facilitation of plagiarism, that is, one student sharing his or her work with other students, is also considered an act of plagiarism.

I understand that contravening Algonquin College Policy AA 20 - Plagiarism will result in an academic sanction(s) as described in this directive.