Learn how to build and deploy an application using the MERN Stack.

1. BUILDING WEB APPS WITH THE MERN STACK
With MongoDB Atlas and Google Cloud Platform

2. 2
Who Am I?
Disclaimer
Beau Carnes
Teacher and Developer
@CarnesBeau
freeCodeCamp.org

3. Welcome – MERN Stack
• Creating and deploying backend w/ MongoDB Atlas & Google Cloud Platform
• Thursday, May 9th
• 11:00 AM PST | 12:00 PM MST | 1:00 PM CST | 2:00 PM EST
• Creating frontend
• Thursday, May 16th
• 11:00 AM PST | 12:00 PM MST | 1:00 PM CST | 2:00 PM EST
• Connecting frontend to backend, refactoring and review
• Thursday, May 23rd
• 11:00 AM PST | 12:00 PM MST | 1:00 PM CST | 2:00 PM EST

4. Agenda
• Introduction to MERN
• Database Concepts
• Getting started with MongoDB Atlas
• Creating the backend of an exercise tracker app
• Using MongoDB Atlas to explore and work with data

5. MERN Stack
The MERN stack consists of the following technologies:
• MongoDB: A document-based open source database.
• Express: A web application framework for Node.js.
• React: A JavaScript front-end library for building user interfaces.
• Node.js: JavaScript run-time environment that executes JavaScript code
outside of a browser (such as a server).
and Mongoose: Simple, schema-based solution to model application data.

6. Database Concepts
Tabular (Relational) MongoDB
Database Database
Table Collection
Row Document
Index Index
Join $lookup
Foreign Key Reference

7. MongoDB Documents
{
name : “Beau Carnes”,
title : “Developer & Teacher”,
address : {
address 1 : “123 Main Street”,
city : “Grand Rapids”,
state : “Michigan”,
postal_code : “49503”
},
topics : [ “MongoDB”, “Python”, “JavaScript”, “Robots”],
employee_number : 1234,
location : [44.9901, 123.0262]
}

8. MongoDB Documents – BSON Types
{
name : “Beau Carnes”,
title : “Developer & Teacher”,
address : {
address 1 : “123 Main Street”,
city : “Grand Rapids”,
state : “Michigan”,
postal_code : “49503”
},
topics : [ “MongoDB”, “Python”, “JavaScript”, “Robots”],
employee_number : 1234,
location : [44.9901, 123.0262]
}
String
Nested Document
Array
Integer
Geo-Spatial Coordinates

9. Getting Started With MongoDB Atlas
• The fastest, easiest way to get started with MongoDB.
• https://www.mongodb.com/cloud/atlas

10. MongoDB
Atlas
on
GCP
Day 0
Fully
managed,
automated
and self
service
Available
across 15+
regions
Snapshot
and
Continuous
backups
Plug in with
GCP
services
Live
migration,
no
disruption

11. Create an Account

12. Build a Cluster

14. Cluster Configuration

15. Cluster Configuration

16. Cluster Build Out

17. Cluster Security

18. Cluster Connections

19. Exercise Tracker Application
• Application will contain:
• Exercises
• Users
• Every exercise has one user

20. Time to Code!

21. ObjectId
ObjectId(“5c2fc4b3e52f37b7ee86096c”)
5c2fc4b3 e52f37b7ee a58d00
UNIX Timestamp
4 Bytes
Random Value
5 Bytes
Count
3 Bytes

22. What We Have Learned
• How to create a database and collection
• How to insert content into a collection
• How to query the collection programmatically
• How to update a document
• How to delete a document

23. Q&A
Beau Carnes
@CarnesBeau