This project uses Google Firebase to post to and store the email addresses submitted using the included form.
The main aim of this project was to create a newsletter signup form which stores the submitted email address to a database. Validation must be used to ensure no duplicate or invalid emails can be submitted.
Google Firebase was selected as the main platform to use for this project, Google Firebase was selected as it's free tier is robust and it allows me manipulate the database for this project in real time.
Firebase also has a large community and plenty of documentation available online.
A variant of this project was also written using PHP and MySQL. Find the source code inside the /php/ folder.
A free temporary database was created using www.db4free.net to store the form submissions.
The email address entered is trimmed and converted to lowercase, in addition the email validation is done using PHP's filter_var() function.
The SQL database is queried for existing email addresses to the one posted in the form and throws an error or success message accordingly. The connection to the database is then closed.
This project makes use of ParcelJS, ParcelJS was selected as it is quick to setup and it allows me to use LiveReload, SCSS and allows me to minify and compile this project.
JavaScript was used to handle all the logic of this project.
Firebase is initialised at page load. (Credentials are exposed at the moment but will be removed at a later date.)
The form checks whether the email submitted is valid and then connects to the Firebase database to check if the form already exists inside the database, If the email is valid and not a duplicate the form will then post to the database.
Validation - Any email submitted is validated using a regex function, in addition the form is always sent as lowercase in order to prevent case sensitive duplicates.
The index.html file is selected as the entry point for ParcelJS.
SCSS is used in this project as it allows for more legible code when working within nested elements.
- Google Firebase
- Google Fonts
- ParcelJS
- Normalise CSS
- SCSS