How to Build a Newsletter Application with Email Automation via ReactJS and Firebase

In this tutorial, I will be building a simple react Js application that handles newsletter sign up and automatic mailing upon successful registration. Newbies to the world of React can find this tutorial as a side project to help understand React well. Enjoy learning!!!

Requirement

- Basic Knowledge of React, BabelJs and ES5

- Firebase

  • Yarn

To get in-Depth knowledge on Reactjs you can enroll for a live demo on Reactjs Online Training

Installation

We will start by creating our project with `create-react-app` by running the following command in terminal

create-react-app newsletter-app

Once the project has completed the installation process, run the following command to get the app running.

cd newsletter-app<br>yarn start

You should see something like this

Take your career to new heights of success with Reactjs Training

## Firebase integration

We will be using Firebase to store the emails of users who sign up for the newsletter. You should do the following:

- Sign up on (

Firebase)[https://firebase.google.com

]

- Go to Console and create an application called *newsletter-app*

- Setup access rules for the database in

Database > Rules.

You will see the below.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }

With what is above, you wonโ€™t be able to save anything to the database. So, we have to set the read and write roles to true so any user can interact with the database. Your rules should look like this now:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Install Firebase react module by running this command

yarn add firebase

For Firebase to work in our application, we need to add the authentication key to our react app. It can be found at the overview page of your firebase project, click

Add firebase to your web app.

You should see something like this:

<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "..................................",
    authDomain: "newsletter-app-7b62b.firebaseapp.com",
    databaseURL: "https://newsletter-app-7b62b.firebaseio.com",
    projectId: "newsletter-app-7b62b",
    storageBucket: "newsletter-app-7b62b.appspot.com",
    messagingSenderId: "733783383"
  };
  firebase.initializeApp(config);
</script>

Paste it at the bottom of `public/index.html` file

After that, we need to use firebase efficiently in our app. create a folder called js in src folder then create a file called firebase.js then your file should look like the code below:

import * as firebase from 'firebase'
let database

export const init = () => {
    let config = {
        apiKey: "00000000000000000000000000000000",
        authDomain: "newsletter-app-7b62b.firebaseapp.com",
        databaseURL: "https://newsletter-app-7b62b.firebaseio.com",
        projectId: "newsletter-app-7b62b",
        storageBucket: "newsletter-app-7b62b.appspot.com",
        messagingSenderId: "0000000000"
    }
    firebase.initializeApp(config)
    database = firebase.database()
}

Go to your src folder and make sure your App.js file looks like the below:

import React, { Component } from 'react';
import {init as firebaseInit} from './js/firebase';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props)
        firebaseInit()
    }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Run the App it should still work perfectly.