Emaily web app 📧

coursework for Udemy - Node with React: Fullstack Web Development course

The aim of the project was to build the front- and backend of a survey-email sender web application.

The course branch contains the app described in the course, the master branch contains an improved version with many additional features.

---

📑 Table of Contents

• Live link
• Dev stack
• Getting started
• How to use
• Licence
• Credits

🔗 Live link

Open the page directly from here

🛠 Dev stack

• Node, Express
• Git, GitHub
• Heroku
• Passport.js
• Google OAuth2
• MongoDB, Mongoose
• React (create-react-app)
• Redux, redux-form
• Materialize CSS
• Stripe API
• SendGrid API
• ngrok
• socket.io (only locally, in progress)

🏁 Getting started

Setting up application on local machine:

The system expected to have the following dependencies installed

• Node.js
• npm
• git
• ngrok

1. Clone repository
2. In the terminal navigate into project root folder on local machine and install backend dependencies with npm install
3. In the terminal navigate into client folder and install frontend dependencies with npm install
4. In your code editor navigate into project root folder and in the config folder rename sample_dev.js file to dev.js
5. Google OAuth2:
   • a helpful article here
   • name the project emaily-dev or something similar (keep in mind, we are going to have a production one too!)
   • add to Authorized JavaScript origins: http://localhost:5000
   • add to Authorized redirect URIs: http://localhost:5000/auth/google/callback and http://localhost:3000/auth/google/callback
   • paste your google client id into the renamed dev.js file (GOOGLE_CLIENT_ID)
   • paste your google client secret into the renamed dev.js file too (GOOGLE_CLIENT_SECRET)
6. MongoDB:
   • https://www.mongodb.com/
   • create a new project, call it something meaningul with -dev in it (keep in mind, we are going to have a production one too!)
   • build a cluster
   • helpful article here
   • leave the free settings as they are
   • after the cluster is created (takes some time), choose Add Your Current IP Address
   • in the Create a MongoDB User section:
     • 1. add a user name
     • 2. click on Autogenerate Secure Password
     • 3. BEFORE you click on Create, click on show to see your password
     • 4. copy and paste it somewhere for later!
     • 5. click on create
   • choose a connection method: Connect your application
   • make sure the Connection string only is choosen
   • copy the string, and paste it into dev.js file (MONGO_URI), replace <password> with your password so it will look like this: mongodb+srv://yourusernamehere:yourpasswordhere@emaily...
7. In dev.js type in a long, random string into COOKIE_KEY
8. Stripe:
   • https://dashboard.stripe.com
   • Get your test API keys
   • copy and paste the publishable key into dev.js file (STRIPE_PUBLISHABLE_KEY)
   • copy and paste the secret key into dev.js file (STRIPE_SECRET_KEY)
9. In your code editor navigate into the client folder:
   • create a .env.development file and paste in the following text: REACT_APP_STRIPE_KEY=yourStripePublishableKeyHere
   • create a .env.production file and paste in the same text again
10. SendGrid:
    • https://sendgrid.com/
    • create a new SendGrid account, this will be for development only!
    • in Settings, click on API
    • create API key
    • copy and paste it to dev.js file (SEND_GRID_KEY)
11. Start the applicaton with npm run dev in the project root folder
12. The aplication runs on http://localhost:3000
13. ngrok
    • (for me it doesn't work in git bash, I have to use another terminal)
    • start ngrok in terminal: ngrok http 5000 and leave it open, running
    • in SendGrid: Settings -> Mail settings
    • find Event Notification, turn it on
    • grab the ngrok link from the terminal:
      find this line: Forwarding http://randomtexthere.ngrok.io -> http://localhost:5000
    • copy only the http://randomtexthere.ngrok.io part
    • paste the ngrok link into HTTP POST URL like this: ngroklinkhere/api/surveys/webhooks
    • select actions: tick the Clicked checkbox
    • save it (scroll a little up, click on the tick)

-- OPTIONAL: deploy production version to Heroku --

15. GitHub:
    • create a repo for your project
    • commit the all the code
16. Create a new project on Heroku (https://heroku.com)
17. Inside the Heroku project dashboard, click on the Settings menu, scroll down to Config vars, reveal them
18. Create another Google project, this will be the production version:
    • Authorized domains: add the heroku app link without https://
    • add Authorized JavaScript origins: copy and paste the heroku app link (Open app button on top of the page) here
    • Authorized redirect URIs: yourherokuapplinkhere/auth/google/callback
    • create client id and client secret
19. Go back to Heroku, add the google keys as config vars with the SAME key names we used in dev.js (GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET)
20. Create another MongoDB project, but this time after the cluster is created (takes some time), choose Add a different IP Address and enter 0.0.0.0/0, copy the password to somewhere, then copy and paste the string into Heroku, insert the password and and add key name of MONGO_URI
21. Enter the COOKIE_KEY into Heroku config vars
22. Copy and paste the stripe keys into Heroku (STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY)
23. Copy the heroku app link and add it to the config vars as REDIRECT_DOMAIN
24. Create another SendGrid account (this will be your production account!), copy and paste the API key into Heroku config vars as SEND_GRID_KEY
25. Add another Heroku config var REACT_APP_STRIPE_KEY and copy paste the STRIPE_PUBLISHABLE_KEY's value in there
26. Deploying to Heroku the first time:
    • in Heroku: Deploy menu -> Deployment method: GitHub (connect your GitHub account)
    • below that: type in the GitHub repo name, and connect
    • scroll down: Manual deploy, make sure the master branch is selected (or your prefered branch), click Deploy Branch

Service Worker

Service worker is being activated in the production version

🏃 Starting app on local machine after inital setup

1. start app on local machine with the terminal from the project root folder: npm run dev
2. AFTER the app has stared running, start ngrok: ngrok http 5000
3. open your development(!) SendGrid account (which you created first) and paste in Settings -> Mail settings --> Event Notification --> Edit
4. paste the ngrok link into HTTP POST URL like this: ngroklinkhere/api/surveys/webhooks ❗ every time after you shut down ngrok and start it, it generates a new link so must update it in your development(!) SendGrid account too

Browser compatibility

The site was tested on Google Chrome only

🍴 How to use

• log in with Google credentials
• purchase credit:
  • click on "ADD CREDITS"
  • input any email address (even false one)
  • key in the following credit card number: "4242 4242 4242 4242"
  • any dates in the future
  • any CVC (3 digits)
• create new survey:
  • on Dashboard page click on the big "+" sign button
  • add survey title
  • add subject line
  • add email body: this will be the question in the survey email
  • email address(es) separated with comas
  • click on next, check the text, send survey
• list of surveys:
  • on Dashboard page the existing surveys are displayed in the order from newest to oldest
  • surveys can be filtered and the ordering changed by the drop down field above the survey list
  • survey results can be checked by clicking on the "RESULTS" button
  • each survey can be deleted with the "DELETE" button
• settings:
  • the user account can be deleted on the Settings page

📜 Licence

This project is licensed under the MIT License - see the LICENSE.md file for details

💰 Credits

• Thank you for Stephen Grider for creating the course