1. The document discusses building a chatroom web application using React and Firebase. It explains using the create-react-app command to initialize a React project called chatroom, then installing the Firebase package. 2. Details are provided about client-server architecture and the roles of frontend and backend development. The technologies that will be used are listed as React, HTML, and Firebase for the frontend and backend. 3. Instructions are given to run the React development server after creating the project and installing Firebase to begin building the chatroom application.

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

10. Finished Product:
https://drive.google.com/file/d/1-mY149ToL1FcmFckNtOL3tt6RXVp3
RYV/view?usp=sharing