PedroTech
PedroTech
  • 299
  • 19 779 500
Build A FullStack Live Audio Room App with ReactJS and NodeJS
Check Out Stream:
- To Create an account: getstream.io/try-for-free/?
- The Video SDK page: getstream.io/video/sdk/?
- An Audio Rooms tutorial for the SDK: getstream.io/video/sdk/react/tutorial/audio-room/?
Hey everyone! 👋 In today's video, we're diving into an exciting project: building a full-stack live audio room app using ReactJS for the front end and NodeJS for the back end. Whether you're a beginner or looking to sharpen your skills, this tutorial will guide you step-by-step through creating a real-time audio chat application. Get ready to code, and let's bring this awesome app to life together! 🚀🎧
Code: github.com/machadop1407/clubhouse-clone
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects
🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners
Socials
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin: www.linkedin.com/in/machadop1407/
Instagram: pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
TIMESTAMPS
00:00:00 | Intro
00:01:00 | Project Demo
00:06:18 | Creating an App with Stream
00:10:03 | Installing Packages
00:13:29 | Project Directory Organization
00:31:06 | Initializing the Backend
00:35:37 | Implementing the Server using ExpressJS
00:56:02 | Creating the Stream Video Client
00:59:21 | Creating the User Context
01:10:43 | Creating the Main Component
01:20:30 | Creating the Room Component
..........
♬ MUSIC ♬
Artist: tubebackr
Track: Chill With Me
@tubebackr
hypeddit.com/tubebackr/chillwithme-1
.............
#reactjs #fullstack
Переглядів: 8 794

Відео

Reviewing My Subscribers Software Engineering Resumes
Переглядів 1,9 тис.14 днів тому
🌟 Hostinger - hostinger.com/pedrotech Use the code PEDROTECH to save 10% on premium VPS shared hosting and get up to 91% off on all yearly hosting plans. Thank you for your resumes! 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linked...
Learn TypeScript For React in 50 Minutes - React TypeScript Beginner Crash Course
Переглядів 8 тис.21 день тому
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription. Welcome to our React TypeScript Crash Course! 🚀 In this quick and comprehensive tutorial, we'll cover everything you need to know to get started with TypeScript. Whether you're a JavaScript developer looking to enhance your skills or a complet...
Learn TypeScript in 50 Minutes - TypeScript Beginner Crash Course
Переглядів 12 тис.Місяць тому
Welcome to our TypeScript Crash Course! 🚀 In this quick and comprehensive tutorial, we'll cover everything you need to know to get started with TypeScript. Whether you're a JavaScript developer looking to enhance your skills or a complete beginner, this video will guide you through the essentials of TypeScript. Here's what you'll learn: 00:00 | Intro 00:16 | What is TypeScript? Why should you u...
Localization In React - Make Your Websites International | React Translations Tutorial (React-18n)
Переглядів 3,6 тис.Місяць тому
Welcome to your go-to tutorial on localizing React applications using React-i18next! 🌍🚀 Whether you're aiming to reach a global audience or just making your app accessible in multiple languages, this video has you covered. In this comprehensive guide, you'll learn: Why Localization Matters: Understand the importance of making your React applications multilingual and how it can significantly boo...
NestJS Tutorial For Beginners - Learn NestJS
Переглядів 6 тис.Місяць тому
🌟 Hostinger - hostinger.com/pedrotech Use the code PEDROTECH to save 10% on premium VPS shared hosting and get up to 91% off on all yearly hosting plans. Code: github.com/machadop1407/nestjs-tut 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedi...
React Interview Questions | Beginner to Advanced
Переглядів 14 тис.Місяць тому
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription. Hey everyone! 🚀 In today's video, I'm diving into my top 3 favorite React interview questions that I've come across. Whether you're prepping for an interview or just want to test your React knowledge, these questions are great for understandin...
MERN Finance Tracker App with User Management - Build A Fullstack React Intermediate Project
Переглядів 18 тис.Місяць тому
Check Out Clerk: go.clerk.com/kA4ki4w In this video I show how to build a fullstack MERN finance tracker using Clerk. Code: github.com/machadop1407/financial-tracker-react 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linkedin.com/in/...
React Like a Pro: React Best Practices
Переглядів 9 тис.2 місяці тому
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription. 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linkedin.com/in/machadop1407/ Inst...
What to Really Expect from React Code in Your Next Job: Legacy React
Переглядів 3,2 тис.2 місяці тому
Embarking on a new job in the tech industry, especially one that involves working with React, can be both exhilarating and daunting. With the landscape of React development constantly evolving, understanding what's expected of you in terms of coding practices, frameworks, and legacy code is crucial. In this essential guide, we dive deep into the heart of React development as it stands in the pr...
Chart JS Tutorial - ReactJS Charts Beginner Crash Course
Переглядів 18 тис.3 місяці тому
In this video I go over one of my favorite chart libraries in react, ChartJS. 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linkedin.com/in/machadop1407/ Instagram: pedro.fmachado_ Github: github.com/machadop1407 Busines...
Deploying A React App To Docker | Become A React Pro
Переглядів 10 тис.3 місяці тому
🌟 Hostinger - hostinger.com/pedrotech Use the code PEDROTECH to save 10% on premium VPS shared hosting and get up to 91% off on all yearly hosting plans. Join our Discord: discord.gg/WE92Cqs6Vk 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin...
Zustand Beginner Tutorial - Learn React State Management With Zustand
Переглядів 17 тис.3 місяці тому
In this video I will be teaching one of my favorite state management solutions in react, ZUSTAND!!! Join our Discord: discord.gg/WE92Cqs6Vk 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linkedin.com/in/machadop1407/ Instagram: instagr...
6 React Concepts That Will be Obsolete in 2024
Переглядів 7 тис.3 місяці тому
In this video I will go over some of the changes that are going to happen in React 19 by explaining what will become obsolete in the newer version. Join our Discord: discord.gg/WE92Cqs6Vk 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www....
React Query in 40 Minutes - Everything You Need to Know About Tanstack React Query
Переглядів 40 тис.4 місяці тому
Hey everyone, in this video I will be going over all of the topics I feel are really important to know when learning react query. Join our Discord: discord.gg/WE92Cqs6Vk 🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: machadopedro.com Linkedin: www.linkedin.com/in/ma...
REACT 19 IS COMING - Here's Whats Changing!
Переглядів 12 тис.4 місяці тому
REACT 19 IS COMING - Here's Whats Changing!
The Best React Helper Tool - React Dev Tools Tutorial
Переглядів 3,8 тис.4 місяці тому
The Best React Helper Tool - React Dev Tools Tutorial
Your FullStack App is NOT Safe, Here is How To Fix It
Переглядів 3,3 тис.5 місяців тому
Your FullStack App is NOT Safe, Here is How To Fix It
React Movie Rating App - Code and Deploy React Intermediate Project
Переглядів 25 тис.7 місяців тому
React Movie Rating App - Code and Deploy React Intermediate Project
MERN Ecommerce App With Authentication - Build A React Advanced Project
Переглядів 43 тис.8 місяців тому
MERN Ecommerce App With Authentication - Build A React Advanced Project
React Expense Tracker App - Build & Deploy A React Firebase Beginner Project
Переглядів 41 тис.9 місяців тому
React Expense Tracker App - Build & Deploy A React Firebase Beginner Project
Best NextJS Folder Structures | Beginner - Intermediate - Advanced
Переглядів 39 тис.11 місяців тому
Best NextJS Folder Structures | Beginner - Intermediate - Advanced
NextJS Beginner Project Tutorial - Learn NextJS 13 With This Easy Project
Переглядів 40 тис.11 місяців тому
NextJS Beginner Project Tutorial - Learn NextJS 13 With This Easy Project
How To Code in A Large Codebase
Переглядів 8 тис.11 місяців тому
How To Code in A Large Codebase
Prisma Vs. TypeORM Vs. Sequelize | Which is Better?
Переглядів 28 тис.Рік тому
Prisma Vs. TypeORM Vs. Sequelize | Which is Better?
Redux and NextJS 13 Tutorial | Redux Toolkit Tutorial With Next 13
Переглядів 77 тис.Рік тому
Redux and NextJS 13 Tutorial | Redux Toolkit Tutorial With Next 13
These 5 VsCode Extensions Will Skyrocket Your React Productivity
Переглядів 45 тис.Рік тому
These 5 VsCode Extensions Will Skyrocket Your React Productivity
All The JavaScript You Need To Know For React (More JS To Know)
Переглядів 59 тис.Рік тому
All The JavaScript You Need To Know For React (More JS To Know)
How To Deploy a NextJS App To Vercel (EASY AND QUICK!!!)
Переглядів 87 тис.Рік тому
How To Deploy a NextJS App To Vercel (EASY AND QUICK!!!)
NextJS 13 Tutorial - Routing, Data Fetching, Server Components...
Переглядів 84 тис.Рік тому
NextJS 13 Tutorial - Routing, Data Fetching, Server Components...

КОМЕНТАРІ

  • @wardahshahid2758
    @wardahshahid2758 14 годин тому

    What level of project is it? Entry, Beginer or.. I am on Entry level that's why i wanted to know

  • @itisme2022
    @itisme2022 16 годин тому

    you deserve bests mate , really helpful series

  • @moreinfobelow
    @moreinfobelow 17 годин тому

    Hi Pedro, the code for Episode 9 has been removed from the repo. Can you help? Does anyone have issues finding the code?

  • @GHCSMithunNS
    @GHCSMithunNS 19 годин тому

    your the fan of "Stranger Things"

  • @user-mq9dy2lj5u
    @user-mq9dy2lj5u 19 годин тому

    This dude is talking about using Typescript, because you should, yet he is using Redux for auth. How bad can you be? So elementary.

  • @dreamgoodgaming
    @dreamgoodgaming День тому

    What makes ls Vercel “not free”? Might need that next video to understand the custom URL 🎉

  • @waleedsharif618
    @waleedsharif618 День тому

    Could you make video where you teach “outlet” from react router dom ? Did not find any video about it

  • @manager-dd9li
    @manager-dd9li День тому

    how to host this on firebase hosting like what the change have to make can you make a video about like build something which has server and client and how can we host it on firebase .

  • @omkarutekar4795
    @omkarutekar4795 День тому

    Love from India <3

  • @ateeq800
    @ateeq800 2 дні тому

    where to make a good ats friendly resume?

  • @user-is8cm9qr9n
    @user-is8cm9qr9n 2 дні тому

    thank you

  • @aronhalaoui3188
    @aronhalaoui3188 2 дні тому

    I just get a blank page. here is my scripts: "scripts": { "dev": "vite", "predeploy": "npm run build", "deploy": "gh-pages -d dist", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, Seems fine to me, also my homepage is correctly set and i followed the rest of the steps 1 to 1. Someone mayb help?

  • @alii2284
    @alii2284 2 дні тому

    dude you didn't talk about the "common" folder

  • @JEETRICO
    @JEETRICO 2 дні тому

    i want this is an apk like can i get this as an apk??

  • @JEETRICO
    @JEETRICO 2 дні тому

    can i get that as an apk

  • @uafkhurram
    @uafkhurram 2 дні тому

    i'm big fan of you. You explain the things in simple thats why i like. so now please make some videos on the 1. How SEO is done in React app, 2. Optimization in React app. 3. React Debug tools

  • @JohnSmith-do4oe
    @JohnSmith-do4oe 3 дні тому

    small question, why did you use empty tags instead of div to wrap the components at 1:06:40?

  • @lopesleticiam
    @lopesleticiam 3 дні тому

    Exactly what I was looking for! Thanks 🎆

  • @bully9858
    @bully9858 3 дні тому

    42:31 Bro really is sick 🥵🥵🥶 and so is the tutorial

  • @andrewandrosow4797
    @andrewandrosow4797 3 дні тому

    Good video! But where is explanation about a calback function? I mean a parameter of the setter function: for example - setSomeValue(x=>x+1).

  • @KC-hl4oj
    @KC-hl4oj 3 дні тому

    Really great tutorial - thanks soooooo very much!

  • @krishanthadharmasiri7725
    @krishanthadharmasiri7725 3 дні тому

    Pedro my man, thanks so much

  • @user-xj5lq2ox3l
    @user-xj5lq2ox3l 3 дні тому

    It was really helpful, Appreciate your efforts 👏

  • @BillyRyan123
    @BillyRyan123 4 дні тому

    Hey Pedro ! I love your react course and I must say this is the best tutorial with simple explanations and easy to follow - along coding video . However, I'd like you to slow down the pace at which you speak when you are explaining stuff as this would be difficult for people who are not fluent or native English speakers to follow. Sometimes I have to playback like 6 or 7 times before I could understand a word Thanks!

  • @nourkaoubi3917
    @nourkaoubi3917 4 дні тому

    Pedro, Pedro, Pedro, Pe'

  • @aleksandarbursac4274
    @aleksandarbursac4274 4 дні тому

    [nodemon] app crashed - waiting for file changes before starting... I was fix this error after few minutes. Your password in sql workbench and config.json file must be same. In my case it was problem. Sooo, I hope this will help to you guys! Keep coding!!

  • @snowqueen2965
    @snowqueen2965 4 дні тому

    In the module 7, after updating the username in profile it's not updating in home.. What to do?.. Pls tell me

  • @AsishSharma-gi8tb
    @AsishSharma-gi8tb 4 дні тому

    Can you please provide us the GitHub repo ?

  • @FarhanAlly
    @FarhanAlly 4 дні тому

    hey pedro i just wanted to ask a quick question please if u dont mind replying to me back... i am currently learning react secifically the topic of authentication and autherization. so my question as someone who has no background to server side programming how do i have to tackle when it comes server since i can not program for my own

  • @Antebios
    @Antebios 4 дні тому

    Drizzle has entered the chat!!!

  • @aaadesh
    @aaadesh 4 дні тому

    Typescript Zero to Hero, detailed course material. ❤

  • @TheRyanMajd
    @TheRyanMajd 5 днів тому

    Will this work with NextJS 14 applications? Also what if our apps have a backend?

  • @shuvambhowmick7674
    @shuvambhowmick7674 5 днів тому

    if ur getting access denied , make sure database password for schema entry matches your connfig.json password

  • @hl6903
    @hl6903 5 днів тому

    file extension is js or jsx ?

  • @sreerup_dhrino
    @sreerup_dhrino 5 днів тому

    As of today working with react-query v5 I noticed two changes - 1. If you are importing & calling a function from another file in queryFn it has to be written in a arrow function like queryFn: () => getData() 2. Fetch request is getting called on browser tab change even without mentioning staleTime, and to stop it you need to explicitly mention refetchOnWindowFocus: false Please let me know if others are also facing the same.

  • @uktech9432
    @uktech9432 5 днів тому

    Honestly it was very well explained ❤.

  • @WebSypder
    @WebSypder 5 днів тому

    These concepts hardly take 3 minutes to teach, and the rest of 15 minutes could have been saved.

  • @GB-vz8pk
    @GB-vz8pk 5 днів тому

    amazing video!!!

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 5 днів тому

    Thank you so much

  • @moreinfobelow
    @moreinfobelow 5 днів тому

    If anyone could answer this question that would cure my insatiable thirst! in Ln13 - const User = (props) => { ... I was wondering why the object is renamed, or at least that's what Im understanding this line of code to be. Because, User.name still allows access to the same value, it seems unnecessary to rename the object right now. Im just starting out on React and js, let me know if this is just semantic code.

  • @lostinthenarrativve
    @lostinthenarrativve 6 днів тому

    Hey, can you do a Stripe tutorial ?

  • @gersontamele9554
    @gersontamele9554 6 днів тому

    Best chef in the react Kitchen

  • @gatts6727
    @gatts6727 6 днів тому

    Tks!

  • @gurjotsingh3026
    @gurjotsingh3026 6 днів тому

    Awesome tutorial!

  • @ovocado9965
    @ovocado9965 6 днів тому

    When type is obvious please don't use definitions. It's a TypeScript rule. The same with string etc. let id: number = 5; is wrong.

  • @frozenplay1417
    @frozenplay1417 6 днів тому

    THANK YOU VERY MATCH❤❤❤❤❤❤❤❤❤❤❤❤❤

  • @ceydaaleynaaltun5860
    @ceydaaleynaaltun5860 6 днів тому

    great content, thank you

  • @lostinthenarrativve
    @lostinthenarrativve 7 днів тому

    Hey man, can you do a Stripe tutorial ?

  • @TAISP2023
    @TAISP2023 7 днів тому

    What if I don’t have education? It’s over? Freelancing can be counted as experience? Considering I would be applying for an internship

  • @Spmdiamond
    @Spmdiamond 7 днів тому

    Thank you well explained ❤❤