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.
Open the page directly from here
- 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)
The system expected to have the following dependencies installed
- Node.js
- npm
- git
- ngrok
- Clone repository
- In the terminal navigate into project root folder on local machine and install backend dependencies with
npm install
- In the terminal navigate into
client
folder and install frontend dependencies withnpm install
- In your code editor navigate into project root folder and in the
config
folder renamesample_dev.js
file todev.js
- Google OAuth2:
- a helpful article here
- name the project
emaily-dev
or something similar (keep in mind, we are going to have aproduction
one too!) - add to Authorized JavaScript origins:
http://localhost:5000
- add to Authorized redirect URIs:
http://localhost:5000/auth/google/callback
andhttp://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
)
- 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 aproduction
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:
-
- add a user name
-
- click on
Autogenerate Secure Password
- click on
-
- BEFORE you click on
Create
, click onshow
to see your password
- BEFORE you click on
-
- copy and paste it somewhere for later!
-
- 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...
- In
dev.js
type in a long, random string intoCOOKIE_KEY
- 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
)
- 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
- create a
- SendGrid:
- https://sendgrid.com/
- create a new SendGrid account, this will be for development only!
- in
Settings
, click onAPI
- create API key
- copy and paste it to
dev.js
file (SEND_GRID_KEY
)
- Start the applicaton with
npm run dev
in the project root folder - The aplication runs on http://localhost:3000
- 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 --
- GitHub:
- create a repo for your project
- commit the all the code
- Create a new project on Heroku (https://heroku.com)
- Inside the Heroku project dashboard, click on the
Settings
menu, scroll down toConfig vars
, reveal them - 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
- Authorized domains: add the heroku app link without
- 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
) - Create another MongoDB project, but this time after the cluster is created (takes some time), choose
Add a different IP Address
and enter0.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 ofMONGO_URI
- Enter the
COOKIE_KEY
into Heroku config vars - Copy and paste the stripe keys into Heroku (
STRIPE_PUBLISHABLE_KEY
,STRIPE_SECRET_KEY
) - Copy the heroku app link and add it to the config vars as
REDIRECT_DOMAIN
- Create another SendGrid account (this will be your production account!), copy and paste the API key into Heroku config vars as
SEND_GRID_KEY
- Add another Heroku config var
REACT_APP_STRIPE_KEY
and copy paste theSTRIPE_PUBLISHABLE_KEY
's value in there - 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 themaster
branch is selected (or your prefered branch), clickDeploy Branch
- in Heroku:
Service worker is being activated in the production version
- start app on local machine with the terminal from the project root folder:
npm run dev
- AFTER the app has stared running, start ngrok:
ngrok http 5000
- open your development(!) SendGrid account (which you created first) and paste in
Settings
->Mail settings
-->Event Notification
-->Edit
- 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
The site was tested on Google Chrome only
- 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
This project is licensed under the MIT License - see the LICENSE.md file for details
- Thank you for Stephen Grider for creating the course