SlideShare a Scribd company logo

Part Two: Building Web Apps with the MERN Stack

Download as PPTX, PDF
MongoDB
MongoDB

The document outlines a series of online sessions focused on building web applications using the MERN stack, scheduled for May 9th, 16th, and 23rd, led by Beau Carnes. It includes an introduction to React, a review of backend development, and practical coding examples such as creating a shopping list component. The sessions aim to guide participants through both frontend and backend development processes using MongoDB Atlas and Google Cloud Platform.

Technology
1 of 8
Download to read offline
1
2
3
4
5
6
7
8
BUILDING WEB APPS WITH THE MERN STACK With MongoDB Atlas and Google Cloud Platform
2 Who Am I? Disclaimer Beau Carnes Teacher and Developer @CarnesBeau freeCodeCamp.org
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 using React • 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
Agenda • React introduction • Review backend • Creating frontend of the exercise tracker app
What Is React?
class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Cereal</li> <li>Milk</li> <li>Bananas</li> </ul> </div> ); } } // Example usage: <ShoppingList name="Beau" />
Let’s go to the code!
Q&A Beau Carnes @CarnesBeau

More Related Content

What's hot (20)

PDF
Modern Static Site with GatsbyJS
Riza Fahmi
 
PDF
Mongodb tutorial at Easylearning Guru
KCC Software Ltd. & Easylearning.guru
 
PDF
The State of Rust Web Frameworks
IanWagner10
 
PPTX
Augmenting Mongo DB with treasure data
Treasure Data, Inc.
 
PPTX
Meetup#2: Building responsive Symbology & Suggest WebService
Minsk MongoDB User Group
 
PDF
Unifying Events and Logs into the Cloud
Eduardo Silva Pereira
 
PPTX
FULL stack -> MEAN stack
Ashok Raj
 
PDF
MongoDB vs OrientDB
Stefano Campese
 
PDF
Asynchronous processing using AWS Services
Michael Bui
 
PPTX
Jumpstart: Your Introduction to MongoDB
MongoDB
 
PPT
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Forrest Norvell
 
PPTX
Intoduction of FIrebase Realtime Database
Sahil Maiyani
 
PDF
Fluentd and Docker - running fluentd within a docker container
Treasure Data, Inc.
 
PPTX
Going Serverless with AWS Lambda at ReportGarden
Jay Gandhi
 
PDF
The GraphQL Ecosystem in 2018
Nikolas Burk
 
PPTX
Why MongoDB over other Databases - Habilelabs
HabileLabs
 
KEY
Living with SQL and NoSQL at craigslist, a Pragmatic Approach
Jeremy Zawodny
 
PPT
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
MongoDB
 
PPT
MongoDB Pros and Cons
johnrjenson
 
ODP
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
niallo
 
Modern Static Site with GatsbyJS
Riza Fahmi
 
Mongodb tutorial at Easylearning Guru
KCC Software Ltd. & Easylearning.guru
 
The State of Rust Web Frameworks
IanWagner10
 
Augmenting Mongo DB with treasure data
Treasure Data, Inc.
 
Meetup#2: Building responsive Symbology & Suggest WebService
Minsk MongoDB User Group
 
Unifying Events and Logs into the Cloud
Eduardo Silva Pereira
 
FULL stack -> MEAN stack
Ashok Raj
 
MongoDB vs OrientDB
Stefano Campese
 
Asynchronous processing using AWS Services
Michael Bui
 
Jumpstart: Your Introduction to MongoDB
MongoDB
 
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Forrest Norvell
 
Intoduction of FIrebase Realtime Database
Sahil Maiyani
 
Fluentd and Docker - running fluentd within a docker container
Treasure Data, Inc.
 
Going Serverless with AWS Lambda at ReportGarden
Jay Gandhi
 
The GraphQL Ecosystem in 2018
Nikolas Burk
 
Why MongoDB over other Databases - Habilelabs
HabileLabs
 
Living with SQL and NoSQL at craigslist, a Pragmatic Approach
Jeremy Zawodny
 
The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
MongoDB
 
MongoDB Pros and Cons
johnrjenson
 
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
niallo
 

Similar to Part Two: Building Web Apps with the MERN Stack (20)

PPTX
Kick start your journey as mern stack developer
ShrutiPanjwani1
 
PDF
MERN Stack Developer Roadmap By ScholarHat PDF
scholarhattraining
 
PDF
Mern Stack Development- Comprehensive Guide
ultroNeous Technologies | Best Web App Development Company
 
PDF
mern presentation.pdf
ankitkr8074
 
PPTX
MERN Stack in the fied of computer .pptx
substantialgoosejgfj
 
PPTX
Benefits of using mern stack
JAMESJOHN130
 
PDF
Overview of MERN Stack Development - Agile Infoways LLC
Agile Infoways LLC
 
PPTX
Dynamisers solutions 1 month training in html css java in web devolpment.pptx
shivamneemwal123
 
PPTX
MERN Stack Development Company
Reon Tel
 
PPTX
MERN Stack Lokesh Yogi.pptx
LokeshYogi8
 
PPTX
Introduction-to-the-MERN-Stack.pptx useful
kurapativyshnavi3
 
PPTX
Unveiling the Latest Trends in MERN Development
khridya654
 
PDF
Mern Stack Developer Course In Nagpur
Placementbct
 
PDF
MERN Web Development
deorwine infotech
 
PDF
Mern Stack App Development: What Does the Future Hold?
PixelCrayons
 
PPTX
MERN Stack Developer.pptx
Abadat Hossain
 
PPTX
Mern Stack Development Company.pptx
Pattem Digital
 
PDF
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
Bytes Technolab Inc.
 
PPTX
Mern stack
Eduonix
 
PPTX
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
pmgdscunsri
 
Kick start your journey as mern stack developer
ShrutiPanjwani1
 
MERN Stack Developer Roadmap By ScholarHat PDF
scholarhattraining
 
Mern Stack Development- Comprehensive Guide
ultroNeous Technologies | Best Web App Development Company
 
mern presentation.pdf
ankitkr8074
 
MERN Stack in the fied of computer .pptx
substantialgoosejgfj
 
Benefits of using mern stack
JAMESJOHN130
 
Overview of MERN Stack Development - Agile Infoways LLC
Agile Infoways LLC
 
Dynamisers solutions 1 month training in html css java in web devolpment.pptx
shivamneemwal123
 
MERN Stack Development Company
Reon Tel
 
MERN Stack Lokesh Yogi.pptx
LokeshYogi8
 
Introduction-to-the-MERN-Stack.pptx useful
kurapativyshnavi3
 
Unveiling the Latest Trends in MERN Development
khridya654
 
Mern Stack Developer Course In Nagpur
Placementbct
 
MERN Web Development
deorwine infotech
 
Mern Stack App Development: What Does the Future Hold?
PixelCrayons
 
MERN Stack Developer.pptx
Abadat Hossain
 
Mern Stack Development Company.pptx
Pattem Digital
 
Hiring Dedicated MERN Developer Essential Factors to Consider.pdf
Bytes Technolab Inc.
 
Mern stack
Eduonix
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
pmgdscunsri
 
Ad

More from MongoDB (20)

PDF
MongoDB SoCal 2020: Migrate Anything* to MongoDB Atlas
MongoDB
 
PDF
MongoDB SoCal 2020: Go on a Data Safari with MongoDB Charts!
MongoDB
 
PDF
MongoDB SoCal 2020: Using MongoDB Services in Kubernetes: Any Platform, Devel...
MongoDB
 
PDF
MongoDB SoCal 2020: A Complete Methodology of Data Modeling for MongoDB
MongoDB
 
PDF
MongoDB SoCal 2020: From Pharmacist to Analyst: Leveraging MongoDB for Real-T...
MongoDB
 
PDF
MongoDB SoCal 2020: Best Practices for Working with IoT and Time-series Data
MongoDB
 
PDF
MongoDB SoCal 2020: MongoDB Atlas Jump Start
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Powering the new age data demands [Infosys]
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Using Client Side Encryption in MongoDB 4.2
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Using MongoDB Services in Kubernetes: any ...
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Go on a Data Safari with MongoDB Charts!
MongoDB
 
PDF
MongoDB .local San Francisco 2020: From SQL to NoSQL -- Changing Your Mindset
MongoDB
 
PDF
MongoDB .local San Francisco 2020: MongoDB Atlas Jumpstart
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Tips and Tricks++ for Querying and Indexin...
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Aggregation Pipeline Power++
MongoDB
 
PDF
MongoDB .local San Francisco 2020: A Complete Methodology of Data Modeling fo...
MongoDB
 
PDF
MongoDB .local San Francisco 2020: MongoDB Atlas Data Lake Technical Deep Dive
MongoDB
 
PDF
MongoDB .local San Francisco 2020: Developing Alexa Skills with MongoDB & Golang
MongoDB
 
PDF
MongoDB .local Paris 2020: Realm : l'ingrédient secret pour de meilleures app...
MongoDB
 
PDF
MongoDB .local Paris 2020: Upply @MongoDB : Upply : Quand le Machine Learning...
MongoDB
 
MongoDB SoCal 2020: Migrate Anything* to MongoDB Atlas
MongoDB
 
MongoDB SoCal 2020: Go on a Data Safari with MongoDB Charts!
MongoDB
 
MongoDB SoCal 2020: Using MongoDB Services in Kubernetes: Any Platform, Devel...
MongoDB
 
MongoDB SoCal 2020: A Complete Methodology of Data Modeling for MongoDB
MongoDB
 
MongoDB SoCal 2020: From Pharmacist to Analyst: Leveraging MongoDB for Real-T...
MongoDB
 
MongoDB SoCal 2020: Best Practices for Working with IoT and Time-series Data
MongoDB
 
MongoDB SoCal 2020: MongoDB Atlas Jump Start
MongoDB
 
MongoDB .local San Francisco 2020: Powering the new age data demands [Infosys]
MongoDB
 
MongoDB .local San Francisco 2020: Using Client Side Encryption in MongoDB 4.2
MongoDB
 
MongoDB .local San Francisco 2020: Using MongoDB Services in Kubernetes: any ...
MongoDB
 
MongoDB .local San Francisco 2020: Go on a Data Safari with MongoDB Charts!
MongoDB
 
MongoDB .local San Francisco 2020: From SQL to NoSQL -- Changing Your Mindset
MongoDB
 
MongoDB .local San Francisco 2020: MongoDB Atlas Jumpstart
MongoDB
 
MongoDB .local San Francisco 2020: Tips and Tricks++ for Querying and Indexin...
MongoDB
 
MongoDB .local San Francisco 2020: Aggregation Pipeline Power++
MongoDB
 
MongoDB .local San Francisco 2020: A Complete Methodology of Data Modeling fo...
MongoDB
 
MongoDB .local San Francisco 2020: MongoDB Atlas Data Lake Technical Deep Dive
MongoDB
 
MongoDB .local San Francisco 2020: Developing Alexa Skills with MongoDB & Golang
MongoDB
 
MongoDB .local Paris 2020: Realm : l'ingrédient secret pour de meilleures app...
MongoDB
 
MongoDB .local Paris 2020: Upply @MongoDB : Upply : Quand le Machine Learning...
MongoDB
 
Ad

Recently uploaded (20)

PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
Digital Circuits, important subject in CS
contactparinay1
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 

Part Two: Building Web Apps with 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 using React • 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 • React introduction • Review backend • Creating frontend of the exercise tracker app
  • 6. class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Cereal</li> <li>Milk</li> <li>Bananas</li> </ul> </div> ); } } // Example usage: <ShoppingList name="Beau" />
  • 7. Let’s go to the code!