Phonebook

Phonebook is the result of a one-week full stack challenge, almost without prior experience with GraphQL.

It contains a contact management application that allows users to store and manage their contacts.

Features

• add, edit, and delete contacts
• upload and filter images
• search for contacts
• infinite scroll

Implementation features

• Frontend

  • responsive design with a mobile like experience
  • React with TypeScript, Styled Components, Material-UI and Vite
  • state management with Redux and RTKQ
  • form validation with React Hook Form and Yup

• Backend

  • GraphQL with NestJS backend using Transactions and postgreSQL with typeORM
  • Data Transfer Objects with Validation Pipe
  • integration tests with Jest
  • image filter with Sharp
  • Exception Filter

Limitations

• phone numbers have to be comma separated in the UI, e.g. 0532123456, 0532123457
• images can only be stored as jpeg and png
• image filtering currently only supports grayscale, blur and saturation; please set blur and saturation to 0 if you don't want to apply them

Tech Stack
React	TypeScript	Styled Components	Material-UI	Vite	Redux	React Hook Form
GraphQL	NestJS	PostgreSQL	TypeORM	Jest	Sharp	Docker

Intro screen

Add contact functionality with contact details

Add contact functionality with image filter

Contact list view

Edit contact functionality

Demo

https://www.loom.com/share/66c8bd361138443bb12d98c10031c7d4

v2 improvements (24.02.24 - 05.03.24)

• autocomplete for adding contacts by leveraging algolia api with portals and google places api for addresses
• for the algolia api mock data has been created in the provider account
• the search functionality can be toggled with the env variable VITE_SEARCH_BAR_WITHOUT_BUTTON and appears now on the phone
• the address field can be toggled with the env variable VITE_SHOULD_USE_LOCATION and has a fallback to a list of countries autocomplete
• the validation trigger has been refactored to use a utility to reduce duplicated code
• the buttons are now using the material-ui Button component with preserved styles
• the search field for the address has been refactored to align with the rest of the UI in the add contact modal
• the shine effect is now preserved under the search bar and the contact list, has a reversed direction, and can be controlled with the slider and the gradient color picker
• the scrolling has been improved in terms of UX and it's using now the cache for a smoother experience
• optimistic updates for update and remove contact
• skeleton card for loading new contacts
• you can use the data folder where the mock data is stored to test the search functionality by creating an own algolia account and replacing the VITE_APP_ID and VITE_API_KEY in the .env file
• the functionality has been tested on Chrome, Firefox and Opera

VITE_SEARCH_BAR_WITHOUT_BUTTON=true
VITE_APP_ID=YOUR_ALGOLIA_APP_ID
VITE_API_KEY=YOUR_ALGOLIA_API_KEY
VITE_SHOULD_USE_ALGOLIA=false
VITE_LOCATION_API_KEY=YOUR_GOOGLE_PLACES_API_KEY
VITE_LOCATION_PROVIDER=https://maps.googleapis.com/maps/api/js
VITE_LOCATION_API_PARAMS=libraries=places
VITE_SHOULD_USE_LOCATION=false
VITE_WEATHER_API_KEY=YOUR_OPEN_WEATHER_API_KEY

Getting started

• run docker-compose up -din the server folder to start the db
• run npm i && npm run dev in the client folder to start the client
• run npm i && nest start in the server folder to start server