My buddy wanted to start a science newsletter where he can share some interesting things he does and reads about in his lab. He was almost ready to pay for Mailchimp when I stepped in and offered him my services for a fraction of the price using Amazon SES & Firebase as the backend and React & Material UI for the frontend. I am a self-taught web developer and I thought it would be a good practice to do this for him. Here is a brief description of my process:

Design: React + Material UI

This was a simple decision. He was already using a Gatsby with Material UI for his blog. I just created a new page in Gatsby for the landing page.

There are two CTAs, one is the sign me up button as part of the form itself. The second one is at the bottom of the page which on click will scroll back to the form and will highlight it for 10 seconds.

r/webdev - I built a newsletter landing page with Firebase + Amazon SES + React + Material UI

Collecting Emails – Firebase Cloud Functions, Amazon SES and Mailbluster

I used react-hook-form and yup to validate form inputs to email. On submit, the email will go through a Cloud Function which will write the email and associated data to a Cloud Firestore collection called subscription_requests. This will trigger another function that will generate a confirmation link (used CryptoJS with a secret to encrypt the email) and use SES to send it to the user.

When the user clicks on the confirmation link, another Cloud Function is triggered which validates the email and calls the MailBluster API to add the email. This function will also transfer the document from subscription_requests to subscription_confirmed in Cloud Firestore.

I chose MailBluster because they seamlessly integrate with Amazon SES with no extra charges for the first 60k emails. My friend can then use MailBluster UI to design and send newsletters.

On unsubscribe, MailBluster also offers to redirect to a URL. I used this to redirect the user to a Cloud Function which will remove the document from Firestore.

So that was my process to build this simple newsletter system for my friend. Let me know if you have any questions and suggestions.

Thank you.

Source link

Write A Comment