Q&A: Thank You Web App, Express.js and Emails

I recently received a question from Joanne Daudier. She is an up and coming web developer, middle term student at a JS/Node.js bootcamp called RefactorU and a reader of Express.js Guide. This is what she wrote:

Hi Azat:

I skimmed over your book today. I feel like it is a bit advanced for me since I’m just learning Express. I do have a few questions for you though.

For my final class project, I’m making a thank you web app that will have a link you can send out to your friends and everyone can come to the site and interactively drag and drop characters and add in speech bubbles. Then at the end, you can send that link with everyone’s contribution to the recipient. Basically, it’ll be an interactive thank you e-card.

Do you mind giving me some hints or guidance on how I can accomplish this? Any help you can give me will be greatly appreciated since I’m a noob to web dev.

Specific questions:

How do I send emails using Express? For instance, it would be great if an email go out to a list of people that you invite to create the e-card. And perhaps a final email to the recipient after the card is “done”.

Any ideas on how to drag and drop characters, swap out backgrounds, and add in speech bubbles? jQuery?

And any other suggestions that you may have for me….

Much thanks,

Joanne

Well, first of all, thank you Joanne for buying my book, interest in Node.js and the questions. Let me point out though that if someone is a complete novice to Node.js they might benefit from my first book Rapi Prototyping with JS and then proceed to Express.js Guide.

In my opition, your Thank You app would have a card object/page accessible via MD5 hashed string (kind of a secret link). Then, like in a Google Docs users will be able to edit the card with special elements. To identify users, you’ll probably have to use cookies and sessions. Everything can be implemented in real-time with Socket.io library and Node.js/Express.js app. To store contributors and recipient you can effortlessly use MongoDB and lightweight Mongoskin. As for hosting, Heroku is still a king of painless app hosting for prototypes and small scale apps.

Now, we’re down to specific questions:

1. Sending emails is not so much of an Express.js thing per se. In other words, you would send emails in Express.js app like in any other Node.js program. I higly recommend SendGrid and its Node.js module. With them sending an email literally is just two lines of code: require sendgrid and send an email.
2. Yes, all these interactions are done on the front-end/clien-side, therefore you’ll need to use some combination of JavaScript (with or without jQuery), images, CSS and DOM manipulation. Then, you’ll need to either send data, i.e., speech bubble location, type, text, (most likely in a JSON format) to the server or use websockets (aforementioned Socket.IO) to persist for real-time saving (my favorite!).
3. The main suggestion is to just start building. Start with something very small, maybe just a form with a name and a text, not even any fancy graphics or animantion. Use GitHub to refactor and re-iterate ’til you have the dream product.

If you have similar questions about Node.js/Express.js, Backbone.js, JavaScript, MongoDB, submit your questions and we’ll try to help you.