bavarianrhino / emaily_app

Full Stack MERN App - Google Auth Login, Stripe Payment, Send mass survey to multiple emails and persist response data via webhooks.

Survey[] (Survey Array)

A large feedback-collection app. This mega app includes the full gamut of features, including everything from authentication to email handling. The app can be used to send mass emails to a big list of users for the purpose of collecting feedback.

🌎 Motivation

Full-Stack Web application that profiles the advanced features of React, Redux, Express.js, Node.js, and MongoDB.

🎬 Demo

Login in through Google or Facebook Auth

Add and purchase credits through secure Stripe Gateway

Send survey with form validation and persist response via webhooks

🔬 Learning Objectives

• Architectural considerations of building a full stack app
• Connect a front-end Create-React-App server to a NodeJS and Express backend
• Communicate data from the Mongo database to the React application
• Understand how to route user requests on the front end with React Router and on the backend with Express
• Build reusable user inputs with Redux Form, complete with navigation
• Handle credit cards and receive payments from users with Stripe
• Engage users with automated emails
• Enhance authentication flows in the app with Google OAuth authentication
• Separate production and development resources with advanced API key handling techniques
• Educate users on how to use the app with custom build landing pages

🛠 Tech/Framework Stack

🌖Front-End

• React.js, React-Redux, React-Router-Dom, React-Stripe-Checkout
• Redux, Redux-Form, Redux-Thunk
• JavaScript, ES6
• Lodash
• http-proxy-middleware
• Materialize-css
• JSS
• Axios

🌘Back-End

• Mongo Database
• MongoDB.Atlas (For deployed Database)
• Mongoose Schema
• Node.js
• Express.js
• 0auth
• Concurrently
• Cookie-Session
• Local Tunnel
• Passport.js
• Path
• Path-Parser
• Send Grid
• Stripe

☁️API

• Google Client API
• Stripe API
• Send Grid API

🚀Deployment

• Heroku

💻 Local Env Installation

🔨 Install

npm install && npm install --prefix client

🔨 Development Configuration

Create a file "dev.js" in /config and paste the following configuration keys with appropriate values.

module.exports = {
    googleClientID: '',
    googleClientSecret: '',
    mongoURI: '',
    cookieKey: '',
    stripePublishableKey: '',
    stripeSecretKey: '',
    sendGridKey: '',
    redirectDomain: ''
};

🔨 Run the application

To start the application run the following command.

npm run dev

🚧 TODO

• Flip survey card and show responses in circle chart
• Facebook, Instagram, & Pintrist Auth Login
• Hamburger menu on mobile