Giter Club home page Giter Club logo

emaily's Introduction

Introduction

Welcome to Emaily! This is an application for product owners to automatically organize their user feedback, connecting the back end, based in Node.js, to the front end through React.js. Product owners and startups often need to track users for a service, survey those users, and review the data in order to improve the application. The application will allow product managers to more easily go through this process.

Users sign up for an account via Google OAuth to identify users individually, rather than creating an account, then pay for e-mail credits with Stripe. Site owners can then create a "campaign" or survey to send to their users for feedback collection. Inside this e-mail is a simple link to collect feedback. The service will tabulate that feedback into a report for Site owenrs to analyze data.

Heroku Link: https://emaily-frozen-lake-27026-c8f7077b9dd1.herokuapp.com/

The Render link is hosted on Render's free tier, which will wind down with inactivity, so requests may be delayed by 50 seconds or more. Render Link: emaily-jecn.onrender.com/

Table of Contents

Technologies Used Relationship between Node and Express Google OAuth Generating Express Apps Express Route Handlers

Technologies Used

  • Express.js
  • Google OAuth - Express, MongoDB, and PassportJS (for user OAuth)
  • Stripe API (to handle billing) with MongoDB (to store payment records in a database)
  • React.js + Redux + Redux Form (for survey data storage)
  • 3rd party e-mail provider to send surveys
  • E-mail provider + Express + Mongo (to store data provided by the surveys)
  • MongoDB (to tabulate feedback)
  • MongoDB + React + Redux (to present report of the responses)

Relationship between Node and Express

Node is a JS runtime environment that is used to execute code outside of the browser. Express is a library that runs in the Node runtime. Node could handle everything directly, but Express has helpers to make dealing with HTTP traffic easier.

PassportJS handles the routes in the OAuth flow to forward users' requests to Google, Google's response to grant permission, send the code from the URL to Google servers, receive Google's reply with details about the user. Two common issues are:

(1) Passport requires us to add extra code during some of these steps, causing disruptions in the process that is intended to be fully automated
(2) The Passport library is structured into two different libraries: passport, which generates helpers for handling authorization in Express applications, and passport strategy, which generates helpers for authentication with one specific method (email/password, Google, Facebook, etc.), and you must install each one separately.  This app uses only Google, so it only uses one passport strategy.

Google OAuth

Google OAuth recommends using either OAuth1 or OAuth20, so we will use OAuth20.

Generating Express Apps

Express Route Handlers

Express API contains business logic to take incoming requests from React/Node application, pull information from MongoDB, and send information back to React application - React does not communciate directly with MongoDB. Express API and React app will communicate entirely through HTTP requsts. Express and MongoDB will communicate via an internal method.

emaily's People

Contributors

scarlinj avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.