Word of mouth is the one of the most effective marketing strategy today. Everyday we see many companies using referral programs for targeted promotions and marketing. But how are these referral programs built? What is the logic behind it? Today we will answer these question by building a simple but complete referral system of our own.

But lets have a look at the app first! There you go buddy : Hit that- https://invitation-system.herokuapp.com/

You can see the repository here: https://github.com/akshar07/invitation-system

Cool ! So here is what we are going build:

We will have 2 applications:

API

Web Client

Web client will have two views:

A dashboard for authenticated users which has ability to send invitations to an email address with message and list out all invitations and their status (seen or unseen)

for authenticated users which has ability to send invitations to an email address with message and list out all invitations and their status (seen or unseen) Recipient view of Invitation where he is able to see the invitation message and sender info

The API will create an invitation with a sender, recipient and each invitation will be accessible via unique URL.

We are going to build this using the following components:

Node-Express server

Postgres Database

Node emailer for sending emails

passportJS for social authentication

Lets get started

Initialize a new project :

npm init --y

In package.json add the following dependencies:

npm install

Once installed, we will start working on our backend.

Setting up Postgres:

We will have two tables — one for storing the authenticated users and the required information and other for storing all the invitations the user has sent. We will also maintain a timestamp to let the sender know if their invitation was viewed.

Facebook Authentication:

I assume that you have facebook developer account and an application set up. If not, there are tons of resources on how to setup fb app for development. That said, lets look how we handle the user sig up /sign in with passport JS facebook strategy.

We are doing some of important things here:

Once we get back the data from facebook, we first check if the user is already there in our system. If user is there, simply call the done method so that the user is navigated to the home page If user is not present, add him in our database and call done We are also checking if our generateid function does not generate strings with hyphens as this will cause problems with our further logic.

Home Page:

Home view:

We will keep user dashboard very simple:

Ok so lets add the invite functionality to our app. We will let users enter any email id to send the invite to and also attach a message with it. Our Invite function will be as follows:

Here we just collect all the data and post it to our server where we will be actually adding invitation to our database and sending an email to the desired person.

We extract the request data first and insert it into our database. We then send email to the entered email address using sendEmail function which we will explore shortly. We will also update created_at value for this invitation with current time.

sendEmail Function

Here we are using nodemailer a npm module for sending out emails. Add your gmail’s email and password as environment variables in your server for safety. We will format the invitation string with our invitation code and the recipient invitation code so that its easy for us to fetch the particular invitation from the database later when user clicks on the link.

let clientUrl = `https://invitation-system.herokuapp.com/invite/${_from}-${_link}`;

Note: change your gmail account settings to allow less secure apps so that nodemailer can send mails on behalf of you.

Now in our home view, we had an empty list to show all the users invitation and their status. Lets populate this list:

we simply send our unique invitation code as query parameter to the server to get all our sent invitations. On the server side we query invitations table with the our invitation code and pass back the results.

Great ! Now we can see all our invitations and their status with a click. So far going good.

Now we have to create the recipient view. We will have a different route for this. If you remember we formatted the invitation url to get the particular invitation from our database when recipient clicks on it. We will now seperate the two invitation codes and query the invitations table to get the exact invitation data.

Here we are also doing one more important thing, that is updating the value of updated_at column in our invitations table with the current timestamp when the recipient has clicked the link. Thus we can see the status of whether the recipient has seen our link or not on our main home dashboard. We then send the data back to our frontend and display the invitation details.

And we have done it! Be that wolf and send out those invitations on the street…

I hope you enjoyed this post. Please leave your feedback in the comments section and if you like it dont forget to clap.

PS: You can actually clap like Leo by clicking the clap button below. Try It!