WhatsApp Contact Sync

A simple web app for syncing the profile pictures from WhatsApp to Google Contacts.
The app matches contacts based on their phone numbers, and utilizes whatsapp-web.js and Google People API to update the profile picture in Google Contacts.

Demo

Why Was This Developed?

Whenever someone used to call me or I looked them up in my contacts, they all apear as colorful circles with a single letter in it.
The annoying part is that every single person I know has a WhatsApp account which has a profile picture. They are both based on the same phone number but the picture is only available in one of them.
In order to fix this grievence I developed this app which allows anyone to sync their contacts photos from WhatsApp to Google Contacts.

How To Use

The app is extremley easy to use (and self explantory):

1. Go to whasync.com
2. Press "Get Started"
3. Scan the QR code with WhatsApp to authorize it
4. Connect you Google account
5. Choose you sync options
6. That's it :)

The whole process is very simple and automated, so you don't need to worry about anything else.
Setting up should take less then a minute, and syncing should take about 1 second per photo (due to Google's API rate limitiations of 60 requests per user per minute)

How to Run Locally

In order for the backend to function, it requires an OAuth 2.0 client ID and secret.
Since (for obvious reasons) this is a private app, you will need to create one for your own.
You can see instructions on how to do that here.
Once you do that, create the file server/.env, and set the following environment variables:

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET

You also need to add the following Authorized Redirect URI to your OAuth 2.0 client in the Google Cloud Console based on how you are running the app:

EXAMPLES:

• Local dev: http://localhost:8080/api/google_callback
• Docker (port 80): http://localhost/api/google_callback
• Production: https://<your-domain>/api/google_callback

Once that's done, you can go ahead and run the app:

# Run backend
cd server
npm install
npm run dev

# Run web app
cd web
npm install
npm run dev

The server build uses TypeScript 7. Both packages also install Microsoft's @typescript/typescript6 compatibility package under the typescript alias because ts-node and vue-tsc still require the JavaScript compiler API. The @typescript/native alias provides TypeScript 7's tsc executable.

Build Docker Images

There are 3 different Dockerfiles for this app:

• Dockerfile - This is an image containing both the backend and the web app
• Dockerfile - An image containing only the web app
• Dockerfile - An image containing only the backend

In order to build and run the complete app, you need to run the following commands:

docker build -t whasync .
docker run --rm -it -p 80:80 --env-file server/.env whasync

In order to build the seperate images for the backend and frontend, execute the following commands from the projects main directory:

docker build -t whasync-backend --env-file server/.env -f server/Dockerfile .
docker build -t whasync-web -f web/Dockerfile .