EMAIL-NOTIFICATION DOCS

EMAIL-SENDING

Resend
Description: Layanan pengiriman email modern dengan API sederhana dan dukungan React Email.
Example: 
import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: 'onboarding@resend.dev',
  to: 'user@example.com',
  subject: 'Hello World',
  html: '<p>Selamat datang!</p>'
})
Output: Email terkirim
Nodemailer
Description: Library SMTP populer untuk mengirim email dari server Node.js.
Example: 
import nodemailer from 'nodemailer'

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: { user: process.env.EMAIL, pass: process.env.PASSWORD }
})

await transporter.sendMail({
  from: '"Nama" <email@example.com>',
  to: 'user@example.com',
  subject: 'Test',
  text: 'Hello'
})
Output: Email terkirim via SMTP
SendGrid
Description: Layanan email massal dengan API yang kaya dan template builder.
Example: 
import sgMail from '@sendgrid/mail'
sgMail.setApiKey(process.env.SENDGRID_API_KEY)

await sgMail.send({
  to: 'user@example.com',
  from: 'admin@example.com',
  subject: 'Sending with SendGrid',
  html: '<strong>and easy</strong>'
})
Output: Email terkirim via SendGrid
Mailgun
Description: API pengiriman email untuk developer, dengan fitur validasi dan tracking.
Example: 
import formData from 'form-data'
import Mailgun from 'mailgun.js'
const mailgun = new Mailgun(formData)
const mg = mailgun.client({ username: 'api', key: process.env.MAILGUN_API_KEY })

await mg.messages.create('sandbox...mailgun.org', {
  from: 'Excited User <mailgun@sandbox...>',
  to: ['user@example.com'],
  subject: 'Hello',
  text: 'Testing some Mailgun awesomeness!'
})
Output: Email terkirim via Mailgun
Plunk
Description: Email API yang simpel dan open-source friendly.
Example: 
import Plunk from '@plunk/node'
const plunk = new Plunk(process.env.PLUNK_API_KEY)

await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello',
  body: '<h1>Welcome!</h1>'
})
Output: Email terkirim via Plunk

EMAIL-TEMPLATES

React Email
Description: Membuat template email dengan komponen React dan mengirimnya via Resend / Nodemailer.
Example: 
import { Html, Button, Text } from '@react-email/components'

export function WelcomeEmail({ name }) {
  return (
    <Html>
      <Text>Hello {name},</Text>
      <Button href="https://example.com">Click me</Button>
    </Html>
  )
}
Output: Template email dalam React
MJML
Description: Framework markup untuk mendesain email responsif tanpa rasa sakit.
Example: 
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Output: HTML email responsif
Handlebars (Nodemailer)
Description: Menggunakan template engine Handlebars dengan Nodemailer untuk email dinamis.
Example: 
import hbs from 'nodemailer-express-handlebars'
transporter.use('compile', hbs({ viewEngine: 'handlebars', viewPath: './emails' }))

await transporter.sendMail({
  to: 'user@example.com',
  template: 'welcome',
  context: { name: 'Ridho' }
})
Output: Email dengan template Handlebars
Maizzle
Description: Framework untuk membangun email HTML dengan Tailwind CSS.
Example: 
<!-- Maizzle menggunakan Tailwind utility classes -->
<div class="bg-blue-500 text-white p-4">Hello</div>
Output: HTML email dari Tailwind

TOAST-NOTIFICATIONS

Sonner
Description: Toast notification ringan dan mudah digunakan di React.
Example: 
import { toast } from 'sonner'

toast('Event has been created')
toast.success('Berhasil disimpan!')
toast.error('Terjadi kesalahan')
Output: Toast muncul di layar
React Hot Toast
Description: Alternatif toast notification dengan API simpel dan animasi keren.
Example: 
import toast, { Toaster } from 'react-hot-toast'

toast.success('Berhasil!')
toast.error('Gagal')
Output: Notifikasi sukses/gagal
React Toastify
Description: Library toast notification yang sangat customizable.
Example: 
import { toast } from 'react-toastify'

toast('Default notification')
toast.success('Success!')
toast.info('Info')
Output: Toast muncul di sudut

PUSH-NOTIFICATIONS

Web Push API
Description: Mengirim notifikasi push ke browser melalui service worker.
Example: 
// Di client
navigator.serviceWorker.ready.then(reg => {
  reg.showNotification('Halo', { body: 'Pesan baru' })
})
Output: Notifikasi muncul di sistem
Firebase Cloud Messaging (FCM)
Description: Mengirim notifikasi push ke web & mobile via Firebase.
Example: 
import { initializeApp } from 'firebase/app'
import { getMessaging, getToken } from 'firebase/messaging'

const app = initializeApp(firebaseConfig)
const messaging = getMessaging(app)
const token = await getToken(messaging, { vapidKey: '...' })
Output: Token perangkat
OneSignal
Description: Layanan notifikasi push cross-platform dengan dashboard.
Example: 
import OneSignal from 'onesignal-node'
const client = new OneSignal.Client(process.env.ONESIGNAL_APP_ID, process.env.ONESIGNAL_API_KEY)

await client.createNotification({
  contents: { en: 'Hello' },
  included_segments: ['Subscribed Users']
})
Output: Notifikasi terkirim ke pengguna
Notifee (React Native)
Description: Library untuk menampilkan notifikasi lokal di aplikasi React Native.
Example: 
import notifee from '@notifee/react-native'

await notifee.displayNotification({
  title: 'Update',
  body: 'A new version is available!',
  android: { channelId: 'default' }
})
Output: Notifikasi lokal di Android/iOS

WEBHOOK-EVENTS

Resend Webhooks
Description: Menerima event seperti email delivered, bounced, complained.
Example: 
// Di endpoint API /api/email/webhook
export async function POST(req: Request) {
  const body = await req.json()
  if (body.type === 'email.delivered') {
    console.log(`Email to ${body.data.email_id} delivered`)
  }
  return Response.json({ received: true })
}
Output: Event diterima
SendGrid Event Webhook
Description: Menerima event dari SendGrid (delivered, open, click, dll).
Example: 
app.post('/webhook', (req, res) => {
  const events = req.body
  events.forEach(e => console.log(e.event))
  res.status(200).end()
})
Output: Data event SendGrid
Notification Tracking
Description: Melacak interaksi notifikasi push (click, dismiss).
Example: 
self.addEventListener('notificationclick', event => {
  event.notification.close()
  clients.openWindow(event.notification.data.url)
})
Output: Buka URL saat notifikasi diklik