Giter VIP home page Giter VIP logo

emaily-survey-app's Introduction

React & Node Project

A full stack project with React and Node. It has been deployed here: https://vast-garden-42186.herokuapp.com/.

App Overview

This is a feedback collection application for startup owners. If you are a startup owner and you want some feedback from your customers, you can use this application to send emails requesting feedback and get tabulation of results. Your app/service can be better with valuable feedbacks!

User Flow

Here is the app user flow:

  1. User signs up via Google OAuth
  2. User pays for email credits via Stripe
  3. User creates a new 'campaign'
  4. User enters a list of emails to send survey to
  5. We send email to list of surveyees
  6. Surveyees click on link in email to provide feedback
  7. We tabulate feedback
  8. User can see report of all survey responses

Tech Stack

Main tech for main steps (some smaller libraries not included):

  1. User Signup: Express Server + MongoDB + PassportJS
  2. User Payment: Stripe + MongoDB
  3. User Create Survey: React + Redux
  4. User Enter Emails: React + Redux + Redux Form
  5. We Send Emails: Email Provider (SendGrid)
  6. Surveyees Click Links: SendGrid + Express + MongoDB

Development Notes

The detailed list of development notes can be viewed here.

  1. Relationship Between Node & Express
  2. Generating Our First Express App
  3. Express Route Hanlders
  4. How to Deploy the Application
  1. Intro to Google OAuth
  2. Passport JS
  3. Testing OAuth
  4. Access and Refresh Tokens
  5. Nodemon Setup
  6. Appendix

Part III. Adding MongoDB

  1. Server Structure Refactor
  2. Sign In Users with OAuth
  3. MongoDB Setup
  4. Working with Mongoose
  5. Finishing up with Authentication
  1. Dev vs Prod Keys
  2. Determining Environment
  3. Heroku Env Variables
  4. Fixing Heroku Proxy Issues
  1. React App Generation
  2. Running the Client and Server
  3. Routing Stumbling Block
  4. Why This Architecture (Optional)
  1. Async/Await Syntax
  2. Client Setup
  3. Why We Care About Auth
  1. React Router Setup
  2. Header Component Implementation
  3. Communication between React and Server
  4. After Logged In
  1. Client Side Billing
  2. Sever Side Billing
  3. After Charging the User
  1. Express with Create-React-App in Production
  2. Routing in Production
  3. Deployment Options
  4. Adding in a Heroku Build Step
  1. Intro to Survey
  2. Database Setup for Surveys
  3. Back End Setup for Surveys
  4. Sending Emails
  1. Survey Introduction
  2. New Survey Form
  1. Form Validation
  2. Form Review Page
  3. Submitting Form
  1. Feedback with Webhooks
  2. Server Side Setup for Survey Results
  1. Fetching a List of Surveys
  2. Displaying Surveys in the Front End

emaily-survey-app's People

Contributors

qqqlllyyyy 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.