DEV Community

Portfolio Review?

Sahil Bondre on October 11, 2019

Hi, I made a portfolio for the first time. I've used Gatsby to make it. I'd like to hear your thoughts on it! Portfolio Source Code (In case you...

Read full post

Akhilesh Kumar • Apr 10 '20

Can you help me understand how does this firebase thing works when you are adding a new subscriber to your mailer?

Sahil Bondre • Apr 10 '20

Yea Sure!

I am using firebase a backend just to store the list of emails. So the only product I am using of firebase is firestore.

Every firebase project has some config data associated with it. This is essentially like a password that allows you to access the backend. I have stored this data in a file called firebase-config.js. This file is not on version control (github) as I has secret data. Here's the code inside it:

import * as firebase from "firebase/app";

import "firebase/firestore";

const firebaseConfig = {
  // Secret Credentials from Firebase
};

export default firebase.initializeApp(firebaseConfig);

This file export the firebase object which is imported by src/components/MailBox/index.js. This is used to perform write operations to the database.

// line 4
import firebase from "../../firebase-config";

// line 15 in MailBox Component
subscribe = () => {
  const mail = this.state.mail;
  if (!this.validateEmail(mail)) return;

  const db = firebase.firestore();
  db.collection("emails").add({
    mail: this.state.mail,
    source: "sahil.surge.sh"
  });
  this.setState({ subscribed: true });
};

You can read more in the firebase documentation:

Note that people usually go with using something like MailChimp to manage mailing list. I've gone this way just so that I can personally mail and communicate with people

Hope I cleared your doubts.