Make A Font Changing App | WebSockets, React Hooks, ExpressJS

Make A Font Changing App Using WebSockets, React Hooks, ExpressJS.
Whats up y'all in this video I will walk through the process of using websockets with express and React Hooks. It is a bit of a challenging concept to warp your head around and I will do my best to show you how to do it :)

Github Link: https://github.com/arslanah99/Font-Change-App

Links to Docs:
https://react-bootstrap.github.io/getting-started/introduction
https://expressjs.com/
https://www.npmjs.com/package/socket.io-client (CLIENT)
https://www.npmjs.com/package/socket.io (SERVER)

Step 1: Create a react app and install all dependencies required
npm install react-bootstrap bootstrap socket.io socket.io-client express
Step 2: Import all css required from react bootstrap
App.js
import 'bootstrap/dist/css/bootstrap.min.css';
Index.html
link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"

Step 3: Import react bootStrap and land socket io client

Step 4: create two use states one for the font and one for the server and set end point to endpoint for your server

Step 5: Create a function to send data to the server lets make a variable called socket that uses socketio with the parameter of endpoint and we are going to use emit to send data to the server

Step 6: Create a function that will take the font usestate and set the font to what ever font button we click

Step 7: Create a websocket server

Step 8: create a useeffect that will receive the font information from the client and change the font of our sentance

Step 9: Apply change font button to all fonts you want to use to buttons

Step 10: create a button to send the data to the server

Step 11: This is on your own opinion but add some css to make the app look better. This is my CSS
#fontChangeButton {
display: flex;
flex-direction: row;
justify-content: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}

#finalResult {
font-size: 25px;
}


Please don't forget Like, Comment and Subscribe if you're new! Support the channel ?: https://www.paypal.com/donate/?business=928HZ66A6T728