Email Somebody is a simple service that lets you send emails. Powered by Mailgun and Postmark.
Check it out @ emailsomebody.com.
- Team Members
- Technology Stack, APIs, and Third-party Tools
- Folder and File Structure
- Development
- Deployment
- Additional Features and TODOs
- KQED Notes
- React for rendering views
- Node.js and Express
- Digital Ocean for deployment
- jQuery
- Flightplan for streamlining application deployment
+-------------+
|emailSomebody|
+------+------+
|
+-------------------------+-------------------------+
| |
v v
+--+---+ +--+---+
|client| |server|
+--+---+ +--+---+
| |
+ +----+-----+
| | |
v v v
+-+--------+ +--+---+ +-+-+
|components| |static| |api|
+-+--------+ +--+---+ +-+-+
| | |
v v v
+-----+-----+ +------+-----+ +-+---+
| React | | Node | | Node|
+-----------+ +------------+ +-----+
The repo is divided into 2 main folders, client
and server
.
client
is the container for the React view layer and index.html
server
contains both our static file server and our api
-
= Node 4.4.5
- Developed on Node v. 6.2.0
- Run
npm install
from the root directory. - Sign up for Mailgun and Postmark accounts.
- Go to .sample.env, remove dummy values and replace '.sample' to expose environment variables
- Run
node server.js
in the api and static folders
- Run
npm test
in the root folder
See sample.flightplan.js for guidance on how to use Flightplan. Make sure to sub out all the dummy data for your own config values.
Then, run fly production
to deploy.
NOTE: Any untracked files must be added with git add <UNTRACKED_FILE>
if you want them to be sent to production
- Setup https on both static and api servers
- Enforce rate limiting to prevent abuse of API
- Use nginx for load balancing, tinier footprint, caching, increased performance
- Form Validation - Prevent submit
- More testing
- Webpack or [concat, minify, purify] build
- PostCSS for modularity and speed over other pre-processors
- Add media queries to make site responsive
- Add service workers for better cache control in event of internet loss
- Email Scheduling / Calendar integration
- React Router for smooth SPA flow
- Redux / Flux architecture for managing state if application grows in complexity
- Linting
- Loading / Progress Bar
- ES6
- Description: A full-stack application built to send email.
- UI features:
- Material Design toasts
- Fields shift on focus
- Automatic field focus on page load, auto-clear on successful email submission
- Backend Features:
- Form processing on api server
- Internal failsafe with clusters and alternative email service [Postmark]
- One command deployment using flightplan and upstart [/etc/init]
- Tech Stack Choice:
- Front-End: React.JS - Used React because it's lightweight, declarative and makes prototyping simple. Tradeoff is that React isn't a framework. It's soley a view layer, not an MVC or MV* framework. When working with data, developers will often use react in conjunction with some way to manage state and make http requests.
- Back-End: Node.JS with Express.JS- Used Node with Express for rapid development of two separate servers running on different ports.
A potentially better option could have been nginx for serving up static assets and passing dynamic requests to node.js as the api layer. Nginx can help with caching, providing error pages and rate limiting. Primary advantage of Node/Express backend is simplicity, reduced context switching for developers and built in clustering ability which does a good-enough job and allows for scaling. Note: The API in this case does not respond like a normal RESTful API. Instead it acts as a proxy for Mailgun and Postmark.
- Note on Tests: Much time was spent on experimenting with https in production environments and navigating the fun, strange world of deployment. The test presented in the test folder isn't representative of what should be tested but offers a starting place for testing.
- Resume
- Hosted Application: Email Somebody (deployed on Digital Ocean)
MIT