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