Beginner Node.js app using Heroku w/ Mailchimp API

Question

I'd like some feedback on the readability and style of the following code. It's a simple Node.js app that uses the Mailchimp API to add emails to a list. The client side handles SVGs, sign-up validation, and a contact modal with validation.

index.js (Node entry point)

const express = require('express');
const bodyParser = require('body-parser');
const request = require('superagent');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + '/public'));
app.set('port', (process.env.PORT || 5000));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/', function (req, res) {
 res.render('index');
});
app.listen(app.get('port'), function () {
 console.log('Node app is running on port', app.get('port'));
});
var mailchimpInstance = process.env.MAILCHIMP_INSTANCE,
 listUniqueId = process.env.MAILCHIMP_LIST_ID,
 mailchimpApiKey = process.env.MAILCHIMP_API_KEY;
app.post('/signup', function (req, res) {
 request
 .post('https://' + mailchimpInstance + '.api.mailchimp.com/3.0/lists/' + listUniqueId + '/members/')
 .set('Content-Type', 'application/json;charset=utf-8')
 .set('Authorization', 'Basic ' + new Buffer('any:' + mailchimpApiKey).toString('base64'))
 .send({
 'email_address': req.body.email,
 'status': 'subscribed'
 })
 .end(function (err, response) {
 if (response.status < 300 || (response.status === 400 && response.body.title === 'Member Exists')) {
 res.send(true);
 } else {
 res.send(false);
 }
 });
});

main.js (client side)

$(document).ready(function () {
 emailjs.init("user_e00V3mHLZYEOvZAHpjKOt");
 $('img[src$=".svg"]').each(function () {
 var $img = jQuery(this);
 var imgURL = $img.attr('src');
 var attributes = $img.prop("attributes");
 $.get(imgURL, function (data) {
 // Get the SVG tag, ignore the rest
 var $svg = jQuery(data).find('svg');
 // Remove any invalid XML tags
 $svg = $svg.removeAttr('xmlns:a');
 // Loop through IMG attributes and apply on SVG
 $.each(attributes, function () {
 $svg.attr(this.name, this.value);
 });
 // Replace IMG with SVG
 $img.replaceWith($svg);
 }, 'xml');
 });
});
$('#signup-form').on('submit', function () {
 var data = {};
 var emailInput = document.getElementById('email');
 data.email = emailInput.value;
 $.ajax({
 type: 'POST',
 data: JSON.stringify(data),
 cache: false,
 contentType: 'application/json',
 datatype: 'json',
 url: '/signup',
 success: function (returns) {
 if (returns) {
 showSuccess('#email')
 swal('Congratulations!', 'Please check your email to confirm your subscription.', 'success')
 } else {
 showError('#email')
 swal({
 title: 'Error!',
 text: 'Please check your email address again.',
 type: 'error'
 });
 }
 }
 });
 return false;
});
$('.toggle-modal').on('click', function () {
 $('#contact-modal').toggleClass('is-active');
});
$('#contact-button').on('click', function () {
 var email = document.getElementById('email-input').value;
 var name = document.getElementById('name-input').value;
 var message = document.getElementById('message-input').value;
 var valid = true
 valid = isValid(name, '#name-input');
 valid = isValid(email, '#email-input');
 valid = isValid(message, '#message-input');
 if (valid) {
 $('#contact-button').toggleClass('is-loading');
 emailjs.send(
 "gmail",
 "contact_me", {
 "reply_to": email,
 "from_name": name,
 "message_html": message
 }
 ).then(function (response) {
 resetForm();
 swal('Thanks!', 'You\'ll be hearing from us shortly.', 'success')
 }, function (err) {
 resetForm();
 swal({
 title: 'Error!',
 text: 'Please try again later.',
 type: 'error'
 });
 });
 }
});
function resetForm() {
 // Remove loading state and close the modal
 $('#contact-button').toggleClass('is-loading');
 $('#contact-modal').toggleClass('is-active');
 var ids = ['#name-input', '#email-input', '#message-input']
 for (var i = 0; i < ids.length; i++) {
 input = ids[i]
 $(input).val('');
 $(input).removeClass('is-success');
 $(input).removeClass('is-danger');
 $(input + '-success').addClass('is-hidden');
 $(input + '-warning').addClass('is-hidden');
 }
}
function isValid(value, input) {
 if (isEmpty(value) || isBlank(value)) {
 showError(input)
 return false
 } else {
 showSuccess(input)
 return true;
 }
}
function showError(input) {
 $(input).removeClass('is-success');
 $(input).addClass('is-danger');
 $(input + '-success').addClass('is-hidden');
 $(input + '-warning').removeClass('is-hidden');
 $(input + '-button').addClass('is-danger');
}
function showSuccess(input) {
 $(input).removeClass('is-danger');
 $(input).addClass('is-success');
 $(input + '-success').removeClass('is-hidden');
 $(input + '-warning').addClass('is-hidden');
 $(input + '-button').removeClass('is-danger');
 $(input + '-button').addClass('is-primary');
}
function isEmpty(str) {
 return (!str || 0 === str.length);
}
function isBlank(str) {
 return (!str || /^\s*$/.test(str));
}

Full code available here - https://github.com/leerob/Drink

Answer 1

I've never worked with JQuery, but I can give you a few tips on the node part:

First, define a project structure. Separate the code in different files and directories for easier reading as well as making it more scalable:

src
|_ endpoints
| |_ routes.js
| |_ mailchimp.endpoint.js
|
|_ config
| |_ db.config.js
|
|_ app.js

Secondly, here are a few overall tips:

• Prefer the use of let/const always over var. You won't be needing var again. Ever.
• Use ES6 arrow functions and, in case they're a one-liner, avoid the brackets.
• Use the express router
• Use use strict as a best practice.

---

app.js

'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const request = require('superagent');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + '/public'));
app.set('port', (process.env.PORT || 5000));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
require('./endpoints/routes.js')(app);
app.get('/', (req, res) => res.render('index'));
app.listen(app.get('port'), () => console.log('Node app is running on port', app.get('port')));
module.exports = app;

routes.js

'use strict';
const app = require('express');
const mailchimp = require('./mailchimp.endpoint.js');
const routes = (app) => {
 app.use('', mailchimp);
};
module.exports = routes;

mailchimp.endpoint.js

'use strict';
const express = require('express'),
 router = express.Router();
const mailchimpInstance = process.env.MAILCHIMP_INSTANCE,
 listUniqueId = process.env.MAILCHIMP_LIST_ID,
 mailchimpApiKey = process.env.MAILCHIMP_API_KEY;
const requestMailchimp = (req, res) => {
 request
 .post('https://' + mailchimpInstance + '.api.mailchimp.com/3.0/lists/' + listUniqueId + '/members/')
 .set('Content-Type', 'application/json;charset=utf-8')
 .set('Authorization', 'Basic ' + new Buffer('any:' + mailchimpApiKey).toString('base64'))
 .send({
 'email_address': req.body.email,
 'status': 'subscribed'
 })
 .end((err, response) => {
 if (response.status < 300 || (response.status === 400 && response.body.title === 'Member Exists')) {
 res.send(true);
 } else {
 res.send(false);
 }
 });
};
router.post('/signup', requestMailchimp);
module.exports = router;