background
Rafi
Home / Portfolio / Nodemailer and Notification
PORTFOLIO

Nodemailer and Notification

Challenge Binar Academy Kampus Merdeka Batch 3 - Chapter 8. Send email notification using Nodemailer and web push notification using web-push.

#ExpressJS  #Nodemailer  #Notification  #Binar Challenge  

Nodemailer and Notification

Send email notification using Nodemailer and web push notification using web-push.

Binar Challenge - Backend JavaScript - Chapter 8

This project is one of Challenge from Binar Academy Kampus Merdeka.

About finishing the last challenge, the next challenge is to send email notification using Nodemailer and web push notification using web-push. Sending the email using Gmail SMTP and web push notification using web-push.

This challenge is a continuation of the previous challenge, which is OAuth2 and Media Handling.

Source code : GitHub / GitLab

Requirements

  • Send registration welcome email
  • Push notification after user registration (web only)
  • Reset password OTP
  • Send reset password OTP email
  • Send email invoice to get order details

Features

  • User Game CRUD
  • User Game Biodata CRUD
  • User Game History CRUD
  • Authentication
  • Generate documentation from Postman collection
  • Unit Test
  • Integration Test
  • CI/CD with GitHub Actions, not working due Vercel's serverless function.
  • Google OAuth2
  • Facebook OAuth2
  • Upload media
  • Authorization
  • Reset password OTP
  • Send email (registration welcome email, reset password OTP email, email invoice)
  • Push notification (registration in website form)

Tech Stack

Prerequisites

  • NodeJS
  • PostgreSQL
  • sequelize-cli - Sequelize command line interface, make sure you install it globally.
  • nodemon - Nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application. Make sure you install it globally.

Installation and Usage

Clone the repository

1git clone https://github.com/raprmdn/binar-challenge.git
bash

Cd into the project directory

1cd binar-challenge/chapter8
bash

Install dependencies

1npm install
bash

Copy .env.example to .env

1cp .env.example .env
bash

Configure the required environment variables in .env file

.env
1# Google OAuth2 Setup
2GOOGLE_CLIENT_ID=
3GOOGLE_CLIENT_SECRET=
4GOOGLE_REDIRECT_URI=http://localhost:5000/api/auth/google/callback
5
6# Setup for Nodemailer with Gmail SMTP
7GOOGLE_REFRESH_TOKEN=
8GOOGLE_EMAIL=
dotenv
You can change the GOOGLE_REDIRECT_URI and FACEBOOK_REDIRECT_URI to your own.
But make sure you also change it in Google Cloud Platform and Facebook for Developer Dashboard page as well.

To get the GOOGLE_REFRESH_TOKEN, go to Google OAuth Playground and select the https://mail.google.com/ scope.

Click OAuth 2.0 Configuration icon in the top right corner and select Use your own OAuth credentials. Paste the Client ID and Client Secret that you copied before.

Then, click the Authorize APIs button and login with your Google account. After that, click the Exchange authorization code for tokens button. Copy the Refresh Token and paste it to the GOOGLE_REFRESH_TOKEN in .env file.

Make sure set the GOOGLE_EMAIL is the same email that you use to log in to Google OAuth Playground, so that the email that you use to log in to Google OAuth Playground is the same email that you use to send email.

Install the web-push package globally, with the following command:

1npm install -g web-push
bash

Generate VAPID keys

1web-push generate-vapid-keys
bash

Copy the public and private keys and paste it to the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY in .env file.

.env
1# Setup for Web Push Notification
2VAPID_PUBLIC_KEY=
3VAPID_PRIVATE_KEY=
dotenv

Open the public folder and open the script.js file. Copy the VAPID_PUBLIC_KEY and paste it to the applicationServerKey variable.

public/script.js
1/* Line 23 - 26 */
2
3const subscription = await register.pushManager.subscribe({
4    userVisibleOnly: true,
5    applicationServerKey: '', // Change this with your VAPID_PUBLIC_KEY that you copied before
6});
javascript

Create database

1sequelize db:create
bash

Run migration

1sequelize db:migrate
bash

Run seed

1sequelize db:seed:all
bash

Run the development server

1npm run dev
bash

API Documentation

Register Page

  • Method : GET
  • Endpoint : /register
  • Description : Show register page

Request Forgot Password

  • Method : POST
  • Endpoint : /api/auth/forgot-password
  • Description : Send OTP to email for reset password
  • Request Body :
1{
2  "email": "string"
3}
json

Reset Password

  • Method : PUT
  • Endpoint : /api/auth/reset-password
  • Description : Reset password with OTP
  • Request Body :
1{
2  "email": "string",
3  "otp": "integer",
4  "password": "string",
5  "password_confirmation": "string"
6}
json

Order Details

  • Method : GET
  • Endpoint : /api/order-invoice
  • Description : Send order details to email
  • Request Header :
    • Authorization: Bearer {token}

Capstone Project

After completed all the challenges, we head into the capstone project. The capstone project is a project that we will build from scratch. We will build a simple e-ticketing application. For more information about the capstone project, you can check here.

Maybe if you want to check another challenge, you can check here.

If you have any questions, feel free to ask me on any social media. Thank you so much 🙏🙏