SlideShare a Scribd company logo
Before we start...
This little thing takes a while
1. In your favorite directory, run the following
command in the terminal:
npx create-react-app chatroom
2. Change directory into the chatroom/ folder, and
run the following command
npm install --save firebase
Build A Chatroom!
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club
create-react-app
The hell is that?
Toolchain: developer environment
Others include: Next.js
Gatsby
Parcel
Web Application Details
How do they work?
Client-Server Model
The client is what runs on the user's
device, and the server is what
“serves” the client
Web-Dev Overview
What development is involved in a web application project?
Frontend development involves working with mainly HTML and CSS
Backend development involves working with databases and algorithms
Web-Dev Overview
What hat are we putting on today?
Full stack developers do bits of both
backend and frontend using technologies in
the tech stack of the web project
Tech Stack
What are the technologies we are going to use?
OS: All
Front End: React, HTML
Back End: Google Firebase
Hosting: Google Firebase
Let’s Build Something!
Online Chat Room
❏ In your favorite directory, run the following command in the terminal:
npx create-react-app chatroom
❏ Change directory into the chatroom/ folder, and run the following command:
npm install --save firebase
❏ Wait for it to install, then run:
npm start
Now I should share
my screen...
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club
Finished Product:
https://drive.google.com/file/d/1-mY149ToL1FcmFckNtOL3tt6RXVp3
RYV/view?usp=sharing

More Related Content

What's hot

How to rewrite the OS using C by strong type
How to rewrite the OS using C by strong typeHow to rewrite the OS using C by strong type
How to rewrite the OS using C by strong type
Kiwamu Okabe
 
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
Artur Trzop
 
Testing of React JS app
Testing of React JS appTesting of React JS app
Testing of React JS app
Aleks Zinevych
 
Understanding Non Blocking I/O with Python
Understanding Non Blocking I/O with PythonUnderstanding Non Blocking I/O with Python
Understanding Non Blocking I/O with Python
Vaidik Kapoor
 
Simulation in R and Python
Simulation in R and PythonSimulation in R and Python
Simulation in R and Python
Shunichi Otsuka
 
Managing Modules Without Going Crazy (NPW 2007)
Managing Modules Without Going Crazy (NPW 2007)Managing Modules Without Going Crazy (NPW 2007)
Managing Modules Without Going Crazy (NPW 2007)
brian d foy
 
Designing a Docker Stack for Symfony apps: lessons learned
Designing a Docker Stack  for Symfony apps: lessons learnedDesigning a Docker Stack  for Symfony apps: lessons learned
Designing a Docker Stack for Symfony apps: lessons learned
Gaetano Giunta
 
Symfony vs. Message Brokers
Symfony  vs.  Message BrokersSymfony  vs.  Message Brokers
Symfony vs. Message Brokers
Gaetano Giunta
 
Python debuggers slides
Python debuggers slidesPython debuggers slides
Python debuggers slides
mattboehm
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
Kyle Simpson
 
Fast end-to-end-tests
Fast end-to-end-testsFast end-to-end-tests
Fast end-to-end-tests
Rikke Veng Petersen
 
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
OdessaJS Conf
 
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / MedioDesarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
Carlos Buenosvinos
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
Red Pill Now
 
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Pôle Systematic Paris-Region
 
open source product management (feat. npm)
open source product management (feat. npm)open source product management (feat. npm)
open source product management (feat. npm)
Forrest Norvell
 
Madison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small TeamsMadison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small Teams
Joe Ferguson
 
Docker, developers take power
Docker, developers take powerDocker, developers take power
Docker, developers take power
Enalean
 
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
Alin Pandichi
 
From Python to smartphones: neural nets @ Saint-Gobain, François Sausset
From Python to smartphones: neural nets @ Saint-Gobain, François SaussetFrom Python to smartphones: neural nets @ Saint-Gobain, François Sausset
From Python to smartphones: neural nets @ Saint-Gobain, François Sausset
Pôle Systematic Paris-Region
 

What's hot (20)

How to rewrite the OS using C by strong type
How to rewrite the OS using C by strong typeHow to rewrite the OS using C by strong type
How to rewrite the OS using C by strong type
 
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
Distributed locks in Ruby - Correctness vs Efficiency - Knapsack Pro case stu...
 
Testing of React JS app
Testing of React JS appTesting of React JS app
Testing of React JS app
 
Understanding Non Blocking I/O with Python
Understanding Non Blocking I/O with PythonUnderstanding Non Blocking I/O with Python
Understanding Non Blocking I/O with Python
 
Simulation in R and Python
Simulation in R and PythonSimulation in R and Python
Simulation in R and Python
 
Managing Modules Without Going Crazy (NPW 2007)
Managing Modules Without Going Crazy (NPW 2007)Managing Modules Without Going Crazy (NPW 2007)
Managing Modules Without Going Crazy (NPW 2007)
 
Designing a Docker Stack for Symfony apps: lessons learned
Designing a Docker Stack  for Symfony apps: lessons learnedDesigning a Docker Stack  for Symfony apps: lessons learned
Designing a Docker Stack for Symfony apps: lessons learned
 
Symfony vs. Message Brokers
Symfony  vs.  Message BrokersSymfony  vs.  Message Brokers
Symfony vs. Message Brokers
 
Python debuggers slides
Python debuggers slidesPython debuggers slides
Python debuggers slides
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
 
Fast end-to-end-tests
Fast end-to-end-testsFast end-to-end-tests
Fast end-to-end-tests
 
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...
 
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / MedioDesarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
Desarrollo Profesional con PHP 2014/15 - Nivel Bajo / Medio
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
 
Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...Designing and coding for cloud-native applications using Python, Harjinder Mi...
Designing and coding for cloud-native applications using Python, Harjinder Mi...
 
open source product management (feat. npm)
open source product management (feat. npm)open source product management (feat. npm)
open source product management (feat. npm)
 
Madison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small TeamsMadison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small Teams
 
Docker, developers take power
Docker, developers take powerDocker, developers take power
Docker, developers take power
 
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
 
From Python to smartphones: neural nets @ Saint-Gobain, François Sausset
From Python to smartphones: neural nets @ Saint-Gobain, François SaussetFrom Python to smartphones: neural nets @ Saint-Gobain, François Sausset
From Python to smartphones: neural nets @ Saint-Gobain, François Sausset
 

Similar to Build a chatroom!

How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
Concetto Labs
 
Sustainability and bit-rot
Sustainability and bit-rotSustainability and bit-rot
Sustainability and bit-rot
Kiran Jonnalagadda
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
LINAGORA
 
Introjs10.5.17SD
Introjs10.5.17SDIntrojs10.5.17SD
Introjs10.5.17SD
Thinkful
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
Thomas Daly
 
TiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium ApplicationsTiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium Applications
Jamil Spain
 
Documenting apps ti confnyc
Documenting apps   ti confnycDocumenting apps   ti confnyc
Documenting apps ti confnyc
Jamil Spain
 
N-Tier Application with Windows Forms - Deployment and Security
N-Tier Application with Windows Forms - Deployment and SecurityN-Tier Application with Windows Forms - Deployment and Security
N-Tier Application with Windows Forms - Deployment and Security
Peter Gfader
 
Massively Scaled High Performance Web Services with PHP
Massively Scaled High Performance Web Services with PHPMassively Scaled High Performance Web Services with PHP
Massively Scaled High Performance Web Services with PHP
Demin Yin
 
Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)
GameWisp
 
System design for Web Application
System design for Web ApplicationSystem design for Web Application
System design for Web Application
Michael Choi
 
How to make a Personal Single Page Application with Cozy
How to make a Personal Single Page Application with CozyHow to make a Personal Single Page Application with Cozy
How to make a Personal Single Page Application with Cozy
Frank Rousseau
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
Khaled Mosharraf
 
Real time web
Real time webReal time web
Real time web
Medhat Dawoud
 
Devry gsp 215 week 7 i lab networking and a tiny web server new
Devry gsp 215 week 7 i lab networking and a tiny web server newDevry gsp 215 week 7 i lab networking and a tiny web server new
Devry gsp 215 week 7 i lab networking and a tiny web server new
williamethan912
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
Chris Mitchell
 
NEXT.JS
NEXT.JSNEXT.JS
Why we choose Symfony2
Why we choose Symfony2Why we choose Symfony2
Why we choose Symfony2
Merixstudio
 

Similar to Build a chatroom! (20)

How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
Sustainability and bit-rot
Sustainability and bit-rotSustainability and bit-rot
Sustainability and bit-rot
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
 
Introjs10.5.17SD
Introjs10.5.17SDIntrojs10.5.17SD
Introjs10.5.17SD
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
 
TiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium ApplicationsTiConf NYC - Documenting Your Titanium Applications
TiConf NYC - Documenting Your Titanium Applications
 
Documenting apps ti confnyc
Documenting apps   ti confnycDocumenting apps   ti confnyc
Documenting apps ti confnyc
 
N-Tier Application with Windows Forms - Deployment and Security
N-Tier Application with Windows Forms - Deployment and SecurityN-Tier Application with Windows Forms - Deployment and Security
N-Tier Application with Windows Forms - Deployment and Security
 
Massively Scaled High Performance Web Services with PHP
Massively Scaled High Performance Web Services with PHPMassively Scaled High Performance Web Services with PHP
Massively Scaled High Performance Web Services with PHP
 
Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)
 
System design for Web Application
System design for Web ApplicationSystem design for Web Application
System design for Web Application
 
How to make a Personal Single Page Application with Cozy
How to make a Personal Single Page Application with CozyHow to make a Personal Single Page Application with Cozy
How to make a Personal Single Page Application with Cozy
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Real time web
Real time webReal time web
Real time web
 
Devry gsp 215 week 7 i lab networking and a tiny web server new
Devry gsp 215 week 7 i lab networking and a tiny web server newDevry gsp 215 week 7 i lab networking and a tiny web server new
Devry gsp 215 week 7 i lab networking and a tiny web server new
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
Why we choose Symfony2
Why we choose Symfony2Why we choose Symfony2
Why we choose Symfony2
 

Recently uploaded

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
ThomasParaiso2
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 

Recently uploaded (20)

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 

Build a chatroom!

  • 1. Before we start... This little thing takes a while 1. In your favorite directory, run the following command in the terminal: npx create-react-app chatroom 2. Change directory into the chatroom/ folder, and run the following command npm install --save firebase
  • 2. Build A Chatroom! Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club
  • 3. create-react-app The hell is that? Toolchain: developer environment Others include: Next.js Gatsby Parcel
  • 4. Web Application Details How do they work? Client-Server Model The client is what runs on the user's device, and the server is what “serves” the client
  • 5. Web-Dev Overview What development is involved in a web application project? Frontend development involves working with mainly HTML and CSS Backend development involves working with databases and algorithms
  • 6. Web-Dev Overview What hat are we putting on today? Full stack developers do bits of both backend and frontend using technologies in the tech stack of the web project
  • 7. Tech Stack What are the technologies we are going to use? OS: All Front End: React, HTML Back End: Google Firebase Hosting: Google Firebase
  • 8. Let’s Build Something! Online Chat Room ❏ In your favorite directory, run the following command in the terminal: npx create-react-app chatroom ❏ Change directory into the chatroom/ folder, and run the following command: npm install --save firebase ❏ Wait for it to install, then run: npm start
  • 9. Now I should share my screen... Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club