This site is hosted on Heroku Cloud platform. You may check this app at https://afternoon-caverns-60896.herokuapp.com/

NOTE: I may need to whitelist your email addresses in the Mailgun configuration before you can successfully use this.

1. Clone this repo

git clone [email protected]:nobso/hybrid-mailer.git

2. Change directory into mailer

cd hybrid-mailer

3. Install the packages

npm install

4. Export the mailgun credentials

export MG_DOMAIN=[REPLACE WITH DOMAIN]
export MG_PRIVATE_KEY=[REPLACE WITH PRIVATE KEY]
export SG_PRIVATE_KEY=[REPLACE WITH PRIVATE KEY]

4. Run the app

npx gulp

5. The page will open automatically, if not hit the browser with http://localhost:4000

Note: That console log error message (with HTTP status code 422) was thrown during the form validation, so its an intended behavior.

1. Install Node Version Manager
   1. nvm (Node Version Manager) is a tool that allows you to download and install Node.js. Check if you have it installed via nvm --version
   2. Get the latest from here
   3. This project is built using version 0.34.0
2. Install NodeJS
   1. Make sure you have the latest (LTS) NodeJS
   2. Get the lastest LTS from here
   3. This project is built using version v12.14.1
3. Install NPM
   1. This comes with NodeJS but its always good to check the version and make sure its upto date
   2. This project is built using version 6.13.4
4. Scaffolding
   1. express-generator allows us to create a skeleton for a web application when we work with ExpressJS
   2. pug templating engine - Though there are a lot of other options available, i chose this based on the following reasons
      1. Page layout inheritance
      2. Include option
      3. Loop/control statements
      4. Client side rendering
      5. Easy to learn
   3. CSS engines
      1. There are multiple choices like SASS, STYLUS, LESS etc, but i went with vanilla CSS because this is a simple project and does not need any complicated or more reusable CSS components
5. npm install the required packages
   1. Fix the vulnerabilities issues by running the audits
   2. nodemon for auto reloading the server for changes
   3. browser-sync for refresing the browser
   4. gulp for running the tasks
6. config.yml to keep the application configuration based on the environment

This site is 100% accessible

This site is 100% SEO compliant

All the functionalities work even if there is no JavaScript support available on the client side

The overall performance measured by LightHouse is A Grade.

1. All the assets are minified
2. CSS and JS served from respective single URL
3. Web page size is kept minimal

This site is 100% responsive. It renders well on a variety of devices and window or screen sizes. I've tested using simulators. This site even renders good on landscape/portrait orientation.

I've tested this app manually in the following browsers and devices

1. Browsers
   1. Chrome (Version 79.0.3945.130 (Official Build) (64-bit)), Fire
   2. Firefox (72.0.2 (64-bit)
   3. Safari (Version 13.0.4 (15608.4.9.1.3))
2. Simulators
   1. iPhone 5/SE
   2. iPhone 6/7/8
   3. iPhone X
   4. iPad, iPad Pro
   5. Galaxy S5
   6. Pixel 2/XL
3. Real Devices
   1. iPhone 8

1. For now, all the strings are hardcoded, we should add Internatiolization i18n support
2. CDN support for serving the assets
3. PWA support
4. Email Campaign HTML form should have a CAPTCHA support
5. Multiple email recipients
6. Unit and functional tests
7. CI/CD integration