Newsletter Signup

project / December 9th, 2020

Background

This is a simple newsletter signup web application in which users can enter their name and email address to subscribe to a mailing list. The email marketing service MailChimp has a mailing list feature to store subscriber information, and gives the mailing list owner an option to distribute content (like a newsletter) to subscribers. After a signup request is completed, the user will be redirected to a success or failure page to indicate the result of the signup attempt.

Potential users of this app include those looking to create a startup landing page and email customers when their product launches, or those who wish to set up a newsletter to stay in touch with subscribers.

The newsletter signup is one of the main projects for the API module from the Complete Web Development 2021 Bootcamp.

Purpose

The main purpose of building the newsletter signup app is to develop an understanding of Application Programming Interfaces (APIs), more specifically those that allow us to interact with an external server. Through this completing this project, one can learn how to use API endpoints, paths, and parameters to access data collected by other websites and incorporate it in their own website.

This is also the first project in the bootcamp that is deployed on the World Wide Web using Git and Heroku. Learning to deploy an app server on Heroku was an important part of this module, as all my projects up to this point were static content websites deployed on GitHub pages.

Concepts and Tools Used

APIs
Node.js
Express.js
CSS
Bootstrap
JSON
Git
Heroku

Scope and Modifications Made

The scope for this project was very small, as the app simply contains a signup page, a success page, and a failure page. The goal was build a connection between the app and MailChimp by using the MailChimp API to enable signup information to be sent to the MailChimp database.

Because this app is meant to be a simple introduction to APIs, I did not dedicate any time to writing a newsletter or producing any content for distribution to subscribers. Maybe one day!

An important modification I made was adding environment variables and a .gitignore file to protect the API key that was used to connect to MailChimp.

I chose "Chikorita Propaganda" as the newsletter topic, which is inspired by an Instagram account of the same name.

Process

The following is a high-level overview of what the newsletter signup app will do:

The user types in the web app address (https://chikorita.herokuapp.com/) into their browser, and a GET request is made to the app server on Heroku. The browser is going to retrieve the website HTML, CSS, and JavaScript files from the app server.
The app server should return all of those pieces of data - the HTML, CSS, and JavaScript files - as the response.
To give the user an indication that their signup is successful, a POST request is first made to the MailChimp server from the app server to insert the user signup information in the MailChimp mailing list. This is done via the MailChimp API. If the status code returned indicates a successful request, then the user will be redirected to the success page. Otherwise, they will be redirected to the failure page and be encouraged to try signing up again.

To build the signup page, the HTML and CSS for the Bootstrap Signup page template is taken and slightly adjusted to incorporate it in the project. Then a GET route to access the sign up page and a POST route to send the signup information to the app server are created for the home route.

The next step was to read the MailChimp API documentation, which indicates that in order to use the API, an account must be created to acquire an API key. The API key is a long string of scrambled characters that is used to authenticate those making requests to the API. This allows the MailChimp servers to authenticate us, and prevents random people from adding subscribers to the mailing list or deleting the mailing list by making unauthorized POST requests.

After further reading the documentation to get more info on the API endpoint, paths, and parameters needed to add subscribers to the mailing list, it also indicates that the list of subscribers is an array of objects where each object has an email address, status, first name, and last name fields. A data object with these fields is then created in the app server and populated with the signup information from the POST request to the home route that was created earlier. This JavaScript object is then converted to JSON format before it is posted to MailChimp using the API endpoint and API key for authentication. A test is then performed by submitting information on the signup page, and then checking the mailing list in MailChimp to confirm that it's been posted to the MailChimp server.

Finally, to give the user feedback as to whether or not their signup was successful, the response status code of the request to MailChimp is checked to determine if the user is redirected to either the success or failure page. These pages are created using simple HTML, CSS, and Bootstrap. To test the success page, subscriber info is entered using the correct API key. To test the failure page, an incorrect API key was used.

Once the newsletter signup app is completed, Heroku is used to deploy it on the World Wide Web.

Outcome and Takeaways

Although this wasn't a large project, building this app was an important introduction to the concept of APIs. And because of the wide variety of APIs that are available for so many different topics and interests, I got excited when I realized how possible it was to connect my passions with web development projects in the future. Because of APIs, there are endless possibilities for potential web app ideas!

This project also helped reinforce some Node.js and Express.js concepts learned in previous modules, and served as an introduction to deploying web apps on Heroku.

Possible Improvements Going Forward

To fully realize the potential of this project, content for subscribers must be created and distributed on a regular basis through MailChimp. Additionally, I could also connect the newsletter signup website to another project such as this portfolio, in order to engage those who are regular visitors on my portfolio website with updates.