Phone Book Full Stack Project

Table of contents

• Phone Book Assignment
• Setup
• Project Preview

Setup

1. run the this docker command to upload the postgress container for this project:

docker run --hostname=453584cff717 --mac-address=02:42:ac:11:00:02 --env=POSTGRES_PASSWORD=mysecretpassword --env=PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/lib/postgresql/15/bin --env=GOSU_VERSION=1.14 --env=LANG=en_US.utf8 --env=PG_MAJOR=15 --env=PG_VERSION=15.1-1.pgdg110+1 --env=PGDATA=/var/lib/postgresql/data --volume=/var/lib/postgresql/data -p 4532:5432 --restart=no --runtime=runc -d postgres

2. Add your aws-s3 bucket credentials in the .env file in the server folder:

If you don't have aws credentials you can use this video to create one: 4:19 - 10:04 https://www.youtube.com/watch?v=yGYeYJpRWPM&t=1s&ab_channel=SamMeech-Ward

3. Open a new terminal and run this commands to run the server for this project:

$ cd server/server/phone-book
$ npm install
$ npm start

4. Open another terminal and run this commands to run the website:

$ cd website
$ npm install
$ npm start

Phone Book Assignment

Overview

We want to create a phone book system to store contacts, this system needs to be built with React for the frontend Nestjs for the backend and Graphql for the communication between the front and the server.

server

• Create CRUD operations to store a contact in a database.
• Each contact will have the following properties:
• First name
• Last name
• Nickname
• List of phone numbers(a contact may have multiple phone numbers)
• Address
• Photo
• Store all data in PostgreSQL, the database will run on a docker.

You may add additional content in order to complete the assignment as you see fit.

Front

• The application will show a list of the first 5 contacts, each row will show the nickname of the user if it’s available, if not it will show a concatenation of the first and last name and the photo of the contact.
• The list will be sorted by name in a descending order and will support infinite scrolling, always showing 5 contacts at a time.
• The main gui should also have a functional search field to search for contacts
• The main gui should also have a way to add a new contact
• It will have a form to add all of the contact details.
• It will have a way to upload an image to be saved as the contact photo, only jpeg and png image formats will be supported.
• It will have an option to apply a filter to the user photo and the filter amount, the filters that can be applied are:
• Gray scale
• Blur
• Saturation
• The contacts in the list should be clickable, once a user been clicked a popup should appear with all of the contacts details, within this popup there should be the option to edit the contact(should have the same functionality as the add contact) and a way to delete the contact

Project Preview:

PhoneBook main page:

The contacts are prsented in descending order by the title they are prsented by(nickname or firstname+lastname).

Creating new contact form:

Creating new contact with details:

How the newly created contact prsented:

When clicking on contact a pop-up will open with the contact details and an option to delete this contact or edit it's details.

Contact form with contact details(after clicking on contact):