Building a Speed Dating Chat Prototype using Agora and T3 Stack (Next, tRPC, Tailwind, Prisma)

Channel:
United States Web Dev Cody
Subscribers:
254,000
Published on ● Video Link: https://www.youtube.com/watch?v=qfxQKYHljoU


Duration: 3:16:04
10,709 views
362

Working on a speed dating prototype where users can join and get randomly connected to other users to talk for a set time.

This video was a paid promotional video for Agora.io.

Code: https://github.com/codyseibert/speed-dating
Agora: https://bit.ly/3xJkumJ

00:00 Introduction / Demo
04:41 Designing the App
13:01 Overview of T3 Stack
14:52 Project Setup
17:23 Building Join Page
27:43 validate form
32:09 Adding trpc mutation
47:29 Working on Waiting Page
1:00:08 Pairing Up Users
1:20:27 Display Webcams
2:10:47 Countdown Component
2:19:33 Change User Status
2:25:25 Like Dislike
2:58:47 Sync Countdown
3:11:45 Add Audio

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

🤑 Patreon https://www.patreon.com/webdevjunkie
🔔 Newsletter http://eepurl.com/hnderP
💬 Discord https://discord.gg/4kGbBaa
📁. GitHub https://github.com/codyseibert/youtube



Other Videos By Web Dev Cody


2022-09-30How to dynamically render html tag types in React
2022-09-29This is why accessibility is important in your web applications
2022-09-28Why recursion is critical when solving "medium" leet code interview problems
2022-09-27Why I'm removing Daisy UI from my side projects and some refactoring
2022-09-2750k Subscribers Live Stream! Working on a Classroom App | T3 Stack, Next, Tailwind, tRPC, Prisma
2022-09-26How to setup a CI/CD pipeline using Github Actions by running automated jest unit tests
2022-09-25Working on a Classroom App | T3 Stack, Next, Tailwind, tRPC, Prisma
2022-09-24Why BigInt is useful in solving "medium" LeetCode interview questions
2022-09-22Trying an "easy" Leet Code interview practice problem
2022-09-21refactoring my react code by making an empty state wrapper component
2022-09-20Building a Speed Dating Chat Prototype using Agora and T3 Stack (Next, tRPC, Tailwind, Prisma)
2022-09-19This is how I recommend you learn Recursion in Javascript
2022-09-18Working on a Classroom App | T3 Stack, Next, Tailwind, tRPC, Prisma
2022-09-17This is why queues are important to learn - solving a beginner javascript html css challenge
2022-09-16Live coding a Dropdown Component with React, Tailwind, and Typescript (Good Practice for Beginners)
2022-09-15This is why you need the key property in React
2022-09-14This is why wrapping third party libraries is important (mocking next-auth sessions locally)
2022-09-13This is how I write cleaner react code - live refactoring a subscribers react project
2022-09-13How to use Object.fromEntries to convert arrays to objects #shorts
2022-09-12Is lifting react state up our only option in react?
2022-09-12How to use regex to check if a javascript string contains a pattern #shorts


Tags:
web development
programming
coding
code
learn to code
tutorial
software engineering