boarzVideosClipsStatistics

#️⃣EP 120 - Special Guest - Torey Littlefield Pt.2

🎦
📅 2021-11-30 (555 days ago)
⌛ 1:12:15
ZainboarToreyboar
AllClipsEpisodesHas Blog PostZainThaneshKartikTorey
001
Build Break and Code
📅 2021-07-14 
(694 days ago)
⌛ 0:58:43
ZainboarKartikboar
002
Build, Break & Fix
📅 2021-07-15 
(693 days ago)
⌛ 0:53:45
ZainboarKartikboar
🎬
Krunchmaster Kartik
Build, Break & Fix
ZainboarKartikboar
003
Build, Break & Fix
📅 2021-07-16 
(692 days ago)
⌛ 1:09:05
ZainboarKartikboar
004
Special Edition: We don't stop until we get our code working
📅 2021-07-16 
(691 days ago)
⌛ 2:27:06
ZainboarKartikboar
🎬
Killing it
Special Edition: We don't stop until we get our code working
ZainboarKartikboar
005
Build,Break & Fix // Weekend two hour special
📅 2021-07-17 
(690 days ago)
⌛ 2:00:31
ZainboarKartikboar
🎬
Schooling in brown countries
Build,Break & Fix // Weekend two hour special
ZainboarKartikboar
🎬
Unprofessional Kartik
Build,Break & Fix // Weekend two hour special
ZainboarKartikboar
006
Build, Break & Fix
📅 2021-07-19 
(689 days ago)
⌛ 1:03:20
ZainboarKartikboar
007
Build, Break & Fix
📅 2021-07-20 
(688 days ago)
⌛ 1:04:37
ZainboarKartikboar
008
Build, Break & Fix
📅 2021-07-21 
(687 days ago)
⌛ 1:00:37
ZainboarKartikboar
009
Build, Break & Fix
📅 2021-07-22 
(686 days ago)
⌛ 1:17:02
ZainboarKartikboar
010
Build, Break & Fix
📅 2021-07-23 
(685 days ago)
⌛ 1:04:59
ZainboarKartikboar
011
Build, Break & Fix
📅 2021-07-23 
(684 days ago)
⌛ 1:48:16
ZainboarKartikboar
012
Build, Break & Fix
📅 2021-07-24 
(683 days ago)
⌛ 2:05:28
ZainboarKartikboar
013
Build, Break & Code //First Special Guest Appearance
📅 2021-07-26 
(682 days ago)
⌛ 1:09:09
ZainboarKartikboar
014
Build, Break & Fix
📅 2021-07-27 
(681 days ago)
⌛ 1:05:37
ZainboarKartikboar
015
Build, Break & Fix // Setting a blog using Hugo and AWS Amplify
📅 2021-07-28 
(680 days ago)
⌛ 1:07:46
ZainboarKartikboar
🎬
Brain Refresh
Build, Break & Fix // Setting a blog using Hugo and AWS Amplify
ZainboarKartikboar
016
Build, Break & Fix // Working on FETCH APIs
📅 2021-07-29 
(679 days ago)
⌛ 1:03:57
ZainboarKartikboar
017
Build, Break & Fix // Working on FETCH APIs
📅 2021-07-30 
(678 days ago)
⌛ 1:06:45
ZainboarKartikboar
018
Build, Break & Fix // creating get methods with FETCH API
📅 2021-07-30 
(677 days ago)
⌛ 2:00:16
ZainboarKartikboar
019
Build, Break & Fix // BLOG REVEAL!! &Fixing our broken Hugo blog
📅 2021-07-31 
(676 days ago)
⌛ 2:03:11
📰
ZainboarKartikboar
020
Build, Break & Fix // Fixing the uncaught exception error in FETCH APIs
📅 2021-08-02 
(675 days ago)
⌛ 1:02:04
ZainboarKartikboar
021
Build, Break & Fix // Trying different things to resolve the error
📅 2021-08-03 
(674 days ago)
⌛ 1:04:49
📰
ZainboarKartikboar
022
Build, Break & Fix // Special Guest announcement for tomorrow!
📅 2021-08-04 
(673 days ago)
⌛ 1:03:15
📰
ZainboarKartikboar
023
Special Episode : Talking to a Principal Developer at Seek
📅 2021-08-05 
(672 days ago)
⌛ 1:04:56
📰
ZainboarKartikboar
024
Build, Break & Fix // Working out Software design
📅 2021-08-06 
(671 days ago)
⌛ 1:08:19
📰
ZainboarKartikboar
🎬
Finger driven architecture
Build, Break & Fix // Working out Software design
ZainboarKartikboar
🎬
Fast food driven architecture
Build, Break & Fix // Working out Software design
ZainboarKartikboar
025
Build, Break & Fix
📅 2021-08-06 
(670 days ago)
⌛ 2:01:05
📰
ZainboarKartikboar
🎬
Can't be ashamed if there's never a first version
Build, Break & Fix
ZainboarKartikboar
🎬
Not a uni student
Build, Break & Fix
ZainboarKartikboar
026
Weekend Special 1.5 hours
📅 2021-08-08 
(669 days ago)
⌛ 1:35:49
📰
Zainboar
027
30 mins of deployment 😠 || 30 mins of coding 🥲
📅 2021-08-09 
(668 days ago)
⌛ 1:07:48
📰
ZainboarKartikboar
🎬
Can't work, deploying
30 mins of deployment 😠 || 30 mins of coding 🥲
ZainboarKartikboar
028
Today's Broadcast
📅 2021-08-10 
(667 days ago)
⌛ 1:18:59
📰
ZainboarKartikboar
🎬
Two points of contact
Today's Broadcast
ZainboarKartikboar
🎬
CORS exclusive lovin'
Today's Broadcast
ZainboarKartikboar
029
Build Break Fix
📅 2021-08-11 
(666 days ago)
⌛ 1:01:46
📰
ZainboarKartikboar
030
Today's Stream
📅 2021-08-12 
(665 days ago)
⌛ 1:09:24
📰
ZainboarKartikboar
🎬
Sensible policy
Today's Stream
ZainboarKartikboar
🎬
Shoes in mouth
Today's Stream
ZainboarKartikboar
031
Buidl Break Fix
📅 2021-08-13 
(664 days ago)
⌛ 1:05:05
📰
ZainboarKartikboar
🎬
The code always wins
Buidl Break Fix
ZainboarKartikboar
🎬
Chicken curry in the brown way
Buidl Break Fix
ZainboarKartikboar
032
Today's Broadcast
📅 2021-08-14 
(663 days ago)
⌛ 1:20:18
📰
ZainboarKartikboar
033
Build - Break - Fix
📅 2021-08-15 
(662 days ago)
⌛ 1:34:03
📰
ZainboarKartikboar
034
Build Break Fix
📅 2021-08-16 
(661 days ago)
⌛ 1:18:19
📰
ZainboarKartikboar
🎬
Finger memory practice
Build Break Fix
ZainboarKartikboar
🎬
See you later Kartik
Build Break Fix
ZainboarKartikboar
035
Today's Broadcast
📅 2021-08-17 
(660 days ago)
⌛ 1:04:07
📰
ZainboarKartikboar
🎬
Keep your code looking sexy
Today's Broadcast
ZainboarKartikboar
🎬
Echo chamber Zain
Today's Broadcast
ZainboarKartikboar
🎬
And Kartik never got a job again...
Today's Broadcast
ZainboarKartikboar
036
Build, Break, Fix
📅 2021-08-18 
(659 days ago)
⌛ 1:03:21
📰
ZainboarKartikboar
037
Special Guest - Sam Nolan
📅 2021-08-19 
(658 days ago)
⌛ 1:05:19
📰
ZainboarKartikboar
038
Today's Broadcast
📅 2021-08-20 
(657 days ago)
⌛ 1:01:55
📰
ZainboarKartikboar
039
Today's Broascast
📅 2021-08-21 
(656 days ago)
⌛ 1:33:11
📰
ZainboarKartikboar
🎬
Pilot? What even iz dat kind of fing
Today's Broascast
ZainboarKartikboar
040
Build - Break - Fix
📅 2021-08-22 
(655 days ago)
⌛ 1:33:18
📰
ZainboarKartikboar
🎬
Fish and Chips
Build - Break - Fix
ZainboarKartikboar
🎬
Backup career
Build - Break - Fix
ZainboarKartikboar
041
Build Break Fix
📅 2021-08-23 
(654 days ago)
⌛ 0:57:11
📰
Zainboar
042
Today's Broadcast
📅 2021-08-24 
(653 days ago)
⌛ 1:06:08
📰
ZainboarKartikboar
🎬
Professional background? Wat even iz dat?
Today's Broadcast
ZainboarKartikboar
🎬
Private mentorship group
Today's Broadcast
ZainboarKartikboar
043
Today's Stream
📅 2021-08-25 
(652 days ago)
⌛ 1:13:08
📰
ZainboarKartikboar
🎬
Actually good job advice from Zain
Today's Stream
ZainboarKartikboar
044
Today's Stream
📅 2021-08-26 
(651 days ago)
⌛ 0:49:48
📰
ZainboarKartikboar
🎬
What a classic!
Today's Stream
ZainboarKartikboar
🎬
Uber driver in training
Today's Stream
ZainboarKartikboar
045
Today's Stream
📅 2021-08-27 
(650 days ago)
⌛ 1:08:21
📰
ZainboarKartikboar
046
Weekend Special
📅 2021-08-28 
(649 days ago)
⌛ 1:32:51
ZainboarKartikboar
047
Weekend Special
📅 2021-08-29 
(648 days ago)
⌛ 1:01:39
Zainboar
048
Today's Broadcast
📅 2021-08-30 
(647 days ago)
⌛ 1:17:19
ZainboarKartikboar
049
Today's Broadcast
📅 2021-08-31 
(646 days ago)
⌛ 1:00:16
ZainboarKartikboar
🎬
Viewer burn
Today's Broadcast
ZainboarKartikboar
050
CELEBRATION: 50th Episode
📅 2021-09-01 
(645 days ago)
⌛ 1:01:53
ZainboarKartikboar
051
Today's Broadcast
📅 2021-09-02 
(644 days ago)
⌛ 1:05:39
ZainboarKartikboar
🎬
Time for a nap
Today's Broadcast
ZainboarKartikboar
🎬
A sniffer of a line
Today's Broadcast
ZainboarKartikboar
🎬
Slow Zain
Today's Broadcast
ZainboarKartikboar
052
Today's Broadcast
📅 2021-09-03 
(643 days ago)
⌛ 1:12:47
ZainboarKartikboar
🎬
No single point of failure
Today's Broadcast
ZainboarKartikboar
🎬
Gambling on bad logic
Today's Broadcast
ZainboarKartikboar
🎬
Estimated Time of New-Careers
Today's Broadcast
ZainboarKartikboar
🎬
Fake Nod
Today's Broadcast
ZainboarKartikboar
053
NEW SETUP!!
📅 2021-09-04 
(642 days ago)
⌛ 1:04:04
ZainboarKartikboar
🎬
Investing in 'the brand'
NEW SETUP!!
ZainboarKartikboar
🎬
Hitting a brick
NEW SETUP!!
ZainboarKartikboar
🎬
Master of the green screen
NEW SETUP!!
ZainboarKartikboar
🎬
Logiclesstech
NEW SETUP!!
ZainboarKartikboar
054
Weekend Special
📅 2021-09-05 
(641 days ago)
⌛ 1:41:54
ZainboarKartikboar
055
Today's Stream
📅 2021-09-06 
(640 days ago)
⌛ 1:20:05
ZainboarKartikboar
🎬
Get him to the greenscreen
Today's Stream
ZainboarKartikboar
🎬
Change the digit to a number
Today's Stream
ZainboarKartikboar
056
Today's Broadcast
📅 2021-09-07 
(639 days ago)
⌛ 1:25:44
ZainboarKartikboar
🎬
The benefits of pair programming
Today's Broadcast
ZainboarKartikboar
057
Today's Stream
📅 2021-09-08 
(638 days ago)
⌛ 1:00:33
ZainboarKartikboar
🎬
Xs, the healthy choice
Today's Stream
ZainboarKartikboar
🎬
Xs vs mother
Today's Stream
ZainboarKartikboar
058
Today's Stream
📅 2021-09-09 
(637 days ago)
⌛ 1:13:08
ZainboarKartikboar
🎬
The beginning of the end of productivity
Today's Stream
ZainboarKartikboar
🎬
Unprofessional Zain
Today's Stream
ZainboarKartikboar
🎬
Blazing fast
Today's Stream
ZainboarKartikboar
🎬
Premature celebratory dance
Today's Stream
ZainboarKartikboar
🎬
Timeline slippage
Today's Stream
ZainboarKartikboar
🎬
Speed coding
Today's Stream
ZainboarKartikboar
059
Today's Broadcast
📅 2021-09-10 
(636 days ago)
⌛ 1:50:40
ZainboarKartikboar
🎬
Sorry I dont know that voice
Today's Broadcast
ZainboarKartikboar
🎬
Definition of done
Today's Broadcast
ZainboarKartikboar
🎬
Amway bites
Today's Broadcast
ZainboarKartikboar
🎬
A cool stream
Today's Broadcast
ZainboarKartikboar
🎬
Spooky Kartik
Today's Broadcast
ZainboarKartikboar
060
Today's Stream
📅 2021-09-12 
(634 days ago)
⌛ 1:02:36
ZainboarKartikboar
061
Today's Stream
📅 2021-09-13 
(633 days ago)
⌛ 1:00:40
ZainboarKartikboar
🎬
Water physics 101
Today's Stream
ZainboarKartikboar
🎬
Scrum master Zain
Today's Stream
ZainboarKartikboar
🎬
Zain applying his scrum master skills
Today's Stream
ZainboarKartikboar
062
Today's Stream
📅 2021-09-14 
(632 days ago)
⌛ 1:11:29
ZainboarKartikboar
063
Today's Stream
📅 2021-09-15 
(631 days ago)
⌛ 1:07:00
ZainboarKartikboar
🎬
Zain the blunderer
Today's Stream
ZainboarKartikboar
🎬
Healthier than other traditional drinks
Today's Stream
ZainboarKartikboar
🎬
Real headscratcha
Today's Stream
ZainboarKartikboar
🎬
Bracket blues
Today's Stream
ZainboarKartikboar
🎬
If statements are not good practice
Today's Stream
ZainboarKartikboar
🎬
Kappa Quality Code
Today's Stream
ZainboarKartikboar
🎬
Exciting switch statements
Today's Stream
ZainboarKartikboar
064
Today's Broadcast
📅 2021-09-16 
(630 days ago)
⌛ 1:20:45
📰
ZainboarKartikboar
🎬
Switched-on hat
Today's Broadcast
ZainboarKartikboar
065
test
📅 2021-09-16 
(629 days ago)
⌛ 2:03:01
📰
ZainboarKartikboar
🎬
Setting up a suppository in Diagon Alley
test
ZainboarKartikboar
🎬
Background Diagon Alley
test
ZainboarKartikboar
🎬
RAWR coders
test
ZainboarKartikboar
066
Today's Broadcast
📅 2021-09-19 
(627 days ago)
⌛ 1:46:13
📰
ZainboarKartikboar
067
Today's Stream
📅 2021-09-20 
(626 days ago)
⌛ 1:03:46
📰
ZainboarKartikboarToreyboar
🎬
What is a sea cable?
Today's Stream
ZainboarKartikboarToreyboar
068
Today's Stream
📅 2021-09-21 
(625 days ago)
⌛ 1:09:13
📰
ZainboarKartikboarToreyboar
069
Today's Broadcast
📅 2021-09-22 
(624 days ago)
⌛ 1:03:51
📰
ZainboarKartikboar
070
Today's Stream
📅 2021-09-23 
(623 days ago)
⌛ 1:59:01
📰
ZainboarKartikboar
071
Today's Stream
📅 2021-09-24 
(622 days ago)
⌛ 0:28:57
📰
ZainboarKartikboar
072
Today's Stream
📅 2021-09-24 
(622 days ago)
⌛ 0:39:33
📰
ZainboarKartikboar
073
Today's Stream
📅 2021-09-26 
(620 days ago)
⌛ 1:21:14
📰
Zainboar
074
Today's Stream
📅 2021-09-27 
(619 days ago)
⌛ 1:03:40
📰
ZainboarKartikboar
075
Today's Stream
📅 2021-09-28 
(618 days ago)
⌛ 1:04:05
📰
ZainboarKartikboar
076
Today's Broadcast
📅 2021-09-29 
(617 days ago)
⌛ 0:58:07
📰
ZainboarKartikboar
077
Today' Broadcast
📅 2021-09-30 
(616 days ago)
⌛ 1:13:14
📰
ZainboarKartikboar
078
Today's Broadcast
📅 2021-10-01 
(615 days ago)
⌛ 1:23:11
📰
ZainboarKartikboar
🎬
If statements are bad practice
Today's Broadcast
ZainboarKartikboar
🎬
Tomato fan
Today's Broadcast
ZainboarKartikboar
079
Today's Stream
📅 2021-10-03 
(613 days ago)
⌛ 1:14:52
📰
ZainboarKartikboar
080
Today's Stream
📅 2021-10-04 
(612 days ago)
⌛ 1:05:10
📰
ZainboarKartikboar
081
Today's Stream
📅 2021-10-05 
(611 days ago)
⌛ 1:01:05
📰
Zainboar
082
Today's Stream
📅 2021-10-06 
(610 days ago)
⌛ 0:54:10
📰
ZainboarKartikboar
083
Today's Stream
📅 2021-10-07 
(609 days ago)
⌛ 1:15:04
📰
ZainboarKartikboar
🎬
Strong intro
Today's Stream
ZainboarKartikboar
084
Today's Stream
📅 2021-10-08 
(608 days ago)
⌛ 1:12:59
ZainboarKartikboar
085
Today's Stream
📅 2021-10-10 
(606 days ago)
⌛ 1:17:09
📰
ZainboarKartikboar
🎬
Impossible URL
Today's Stream
ZainboarKartikboar
🎬
Clever devs
Today's Stream
ZainboarKartikboar
086
Today's Stream
📅 2021-10-11 
(605 days ago)
⌛ 1:00:57
📰
ZainboarKartikboar
🎬
Always CORS related problems
Today's Stream
ZainboarKartikboar
🎬
CORS headscratcha
Today's Stream
ZainboarKartikboar
087
Today's Stream
📅 2021-10-12 
(604 days ago)
⌛ 0:51:02
📰
ZainboarKartikboar
088
Today's Stream
📅 2021-10-13 
(603 days ago)
⌛ 1:07:31
📰
ZainboarKartikboar
089
Today's Broadcast
📅 2021-10-14 
(602 days ago)
⌛ 1:07:16
📰
ZainboarKartikboar
090
Today's Stream
📅 2021-10-15 
(601 days ago)
⌛ 1:01:10
📰
Zainboar
091
Today's Stream
📅 2021-10-17 
(599 days ago)
⌛ 1:26:37
📰
ZainboarKartikboarThaneshboar
🎬
Torres Strait Icelander people
Today's Stream
ZainboarKartikboarThaneshboar
092
Today's Stream
📅 2021-10-18 
(598 days ago)
⌛ 1:05:40
📰
ZainboarKartikboarThaneshboar
🎬
Icelander or Islander?
Today's Stream
ZainboarKartikboarThaneshboar
093
Today's Stream
📅 2021-10-19 
(597 days ago)
⌛ 1:01:58
📰
ZainboarThaneshboar
094
Today's Stream
📅 2021-10-20 
(596 days ago)
⌛ 1:04:18
📰
ZainboarKartikboar
095
Today's Stream
📅 2021-10-21 
(595 days ago)
⌛ 1:16:08
📰
ZainboarKartikboarThaneshboar
096
100th Episode
📅 2021-10-23 
(593 days ago)
⌛ 1:13:16
📰
ZainboarKartikboar
097
101/200 Episodes
📅 2021-10-24 
(592 days ago)
⌛ 1:00:53
📰
ZainboarThaneshboar
🎬
Best Practices
101/200 Episodes
ZainboarThaneshboar
098
102/200 Episode
📅 2021-10-25 
(591 days ago)
⌛ 1:09:20
📰
ZainboarKartikboar
099
103/200 Episode
📅 2021-10-26 
(590 days ago)
⌛ 1:10:51
📰
ZainboarKartikboarThaneshboar
100
104/200
📅 2021-10-27 
(589 days ago)
⌛ 1:03:23
📰
ZainboarKartikboar
101
105/200
📅 2021-10-28 
(588 days ago)
⌛ 1:15:24
📰
ZainboarThaneshboar
🎬
ROAR coders
105/200
ZainboarThaneshboar
102
107/200
📅 2021-10-29 
(587 days ago)
⌛ 1:14:04
📰
ZainboarKartikboar
103
109/200
📅 2021-10-31 
(585 days ago)
⌛ 1:11:38
📰
ZainboarKartikboarThaneshboar
104
110/200
📅 2021-11-01 
(584 days ago)
⌛ 1:04:53
📰
ZainboarKartikboar
105
111/200
📅 2021-11-02 
(583 days ago)
⌛ 1:11:33
📰
ZainboarKartikboarThaneshboar
106
112/200
📅 2021-11-03 
(582 days ago)
⌛ 1:00:17
📰
ZainboarKartikboar
🎬
Diagon Alley? What is that kind of fing?
112/200
ZainboarKartikboar
107
113/200
📅 2021-11-04 
(581 days ago)
⌛ 1:03:53
📰
Zainboar
🎬
C.O.D.I.N.G
113/200
Zainboar
108
114/200
📅 2021-11-05 
(580 days ago)
⌛ 0:56:39
Zainboar
109
115/200
📅 2021-11-07 
(578 days ago)
⌛ 1:02:25
📰
ZainboarThaneshboar
🎬
What's testing
115/200
ZainboarThaneshboar
🎬
CORS coders
115/200
ZainboarThaneshboar
110
116/200
📅 2021-11-08 
(577 days ago)
⌛ 1:09:37
📰
ZainboarKartikboar
111
117/200
📅 2021-11-09 
(576 days ago)
⌛ 1:06:25
📰
ZainboarKartikboarThaneshboar
112
118/200
📅 2021-11-10 
(575 days ago)
⌛ 1:02:39
📰
ZainboarKartikboar
113
119/200
📅 2021-11-11 
(574 days ago)
⌛ 1:08:01
📰
ZainboarKartikboarThaneshboar
114
120/200
📅 2021-11-12 
(573 days ago)
⌛ 1:00:14
📰
Zainboar
115
120/200
📅 2021-11-14 
(571 days ago)
⌛ 1:06:19
📰
ZainboarKartikboarThaneshboar
116
122/200
📅 2021-11-15 
(570 days ago)
⌛ 1:00:31
ZainboarKartikboar
117
Today's Stream
📅 2021-11-22 
(563 days ago)
⌛ 1:01:46
📰
KartikboarThaneshboar
118
How This Video Has 12 Views, Explained
📅 2021-11-25 
(560 days ago)
⌛ 0:59:47
KartikboarThaneshboar
119
How This Video Has 14 Views, Explained
📅 2021-11-29 
(556 days ago)
⌛ 1:16:20
📰
KartikboarThaneshboar
▶️
Special Guest - Torey Littlefield Pt.2
📅 2021-11-30 
(555 days ago)
⌛ 1:12:15
📰
ZainboarToreyboar
121
Today's Stream
📅 2021-12-02 
(553 days ago)
⌛ 1:02:25
KartikboarThaneshboar
122
Today's Stream
📅 2021-12-06 
(549 days ago)
⌛ 1:02:01
📰
KartikboarThaneshboar
123
Today's Broadcast
📅 2021-12-07 
(548 days ago)
⌛ 1:01:00
KartikboarThaneshboar
124
Today's Stream
📅 2021-12-09 
(546 days ago)
⌛ 1:05:48
📰
ZainboarThaneshboar
125
Today's Stream
📅 2021-12-10 
(545 days ago)
⌛ 1:07:15
ZainboarToreyboar
126
Today's Stream
📅 2021-12-12 
(543 days ago)
⌛ 0:12:47
📰
ZainboarThaneshboar
127
Today's Stream
📅 2021-12-12 
(543 days ago)
⌛ 0:50:29
📰
ZainboarThaneshboar
128
Today's Stream
📅 2021-12-13 
(542 days ago)
⌛ 1:02:31
📰
ZainboarKartikboar
129
Today's Stream
📅 2021-12-14 
(541 days ago)
⌛ 1:10:28
📰
ZainboarToreyboar
130
Today's Stream
📅 2021-12-16 
(539 days ago)
⌛ 1:16:51
📰
ZainboarThaneshboar
131
Today's Stream
📅 2021-12-17 
(538 days ago)
⌛ 1:10:59
ZainboarKartikboarToreyboar
132
Today's Stream
📅 2021-12-19 
(536 days ago)
⌛ 1:00:49
📰
Zainboar
133
Today's Stream
📅 2021-12-20 
(535 days ago)
⌛ 1:01:49
📰
ZainboarKartikboar
134
Today's Stream
📅 2021-12-21 
(534 days ago)
⌛ 1:03:43
📰
ZainboarThaneshboar
135
Today's Stream
📅 2021-12-22 
(533 days ago)
⌛ 1:06:30
📰
ZainboarKartikboar
136
Today's Stream
📅 2021-12-23 
(532 days ago)
⌛ 1:00:09
Zainboar
137
Today's Stream
📅 2021-12-26 
(529 days ago)
⌛ 1:17:00
📰
ZainboarThaneshboar
🎬
Fixing and failing
Today's Stream
ZainboarThaneshboar
138
Today's Stream
📅 2021-12-27 
(528 days ago)
⌛ 1:05:22
📰
ZainboarKartikboar
139
Today's Stream
📅 2021-12-28 
(527 days ago)
⌛ 1:16:17
📰
ZainboarToreyboar
140
WebSocket Integration
📅 2021-12-29 
(526 days ago)
⌛ 1:02:44
📰
Zainboar
141
AWS WebSocket API Integration Pt.2
📅 2021-12-30 
(525 days ago)
⌛ 1:08:23
📰
ZainboarToreyboar
142
AWS WebSocket Integration with SAM Pt.3
📅 2022-01-02 
(522 days ago)
⌛ 1:03:18
📰
ZainboarToreyboar
143
Today's Stream
📅 2022-01-03 
(521 days ago)
⌛ 1:07:18
📰
ZainboarKartikboar
144
AWS WebScoket Integration with SAM Pt.4
📅 2022-01-04 
(520 days ago)
⌛ 1:04:18
📰
ZainboarToreyboar
145
AWS WebSocket Integration with SAM Pt.5
📅 2022-01-05 
(519 days ago)
⌛ 1:03:21
📰
ZainboarKartikboar
146
AWS WebSocket Integration with SAM Pt. 6
📅 2022-01-06 
(518 days ago)
⌛ 1:03:18
📰
ZainboarToreyboar
147
Today's Stream
📅 2022-01-07 
(517 days ago)
⌛ 1:11:55
📰
ZainboarToreyboar
148
Connect AWS WebSocket to DynamoDB Pt.1
📅 2022-01-09 
(515 days ago)
⌛ 1:10:25
📰
ZainboarToreyboar
149
Connect AWS WebSocket to DynamoDB
📅 2022-01-10 
(514 days ago)
⌛ 1:02:06
ZainboarKartikboar
150
"Blank Line" Bug In Lambda Response For AWS Websocket Pt.1
📅 2022-01-11 
(513 days ago)
⌛ 0:58:13
📰
ZainboarKartikboarToreyboar
151
"Blank Line" Bug In Lambda Response From Lambda
📅 2022-01-13 
(511 days ago)
⌛ 1:04:40
📰
ZainboarToreyboar
152
AWS WebSocket + Lambda + DynamoDB
📅 2022-01-14 
(510 days ago)
⌛ 1:04:33
📰
ZainboarThaneshboar
153
AWS WebSocket + Lambda + DynamoDB
📅 2022-01-16 
(508 days ago)
⌛ 1:11:37
📰
ZainboarToreyboar
154
Test
📅 2022-01-17 
(507 days ago)
⌛ 1:03:13
📰
ZainboarThaneshboar
155
Today's stre
📅 2022-01-18 
(506 days ago)
⌛ 0:45:24
ZainboarToreyboar
156
AWS Websocket + DyanmoDb + Lambda
📅 2022-01-19 
(505 days ago)
⌛ 1:06:33
📰
ZainboarThaneshboar
🎬
Brown is always better than white
AWS Websocket + DyanmoDb + Lambda
ZainboarThaneshboar
157
Today's Stream
📅 2022-01-20 
(504 days ago)
⌛ 0:57:55
📰
Zainboar
158
Today's Stream
📅 2022-01-21 
(503 days ago)
⌛ 1:02:17
📰
ToreyboarZainboar
159
Today's Stream
📅 2022-01-23 
(501 days ago)
⌛ 1:13:29
📰
ZainboarToreyboar
🎬
Wild street dogs
Today's Stream
ZainboarToreyboar
160
How To Host A Web App using AWS S3 and CloudFront
📅 2022-01-24 
(500 days ago)
⌛ 1:16:15
📰
ZainboarThaneshboar
161
How to Host Web App In AWS S3 using CloudFront, Route53 and CloudFormation
📅 2022-01-25 
(499 days ago)
⌛ 1:01:07
ZainboarToreyboar
162
How to Host Web App Using AWS S3, CloudFront and Route53
📅 2022-01-26 
(498 days ago)
⌛ 1:03:12
ZainboarThaneshboar
🎬
The more you know
How to Host Web App Using AWS S3, CloudFront and Route53
ZainboarThaneshboar
163
How To Host Web App In AWS S3 with Custom Domain
📅 2022-01-27 
(497 days ago)
⌛ 1:08:48
📰
ZainboarToreyboar
164
How To Host Web App In AWS S3 with Custom Domain Using Route 53
📅 2022-01-28 
(496 days ago)
⌛ 1:08:57
📰
ZainboarThaneshboar
🎬
Inactive brain
How To Host Web App In AWS S3 with Custom Domain Using Route 53
ZainboarThaneshboar
165
How To Host Web App In AWS S3 with Custom Domain Using Route 53
📅 2022-01-30 
(494 days ago)
⌛ 0:28:17
Zainboar
166
Today's Broadcast
📅 2022-01-31 
(493 days ago)
⌛ 1:11:16
📰
ThaneshboarToreyboar
167
How To Host Web App In AWS S3 with Custom Domain Using Route 53
📅 2022-02-01 
(492 days ago)
⌛ 1:06:35
📰
ZainboarToreyboar
168
Generate SSL Certificate via AWS Certificate Manager
📅 2022-02-02 
(491 days ago)
⌛ 0:58:02
📰
ZainboarThaneshboar
169
Test AWS Websocket Connection With Multiple Users
📅 2022-02-03 
(490 days ago)
⌛ 1:01:59
📰
ZainboarToreyboar
170
Adding Redirection To The AWS S3 Page
📅 2022-02-04 
(489 days ago)
⌛ 0:25:00
Zainboar
171
Redirecting AWS S3 page
📅 2022-02-06 
(487 days ago)
⌛ 0:54:11
Zainboar
172
Today's Broadcast
📅 2022-02-07 
(486 days ago)
⌛ 1:05:20
📰
ThaneshboarToreyboar
173
Today's Stream
📅 2022-02-08 
(485 days ago)
⌛ 1:05:29
ZainboarToreyboar
174
Today's Stream
📅 2022-02-10 
(483 days ago)
⌛ 1:05:47
ZainboarToreyboar
🎬
No electricity in Bali
Today's Stream
ZainboarToreyboar
175
How To Send Messages To Multiple Clients Through AWS Websocket
📅 2022-02-13 
(480 days ago)
⌛ 1:02:05
ZainboarToreyboar
176
How To CRUD Data Through AWS Websocket with Multiple Clients
📅 2022-02-16 
(477 days ago)
⌛ 1:07:32
ZainboarThaneshboar
177
Today's Stream
📅 2022-02-17 
(476 days ago)
⌛ 0:58:01
ZainboarToreyboar
🎬
Francesco
Today's Stream
ZainboarToreyboar
178
How To Change String Property to Object in AWS SAM and Deploy
📅 2022-02-20 
(473 days ago)
⌛ 1:21:24
ZainboarToreyboar
179
Today's Stream
📅 2022-02-23 
(470 days ago)
⌛ 0:59:43
📰
ZainboarThaneshboar
180
How To HASH A Password using BCRYPT in Node
📅 2022-02-25 
(468 days ago)
⌛ 1:03:48
ZainboarThaneshboar
181
How to Hash Passcode with BCRYPT using Node Pt.2
📅 2022-02-27 
(466 days ago)
⌛ 1:07:59
ZainboarToreyboar
182
Create Passcode UI
📅 2022-02-28 
(465 days ago)
⌛ 1:01:29
📰
ZainboarThaneshboar
183
How To Make FrontEnd Talk to Backend with Node
📅 2022-03-01 
(464 days ago)
⌛ 1:01:33
ZainboarToreyboar
184
How To Positioning A Div
📅 2022-03-04 
(461 days ago)
⌛ 1:09:27
ZainboarToreyboar
185
Today's Stream
📅 2022-03-06 
(459 days ago)
⌛ 1:00:29
Zainboar
186
Today's Stream
📅 2022-03-07 
(458 days ago)
⌛ 0:55:51
ZainboarThaneshboar
187
Today's Stream
📅 2022-03-09 
(456 days ago)
⌛ 1:00:11
ZainboarThaneshboar
188
Compare Hashed Passwords Using Bcryptjs
📅 2022-03-10 
(455 days ago)
⌛ 1:01:31
ZainboarToreyboar
🎬
Indian givers
Compare Hashed Passwords Using Bcryptjs
ZainboarToreyboar
189
Special Appearance
📅 2022-03-11 
(454 days ago)
⌛ 0:58:44
ZainboarThaneshboarKartikboar
190
Today's Stream
📅 2022-03-13 
(452 days ago)
⌛ 1:16:40
ZainboarToreyboar
🎬
Cold coffee, cold tea
Today's Stream
ZainboarToreyboar
191
How To Make Frontend Talk To The Backend - NodeJS
📅 2022-03-14 
(451 days ago)
⌛ 1:07:00
ZainboarThaneshboar
192
Today's Stream
📅 2022-03-15 
(450 days ago)
⌛ 1:05:51
ZainboarToreyboar
193
Today's Stream
📅 2022-03-17 
(448 days ago)
⌛ 1:21:59
ZainboarToreyboar
194
How To Apply Authentication When Saving NodeJs
📅 2022-03-18 
(447 days ago)
⌛ 1:05:27
Zainboar
195
How to Compare Passcodes Using Bcrytp Node.js
📅 2022-03-20 
(445 days ago)
⌛ 1:04:19
ZainboarToreyboar
196
Today's Broadcast
📅 2022-03-21 
(444 days ago)
⌛ 1:06:59
ThaneshboarToreyboar
197
Today's Stream
📅 2022-03-22 
(443 days ago)
⌛ 1:02:51
ZainboarToreyboar
198
Verify Passcode Saving Information to DynamoDB with NodeJs
📅 2022-03-23 
(442 days ago)
⌛ 1:03:09
ZainboarThaneshboar
🎬
Tough questions
Verify Passcode Saving Information to DynamoDB with NodeJs
ZainboarThaneshboar
199
Today's Stream
📅 2022-03-25 
(440 days ago)
⌛ 1:12:27
ZainboarToreyboar
200
Today's Stream
📅 2022-03-27 
(438 days ago)
⌛ 1:14:36
ZainboarToreyboar
201
Today's Stream
📅 2022-03-28 
(437 days ago)
⌛ 1:08:28
ZainboarThaneshboar
202
How To Do A Merge Using VSCode and Github
📅 2022-03-29 
(436 days ago)
⌛ 1:05:33
ZainboarToreyboar
203
Today's Stream
📅 2022-03-30 
(435 days ago)
⌛ 0:57:26
ZainboarThaneshboar
🎬
Tandoor? Wat even iz dat kind of fing
Today's Stream
ZainboarThaneshboar
204
Today's Stream
📅 2022-03-31 
(434 days ago)
⌛ 0:57:10
ZainboarToreyboar
🎬
This is why you don't click ops
Today's Stream
ZainboarToreyboar
205
Today's Stream
📅 2022-04-01 
(433 days ago)
⌛ 1:00:36
Zainboar
206
Today's Stream
📅 2022-04-03 
(431 days ago)
⌛ 1:06:56
ZainboarToreyboar
207
Get Board Columns from Frontend to Backend NodeJS
📅 2022-04-04 
(430 days ago)
⌛ 1:00:38
ZainboarThaneshboarToreyboar
🎬
Bish Bash Bosh
Get Board Columns from Frontend to Backend NodeJS
ZainboarThaneshboarToreyboar
208
Today's Stream
📅 2022-04-05 
(429 days ago)
⌛ 0:57:30
ZainboarToreyboar
209
Today's Stream
📅 2022-04-06 
(428 days ago)
⌛ 0:59:39
ZainboarThaneshboar
🎬
Zip first developer
Today's Stream
ZainboarThaneshboar
210
Today's Stream
📅 2022-04-07 
(427 days ago)
⌛ 1:04:46
Zainboar
🎬
Busted again
Today's Stream
Zainboar
211
Store String Array in DynamoDB using NodeJS
📅 2022-04-08 
(426 days ago)
⌛ 0:19:27
Zainboar
212
Today's Stream
📅 2022-04-10 
(424 days ago)
⌛ 1:07:24
Zainboar
213
Today's Stream
📅 2022-04-11 
(423 days ago)
⌛ 1:02:34
ZainboarThaneshboar
214
Today's Stream
📅 2022-04-12 
(422 days ago)
⌛ 0:27:43
Zainboar
215
Jira Organising & Beta Testing Day 1
📅 2022-04-13 
(421 days ago)
⌛ 0:58:09
ZainboarThaneshboar
216
Implement Passcode Tab Feature
📅 2022-04-17 
(417 days ago)
⌛ 0:58:49
ZainboarToreyboar
217
Beta Testing Fixes Part 2
📅 2022-04-19 
(415 days ago)
⌛ 1:00:24
ZainboarToreyboar
🎬
Torey the stinker
Beta Testing Fixes Part 2
ZainboarToreyboar
218
Beta Testing Fixes Part 3
📅 2022-04-20 
(414 days ago)
⌛ 1:01:02
ZainboarThaneshboar
🎬
Torcoders which are roarers
Beta Testing Fixes Part 3
ZainboarThaneshboar
🎬
Delusional Zain
Beta Testing Fixes Part 3
ZainboarThaneshboar
🎬
Hey guys, torey here
Beta Testing Fixes Part 3
ZainboarThaneshboar
219
Beta Testing Fixes Part 4
📅 2022-04-21 
(413 days ago)
⌛ 1:00:13
ZainboarToreyboar
220
Beta Testing 5
📅 2022-04-22 
(412 days ago)
⌛ 1:10:18
ThaneshboarToreyboar
221
Today's Stream
📅 2022-04-25 
(409 days ago)
⌛ 1:01:01
ZainboarThaneshboar
🎬
Zain's going platinum
Today's Stream
ZainboarThaneshboar
🎬
Doggy dog
Today's Stream
ZainboarThaneshboar
222
WebSocket Heartbeat & Thanesh's Farewell
📅 2022-04-27 
(407 days ago)
⌛ 0:51:08
ZainboarThaneshboar
223
Today's Stream
📅 2022-04-28 
(406 days ago)
⌛ 1:00:33
ZainboarToreyboar
224
Save Notes Through Websocket
📅 2022-04-29 
(405 days ago)
⌛ 0:51:30
Zainboar
225
Saving Object Through Websocket in DynamoDB
📅 2022-05-01 
(403 days ago)
⌛ 0:49:15
ZainboarToreyboar
226
Saving Object Through Websocket in DynamoDb
📅 2022-05-02 
(402 days ago)
⌛ 0:55:26
Zainboar
227
Today's Stream
📅 2022-05-05 
(399 days ago)
⌛ 1:01:32
ZainboarToreyboar
228
Welcome Back Kartik Party
📅 2022-05-08 
(396 days ago)
⌛ 0:55:32
ZainboarToreyboarKartikboar
229
Testing Prevention of XSS attack
📅 2022-05-10 
(394 days ago)
⌛ 0:29:16
Zainboar
230
How To Test Prevention XSS Attack
📅 2022-05-11 
(393 days ago)
⌛ 0:40:42
ZainboarKartikboar
🎬
Fartik
How To Test Prevention XSS Attack
ZainboarKartikboar
231
Fixing Websocket
📅 2022-05-19 
(385 days ago)
⌛ 0:49:55
Zainboar
232
Today's Stream
📅 2022-05-20 
(384 days ago)
⌛ 0:56:10
ZainboarKartikboar
233
Today's Stream
📅 2022-05-22 
(382 days ago)
⌛ 0:55:33
Zainboar
🎬
Second Favourite
Today's Stream
Zainboar
🎬
Disco Zain
Today's Stream
Zainboar
234
Today's Stream
📅 2022-05-24 
(380 days ago)
⌛ 0:23:19
Zainboar
235
Websockets bugs
📅 2022-05-27 
(377 days ago)
⌛ 1:00:51
ZainboarKartikboar
236
Websocket Bug Fix
📅 2022-05-29 
(375 days ago)
⌛ 0:49:50
Zainboar
237
Hook Up AWS Websocket
📅 2022-05-30 
(374 days ago)
⌛ 0:48:59
Zainboar
238
Hook up AWS Websocket Pt.2
📅 2022-05-31 
(373 days ago)
⌛ 0:53:07
Zainboar
239
Today's Stream
📅 2022-06-01 
(372 days ago)
⌛ 0:21:05
Zainboar
240
AWS Websocket Bug Fix
📅 2022-06-05 
(368 days ago)
⌛ 0:52:47
Zainboar
241
AWS Websocket Bug Fix Pt.2
📅 2022-06-06 
(367 days ago)
⌛ 0:23:52
Zainboar
242
Hook Up Board Columns to Websockets Nodejs + AWS Websockets
📅 2022-07-27 
(316 days ago)
⌛ 1:00:06
Zainboar
🎬
As you been poopin?
Hook Up Board Columns to Websockets Nodejs + AWS Websockets
Zainboar

Blog

Today, Kartik couldn't make it due to a coding interview, however, Torey Littlefield joined us on the show. In today's episode, we started building a Real Time Messaging app using React and Pusher. We built out the UI and started to work on the logic, but due to time constraints we were unable to have it fully functional. Regardless, it was fun having Torey on the show, as well as working on something else for a change. Going forward, we plan to continue working on Scrumblr-Enhancement where we will be figuring out how to update notes.

Subtitles

0:00:02
[Music]
0:00:24
hey everyone welcome to another episode
0:00:26
of buildbreaking fix
0:00:28
uh we're the raw coders from uh
0:00:30
melbourne team of developers from
0:00:32
melbourne
0:00:33
um on this on this stream we work on um
0:00:37
on coding
0:00:38
on one particular coding project usually
0:00:40
the scrambler enhancement project
0:00:43
but today we have uh
0:00:44
a guest with us the worst dev otherwise
0:00:47
known as
0:00:48
tory littlefield
0:00:50
um who's gonna be joining us today to
0:00:52
work on uh react app
0:00:54
um do you wanna introduce yourself or
0:00:56
you have anything else yet
0:00:58
sure so we're definitely not going to
0:01:00
learn anything today
0:01:02
um
0:01:04
and whatever i do just just do the
0:01:06
opposite
0:01:09
um but yeah
0:01:11
so the the goal is
0:01:14
um
0:01:15
to create a
0:01:17
uh like real-time chat up in react
0:01:21
so hopefully we have an hour
0:01:24
probably not going to get it done but
0:01:26
let's let's give it a shot
0:01:28
cool
0:01:30
yeah can you get started um yeah do you
0:01:32
want to share screen sorry and
0:01:34
i will do that all right um
0:01:38
go here share the screen
0:01:45
yeah whatever i don't have a second
0:01:46
monitor set up at the moment
0:01:48
okay that's right oops
0:01:54
all right all right
0:01:56
you can see i don't know just before we
0:01:57
do that sorry um we usually do the
0:02:00
acknowledgement of the country so i'll
0:02:02
just run that recording
0:02:04
sounds great
0:02:06
i begin today by acknowledging the
0:02:08
traditional custodians of the land on
0:02:10
which we gather today and pay my
0:02:12
respects to the elders past present and
0:02:15
future i extend their respect to
0:02:17
aboriginal and torres strait islander
0:02:19
people here today
0:02:23
awesome
0:02:25
all right
0:02:28
all right so like i i did this um like i
0:02:32
don't know a couple weeks ago
0:02:35
so this this app is hosted on versailles
0:02:38
which if you're not familiar with it
0:02:40
it's it's next.js which is basically
0:02:43
just
0:02:44
um you know um
0:02:46
another framework that's built on top of
0:02:48
react
0:02:53
and
0:02:54
um we can also just do this in pure
0:02:57
react um
0:02:58
which is fine
0:03:00
but um if i'll share this link
0:03:04
yep
0:03:05
um let me go back here
0:03:11
there we go yeah second monitor helps
0:03:16
so i i put that in the in the private
0:03:19
chat but i don't really care if people
0:03:21
want to go in there and
0:03:23
do whatever they want
0:03:25
so is it is this already working for you
0:03:29
yeah try the link and then
0:03:31
i will send you a message
0:03:46
let me know when you're in
0:03:49
uh yep i mean
0:03:52
did you get it
0:03:54
yeah i did
0:03:55
all right yeah just
0:03:57
and
0:03:58
i mean if you send one back you're gonna
0:04:00
see it i'm gonna see it but
0:04:03
let me see
0:04:04
i and this is using a service um called
0:04:09
pusher which may be called like
0:04:12
it's part of a
0:04:16
it's part of a company called senbird i
0:04:19
think
0:04:22
there you go message bird company
0:04:25
yes
0:04:26
so this is this is basically what's
0:04:27
handling the um
0:04:30
like this pub sub subscriber
0:04:33
um and this is totally free they have a
0:04:35
free tier
0:04:37
um
0:04:39
and it's pretty easy to set up
0:04:42
and we don't need a server
0:04:46
because
0:04:47
we can
0:04:50
we can of course deploy it in pure react
0:04:54
but you're going to be exposing some
0:04:56
stuff so like
0:04:57
that's one way of doing it um the other
0:05:00
way would be to just use something like
0:05:02
next js or
0:05:05
um you know aws lambdas or
0:05:08
like netlify serverless functions
0:05:11
um those are all pretty easy and that
0:05:13
way like you don't like expose the
0:05:17
the
0:05:18
um like the secret keys um
0:05:22
on the front end so like for
0:05:24
demonstration purposes
0:05:26
i don't think it matters
0:05:28
um
0:05:29
but like i i built this in next and then
0:05:33
um i can show you here
0:05:36
um in in
0:05:38
with first cell like it's just super
0:05:40
easy to set up
0:05:42
you have um
0:05:44
this api folder
0:05:46
um
0:05:48
that just
0:05:49
that's just baked into next and whatever
0:05:51
you put in here
0:05:53
is going to be deployed as a serverless
0:05:54
function
0:05:56
so like
0:05:57
you see here um
0:05:59
there's this handler right
0:06:02
so this is your serverless function
0:06:05
and this is just grabbing those um
0:06:11
api keys
0:06:12
[Music]
0:06:14
and not exposing them
0:06:18
and then on the on the on the um front
0:06:22
end
0:06:25
um
0:06:26
oh it's under pages right it's just
0:06:29
working in react
0:06:30
so on the front end um
0:06:33
all we have to do basically
0:06:36
is
0:06:37
um
0:06:39
create this new pusher object
0:06:42
and then
0:06:43
um we're just
0:06:45
subscribing to our
0:06:47
to our message channel
0:06:50
okay yep i see
0:06:52
and
0:06:53
that's
0:06:54
that's kind of it like that's the that's
0:06:57
the
0:06:57
that's the soup then you're done and
0:07:00
then you just push this to production
0:07:01
all right
0:07:05
and then you profit and then you profit
0:07:07
right you profit
0:07:09
yeah for sure man
0:07:12
um
0:07:13
yeah did you want to build on this today
0:07:15
uh or
0:07:17
you know did you have another idea in
0:07:19
mind
0:07:20
well if you want i can we can
0:07:23
i can build it or i think it would be
0:07:26
more fun if you try to build
0:07:29
and i can it try to talk you through it
0:07:31
unless you feel like i'm totally
0:07:33
uncomfortable writing react
0:07:35
on this live stream today
0:07:38
yeah i'm very scratchy in it at the
0:07:41
moment
0:07:42
uh but i did build something lassie
0:07:44
actually i'll quickly show you
0:07:46
um cool
0:07:50
well yeah i mean it shouldn't be that
0:07:51
hard like honestly like
0:07:53
i can i can walk you through it
0:07:58
i think it would be more fun for you but
0:08:00
if you if you don't want to do it all
0:08:02
i'll i'll do it
0:08:12
so
0:08:13
yeah this one uh
0:08:14
me and this another dev we built this
0:08:16
last year oh that looks great that looks
0:08:18
nice
0:08:20
um so this is all like bootstrap uh but
0:08:22
it's it's in react as you can see the
0:08:24
thing but yeah essentially bootstrap
0:08:30
and then basically just the idea is like
0:08:33
you it's meant to be like a social media
0:08:35
sort of platform
0:08:38
um
0:08:39
and then like you know these are the
0:08:40
posts
0:08:41
and uh you know you would either choose
0:08:44
oh cool wow
0:08:46
yeah agree disagree
0:08:48
um and then you would have a reply you
0:08:50
can add a comment
0:08:51
and if you if you chose i agree it will
0:08:53
show here if you chose i disagree to
0:08:55
show you so
0:08:56
yeah it was a bit of work that went into
0:08:58
it but um yeah really enjoyed this
0:09:00
project yeah definitely yeah that that
0:09:02
looks like a really good project um
0:09:04
thanks man you guys must put some time
0:09:07
into that for sure
0:09:08
yeah yeah
0:09:11
so so if you if you built this then you
0:09:14
should be all good to go
0:09:16
all right maybe yeah okay all right i'll
0:09:18
give it a go uh yeah
0:09:21
but uh yeah just no i haven't touched it
0:09:23
in a while whatever it'll come back to
0:09:26
you
0:09:26
it this looks like this looks like a
0:09:28
really good app
0:09:30
oh and you have it hosted on your own
0:09:31
you're all that's cool
0:09:33
it um
0:09:35
we have it hosted on on gcp
0:09:39
um
0:09:41
and essentially for the database we used
0:09:43
uh
0:09:45
uh firebase
0:09:47
firebase yeah i've never i've never used
0:09:49
it myself but like
0:09:52
seems like a really
0:09:54
nice way to throw up an app really
0:09:56
quickly
0:09:58
yeah yeah for sure
0:10:00
the other thing too that's like i almost
0:10:02
built this chat up actually using
0:10:05
firebase um but i was too lazy
0:10:08
to touch it because i was like nah i'm
0:10:10
not gonna learn firebase
0:10:12
right now but like if you do know
0:10:14
firebase like this would be really easy
0:10:15
because they have um firebase has a
0:10:19
real-time database so like you can you
0:10:22
can
0:10:23
use it for like real-time applications
0:10:28
okay
0:10:30
okay that's pretty cool actually that
0:10:32
comes to mind like um
0:10:34
i was looking into that a little bit as
0:10:36
well um
0:10:38
because actually i think google import
0:10:40
uh firebase from
0:10:42
like another company oh did they okay
0:10:44
and then um yeah they just integrated
0:10:47
into their own
0:10:49
um
0:10:51
but yeah firebase is really easy man
0:10:53
like if you if you wanted to learn it
0:10:55
it's definitely like something that's
0:10:57
not too hard at all
0:10:58
yeah i don't know like i don't
0:11:01
like yeah maybe someday
0:11:04
i'm like more focused on like
0:11:07
learning
0:11:10
aws or
0:11:11
gcp
0:11:13
i think i think the company that i'm
0:11:16
interviewing for uses google cloud so
0:11:20
i see okay
0:11:22
whatever whatever pays
0:11:25
[Laughter]
0:11:28
but yeah for like your own projects or
0:11:30
if you were actually like trying to
0:11:32
bootstrap some some app that you wanted
0:11:35
to monetize like or just make your own
0:11:37
project that you're not monetizing like
0:11:39
i think that's really uh a good service
0:11:43
to use i've heard like a lot of
0:11:45
developers really like it
0:11:47
yeah
0:11:48
sure firebase is part of gcp now anyway
0:11:51
so it's like you know you essentially
0:11:53
like can learn and still like very badly
0:11:56
i see okay so it's like google cloud's
0:11:59
version of
0:12:01
um what's the amplify
0:12:05
in some sense
0:12:07
is amplified just a db or
0:12:09
like
0:12:10
uh amplify is is uh
0:12:13
is like
0:12:17
a
0:12:19
like
0:12:21
like a more i don't want to say
0:12:24
more simple version i don't know i i'm
0:12:27
not the expert to speak on it but like
0:12:29
you have elastic bean stock
0:12:31
and you have like to create apps on aws
0:12:35
really quickly and then you have amplify
0:12:37
to create like
0:12:39
apps and spas like super fast with with
0:12:43
authentication i think i think it comes
0:12:46
comes by default with dynamodb
0:12:50
um
0:12:51
authentication
0:12:52
you know through aws incognito
0:12:55
and um
0:12:57
you can use like
0:13:00
um graphql i believe which is app sync
0:13:05
um
0:13:07
but yeah like um i haven't i haven't i
0:13:10
haven't touched it like to build
0:13:12
something other than like a tutorial but
0:13:14
like i really want to like um try to
0:13:17
work with it you know who really likes
0:13:19
it too is um
0:13:22
is uh
0:13:24
oh
0:13:25
i'm blanking on the name um
0:13:30
what's his name
0:13:32
matt coles you had him on the show
0:13:35
yeah yeah
0:13:38
yeah i need to i need to look into that
0:13:40
as well um
0:13:41
just out of curiosity
0:13:46
all right we got
0:13:48
we're running out of time so
0:13:52
true
0:13:53
um so i just created a new folder there
0:13:56
um are we using create react app uh so
0:13:59
if you want like the easier way is to
0:14:02
just throw this up in
0:14:04
um verse cell like using next
0:14:07
but which is like hardly different than
0:14:10
react at all
0:14:12
or we can do create react app um
0:14:16
and yeah like i think it's easier just
0:14:18
use create react app and then just like
0:14:20
expose the keys it doesn't matter
0:14:23
and then just
0:14:24
like it's on your pusher account anyways
0:14:27
so i'm not really concerned if they call
0:14:29
you up
0:14:31
who's gonna call me
0:14:32
the push-up
0:14:34
yeah they're gonna say
0:14:36
what have you done with the api we're
0:14:38
gonna bill you
0:14:40
oh i see
0:14:42
okay
0:14:43
[Music]
0:14:44
but yeah i would just like just take
0:14:46
down the keys after the show
0:14:48
yeah yeah i'll do that
0:14:50
all right sorry um what do i have to do
0:14:52
first
0:14:53
so
0:14:54
mpx create react app
0:15:02
and you're done that's it that's all you
0:15:04
need to do
0:15:05
that's it
0:15:08
so
0:15:09
oh wow is that done that's fast
0:15:13
nice okay so
0:15:15
um
0:15:19
you can see the end to there if you're
0:15:22
not already
0:15:24
or whatever
0:15:28
oh oh okay i wasn't reading your screen
0:15:31
so yeah you just need to um mpx create
0:15:34
react app and then just give it a name
0:15:37
okay
0:15:38
yeah my bad
0:15:43
[Music]
0:15:50
yeah and like maybe in the future like
0:15:53
if we wanted to we could
0:15:55
add some serverless
0:15:57
functions on with like netlify because
0:15:59
that's like a free easy awesome place to
0:16:02
host and then like
0:16:05
you can just like hide the hide the you
0:16:08
know the
0:16:09
the api keys and the serverless
0:16:11
functions
0:16:13
which is free it's awesome like nullify
0:16:15
is awesome
0:16:18
so is versa
0:16:24
um so while this is this is downloading
0:16:27
um if you haven't already
0:16:29
i would go ahead to push her and like
0:16:32
just create
0:16:33
um an account and get some api um get a
0:16:37
i forget what they call it but like
0:16:39
basically you're just getting some keys
0:16:41
some credentials
0:16:48
okay oh not a developer doesn't use
0:16:51
github
0:16:56
i'm just so used to
0:16:57
google you know it's just like easy
0:17:01
um
0:17:03
cool
0:17:04
probably safer
0:17:06
i'm always like should i sign up for
0:17:08
this using github
0:17:11
probably not
0:17:15
uh
0:17:17
beams platform building
0:17:20
so the thing you want to create is a
0:17:22
channel
0:17:24
okay
0:17:25
yep
0:17:27
get it started and then just
0:17:30
yeah just give it a name
0:17:37
let me pull zayn here and get real close
0:17:40
to the screen
0:17:43
um yeah that looks good
0:17:47
like i said it's
0:17:48
pretty simple
0:17:53
[Music]
0:17:57
we don't have a back end in this
0:18:00
no i would just choose node
0:18:12
all right
0:18:13
so
0:18:15
um
0:18:21
um
0:18:24
so
0:18:25
um
0:18:28
that first part that says like
0:18:33
java um javascript
0:18:35
like that's all you really need
0:18:37
is this like pub pub sub thing i like
0:18:41
showed you that
0:18:43
so like yeah you can't just grab it
0:18:44
without the html you're not gonna need
0:18:46
that
0:18:53
all right and then this is this like
0:18:56
that other pusher
0:18:58
um
0:19:00
and this is like the node event uh this
0:19:02
is for node.js this is for like the
0:19:04
events so this is like what you would
0:19:06
put in like your serverless application
0:19:09
so like i mean the one way to do this is
0:19:11
like
0:19:12
it can be done um
0:19:15
it can't like if you're just like local
0:19:17
hosting it i think this should
0:19:19
maybe work but i haven't tried the other
0:19:22
thing is like just like
0:19:24
throwing this in like a super dumb
0:19:27
express app
0:19:30
like locally and then you're just like
0:19:32
talking to yourself but like
0:19:35
yeah
0:19:37
all right um so i don't really need this
0:19:39
for now right
0:19:41
yeah we don't need that for now um but
0:19:43
it's like yeah it's not gonna work um
0:19:46
without the without some sort of um
0:19:49
server
0:19:50
but like let's just like build the
0:19:54
um
0:19:55
build like what we need for the react
0:19:57
app which really like shouldn't be that
0:20:00
much
0:20:00
okay
0:20:06
and then we can we can just like worry
0:20:08
about the the crappy server later
0:20:18
but like yeah i mean all you need is
0:20:19
like
0:20:20
a server in express with like 10 lines
0:20:24
of code probably
0:20:26
sweet all right
0:20:29
just steal the code from our scrambler
0:20:33
sure
0:20:34
all right yeah so let's just like just
0:20:36
clean out all that boilerplate
0:20:40
we don't need anything
0:20:42
just just just delete everything from
0:20:46
class name app and below
0:20:48
like keep the app
0:20:51
whatever
0:20:52
yeah there you go
0:20:55
there and then like if we want to be
0:20:56
very lazy about this like because we're
0:20:58
pressed for time
0:21:00
then like we're just let's just do
0:21:02
everything inside of the app
0:21:04
okay
0:21:06
um
0:21:07
so
0:21:08
you can probably
0:21:10
think about what we need but like really
0:21:12
all we need is like
0:21:15
we need like just some really basic html
0:21:19
in here which is just like input
0:21:23
like to send
0:21:24
to send messages so like you can even do
0:21:27
like an input with a button and a form
0:21:33
probably
0:21:36
oh look enough you don't really need the
0:21:37
form but like i don't know like that's
0:21:40
more semantic i guess
0:21:50
i'll steal some crows from the victory
0:21:52
school i think
0:21:57
there's a cool there's a there's like a
0:21:59
nice library too for react like if we
0:22:02
have time we could
0:22:03
spice up the components a bit
0:22:06
it's called chakra ui
0:22:08
and it's really nice and it's really
0:22:10
easy
0:22:15
no offense to w3schools but it's
0:22:18
probably a little nicer
0:22:22
yeah cool we yeah we totally can
0:22:25
um
0:22:28
yeah there's some cool stuff for
0:22:31
yeah and i'm just copying and pasting
0:22:35
that's what we do on the stream that's
0:22:37
what we do
0:22:40
i believe that's like half of what i do
0:22:42
anyways
0:22:45
my i don't have the answer but
0:22:47
the internet does
0:23:00
why is it angry
0:23:02
[Music]
0:23:04
oh
0:23:05
i remember this like oh yeah yeah yeah
0:23:07
right um
0:23:09
there you go
0:23:22
cool and just make the
0:23:25
make the
0:23:27
so we need
0:23:28
um
0:23:30
make the button type
0:23:32
submit so set the type attribute to
0:23:35
submit
0:23:43
all right and
0:23:46
and now like all we need
0:23:48
is um
0:23:50
maybe another
0:23:52
like
0:23:53
section container above the form like to
0:23:56
send to like display our messages that
0:23:59
we're sending and receiving
0:24:02
okay
0:24:03
yeah
0:24:07
and then we'll have like the perfect ui
0:24:10
completed
0:24:22
have you ever seen that joke like
0:24:25
what is a what does a developer bird say
0:24:29
no
0:24:30
div
0:24:33
[Laughter]
0:24:43
uh
0:24:44
how do we display this again it's uh
0:24:48
uh just nbn start exactly
0:25:00
um
0:25:07
tomorrow i have an interview at
0:25:09
6 00 a.m
0:25:11
hello
0:25:12
oh yeah
0:25:14
six am outer
0:25:17
um well my time
0:25:19
your time okay
0:25:21
you
0:25:22
how are you feeling for good
0:25:24
i'm pretty pumped like because like i i
0:25:27
signed an nda so i can't talk about it
0:25:29
too much but like
0:25:31
they they sent me some
0:25:34
information about what we'll be doing
0:25:36
tomorrow and then i was like
0:25:40
nice okay
0:25:42
that's good
0:25:43
yeah because otherwise i was like so
0:25:46
anxious what are we gonna be doing
0:25:49
what are we gonna do with this time and
0:25:51
that makes me worried like when i don't
0:25:53
know
0:25:54
yeah
0:25:56
yeah wow
0:25:58
that's looking good
0:26:00
[Laughter]
0:26:02
[Music]
0:26:04
wow and it's centered on the page
0:26:06
unbelievable
0:26:10
yeah maybe we added label
0:26:14
yeah
0:26:15
yeah make it look nice come on add a
0:26:17
label
0:26:27
this is a label
0:26:35
wow
0:26:43
that's dope
0:26:44
all right
0:26:45
like
0:26:46
um so the next thing we just need to do
0:26:51
is hook up some state to this form
0:26:54
um and in react like you probably
0:26:56
remember like we have like the modern
0:26:58
way of doing it is is like these
0:27:00
functional components and we use hooks
0:27:04
um so like the two hooks really all we
0:27:07
need for this app i think
0:27:09
maybe we could use the ref but i don't
0:27:11
think so all we uh all we need is like
0:27:14
use state hook and a use effect hook
0:27:17
so like
0:27:18
just import those from react at the top
0:27:21
or you can just write well we don't have
0:27:24
react imported you another way is you
0:27:26
can just write like react dot use state
0:27:31
okay
0:27:32
do we need we have to import react first
0:27:36
actually you don't anymore but like
0:27:38
since we're using those hooks like um
0:27:40
you do have to import those
0:27:43
but yeah you don't have to import react
0:27:45
anymore
0:27:46
okay yeah it's nice
0:27:49
just like less typing
0:27:53
um
0:27:54
so is it you state and
0:27:58
you got it
0:28:01
and then it's from react
0:28:02
uh import from react
0:28:08
uh
0:28:08
lowercase
0:28:12
in quotes
0:28:18
there you go
0:28:22
all right and then um so if do you
0:28:25
remember like how we use hooks like
0:28:27
there's some rules of hooks
0:28:31
very briefly okay so like
0:28:34
yeah um so with hooks you're always
0:28:37
going like one of the rules is like
0:28:40
you're all you always need to define it
0:28:42
above that return method and inside of
0:28:45
your function
0:28:47
um but they they can't be inside the the
0:28:50
return scope
0:28:52
um the other thing too is like we're not
0:28:54
gonna like deal with it but like you you
0:28:57
don't put them inside of like
0:28:58
conditionals
0:29:00
um
0:29:01
and there's probably like some other
0:29:04
rules to using hooks too but like those
0:29:06
are base those are like the two basic
0:29:08
rules so like okay
0:29:10
um uh above the return but inside of the
0:29:15
function app
0:29:17
we can write
0:29:18
um
0:29:20
the use state hook
0:29:22
so
0:29:25
um yeah and that's a function
0:29:31
that's a function
0:29:34
yeah so just call it like
0:29:36
and the and the way we write it actually
0:29:38
too is um you
0:29:41
what you can write i would just write
0:29:43
const and then declare it as a const and
0:29:45
then it's a d structured array
0:29:49
um with or is it uh not a not an object
0:29:53
it's a destructured array
0:29:56
so
0:29:58
yeah this is the convention and then the
0:30:00
first the so the
0:30:02
so the first item in that array is
0:30:05
always our state so that's the current
0:30:07
state of this
0:30:09
use state hook like um so
0:30:13
um and this the second
0:30:16
item in in the array is
0:30:18
our set state which is a function
0:30:21
and that's how we set the state
0:30:24
uh okay
0:30:25
i know and then and then set it equal to
0:30:28
use state hook
0:30:30
so
0:30:31
just write equals use state
0:30:36
use state
0:30:39
call it there you go and then change the
0:30:41
first one to state
0:30:45
just so
0:30:46
yeah yeah we can actually name this
0:30:48
whatever we want right that's that's
0:30:50
right so like if you go in the
0:30:51
documentation this is what you're gonna
0:30:53
see you're gonna say stay in set state
0:30:56
um but yeah you can name these like um
0:30:59
for this one we could we're gonna put
0:31:02
this in the input we're going to attach
0:31:04
this to the input
0:31:05
[Music]
0:31:07
component
0:31:09
on
0:31:11
on change
0:31:13
okay
0:31:20
and now um
0:31:23
uh that's how we're gonna set our state
0:31:25
and then the other way is we're gonna
0:31:28
use the state um in a value
0:31:33
i'm sorry i kind of like
0:31:35
did it a little bit backwards like okay
0:31:38
so just delete that on change first of
0:31:41
all
0:31:42
let's just get this going so right value
0:31:44
we want to set the the value for this
0:31:47
input and that's equal to
0:31:49
state
0:31:50
and you got to use um you got to use
0:31:55
[Music]
0:31:58
not bracket the other one
0:32:02
curly braces
0:32:03
oh okay
0:32:05
yeah because it's a it's a
0:32:07
you know it's a variable so anything
0:32:09
inside of a variable like we just wrap
0:32:11
it in curly braces
0:32:14
and now like if you put like inside of
0:32:17
the use state hook
0:32:19
you can you set inside the you state
0:32:22
hook a default value so you can just
0:32:24
write like
0:32:25
hi
0:32:26
or whatever or roar coders
0:32:30
okay
0:32:37
and now if you open the page you should
0:32:40
see that
0:32:41
the state value is your is your value
0:32:44
there you go
0:32:46
but now you can't change it
0:32:48
so that's where we got to do the second
0:32:49
part
0:32:50
so we got to hook up this state
0:32:53
uh
0:32:54
this sets state to our um input
0:32:57
component and that's on the on change
0:32:59
attribute
0:33:01
or on change event handler i should say
0:33:07
so yeah just go to the event and write
0:33:10
on change
0:33:13
and now um equal to open curly braces
0:33:18
and then inside
0:33:20
you're going to write a function
0:33:24
so just use the arrow syntax
0:33:28
you can one-line it it's cool
0:33:31
and um the the first the first uh
0:33:34
parameter or argument is e or event
0:33:40
because this is an event uh inside of
0:33:42
the um
0:33:44
yeah there you go
0:33:49
and then
0:33:51
you're doing good man you're doing great
0:33:54
and then um you're gonna write set state
0:33:59
and then this this is this is gonna this
0:34:02
is gonna update the state
0:34:04
um so this is a function this is a
0:34:06
function that takes in
0:34:08
your new state so your new state is
0:34:11
e.target value
0:34:16
okay
0:34:20
so basically this is just taking in the
0:34:22
value of your input and setting it
0:34:26
as the state of this used state hook
0:34:29
um and it's
0:34:31
e dot target dot value i'm sorry
0:34:36
there you go
0:34:37
so now if you save this and go and type
0:34:45
you can you can change and i don't know
0:34:48
if you happen you probably don't because
0:34:50
you're not like
0:34:52
like uh
0:34:54
doing a lot of front-end stuff but
0:34:56
there's like a there's a extension
0:34:58
called like react profiler and like in
0:35:01
in that ex react developer tool sorry
0:35:04
and like inside there you can actually
0:35:06
see the state of your react application
0:35:11
so like you would see like whatever you
0:35:13
put in there whatever you
0:35:14
um deleted like that's this that's the
0:35:17
stay now for that you state hook
0:35:19
i see
0:35:21
yeah yeah
0:35:23
um so now like um
0:35:26
yeah you could also like inside of that
0:35:29
um so the other way like the the other
0:35:32
way that
0:35:33
is convention is to write like a handler
0:35:36
so you just write like on like on change
0:35:39
handler and then like you just drop that
0:35:41
function inside that on change instead
0:35:44
of like writing it out on the line but
0:35:47
we can do that like for the form
0:35:51
so um
0:35:54
so now what we need
0:35:56
is
0:35:58
um
0:36:00
well actually why don't we do this too
0:36:02
so we don't trip ourselves up so just
0:36:04
change the
0:36:05
the names
0:36:07
of these like state and set state to
0:36:09
like whatever you want like input and
0:36:13
set input right
0:36:15
okay
0:36:17
uh put this message
0:36:19
sure
0:36:24
that's yeah and then just just update
0:36:27
them in the
0:36:29
there you go so yeah you can you can
0:36:31
rename these
0:36:36
there you go
0:36:38
and now um
0:36:41
what we want to do
0:36:43
is hook up our form to
0:36:46
an on submit event
0:36:50
okay so for this
0:36:52
um we can write a function above the
0:36:55
return method called like
0:36:58
usually the convention is to say like
0:37:00
handle submit
0:37:02
or
0:37:12
and then this is going to take in an um
0:37:15
an event too because we want to prevent
0:37:18
um the uh submission of the form
0:37:22
so e prevent default because otherwise
0:37:26
like
0:37:26
by default like um
0:37:29
the browser will
0:37:31
try to submit this form and refresh the
0:37:33
page
0:37:36
okay which totally defeats the purpose
0:37:38
of having a
0:37:39
react application
0:37:41
or any sba
0:37:43
yeah i think
0:37:45
i can't speak for the other like
0:37:47
frameworks actually so i can't say that
0:37:50
but yeah it's prevent default
0:37:53
uh
0:37:54
default is capitalize
0:37:58
camo case
0:38:01
and then just call it you gotta call it
0:38:07
call call prevent default it's a method
0:38:12
oh okay
0:38:13
i see
0:38:16
all right and so and then um
0:38:20
on that handle so like um
0:38:23
why don't we just do this to start um
0:38:26
which is
0:38:28
on the on the line below just console
0:38:30
log the state
0:38:32
or the your message rather like which is
0:38:35
the current state right of this input
0:38:38
field
0:38:43
all right and now you just need to hook
0:38:45
up this handle submit um function to
0:38:49
your form
0:38:52
actually um with the type submit on the
0:38:55
button it it
0:38:57
automatically knows to submit the form
0:39:01
oh well okay
0:39:02
so on uh on your form component
0:39:06
just write on submit
0:39:09
uh attach it on on your form component
0:39:12
okay okay
0:39:15
yep and then yeah on submit
0:39:18
event handler
0:39:19
and then just curly braces
0:39:23
and just drop in your handle submit and
0:39:26
you don't need to call it because it
0:39:27
it's automatically invoked
0:39:31
and now if you go to the application
0:39:35
um
0:39:36
and you just start
0:39:38
typing different stuff in in your input
0:39:41
there
0:39:42
you're gonna see it logged out
0:39:45
once you hit submit
0:39:49
cool
0:39:54
yeah there you go all right so um
0:39:59
what we want to do like eventually with
0:40:02
this on submit handler is basically like
0:40:04
send that message right to uh pusher
0:40:08
um's like endpoint
0:40:10
so like that's that's something like we
0:40:13
can do implement later
0:40:16
um
0:40:18
the other thing is um
0:40:22
yeah so i think i think next we want to
0:40:27
um
0:40:29
set up
0:40:31
another piece of state called messages
0:40:33
or something or like
0:40:35
chat
0:40:36
messages and like this would this would
0:40:39
the the purpose of this piece of state
0:40:42
would be to take in
0:40:44
um and set the messages that are we're
0:40:47
receiving from
0:40:49
um the listener which is from pusher
0:40:53
because like if we're gonna get in
0:40:55
um we're gonna set up a subscriber right
0:40:58
to this to this uh
0:41:01
end point that's gonna be listening for
0:41:03
messages in the background right um it's
0:41:05
a websocket it's basically just
0:41:07
websockets right so like
0:41:10
when something comes in like we want to
0:41:12
add this to our messages uh like chat
0:41:14
messages um state and then that's gonna
0:41:17
be rendered on the page
0:41:19
so like
0:41:20
that's why like you have this div
0:41:23
name display i think you mean
0:41:26
like class name display or whatever i
0:41:28
don't care a name doesn't matter to me
0:41:31
but like
0:41:32
inside there like we would render out
0:41:34
all the messages that were receiving and
0:41:37
sending
0:41:38
right
0:41:39
cool yeah i go you mean
0:41:44
um so yeah just set up another piece of
0:41:47
state
0:41:49
and call it whatever you
0:41:51
want
0:41:53
could we would want an array here
0:41:55
actually
0:41:57
uh yep that's right
0:42:08
um
0:42:09
so
0:42:11
for
0:42:12
like just mocking this out why don't we
0:42:14
just like above the function
0:42:16
app why don't we just make some like
0:42:18
dummy data
0:42:20
we're definitely not gonna
0:42:27
let's just discover like we should uh we
0:42:29
should definitely continue it yeah i
0:42:31
mean if you guys aren't working on other
0:42:33
stuff in the future and you want to do
0:42:35
this like we can keep working on it
0:42:37
yeah yeah um
0:42:39
so
0:42:40
the messages would be like an array
0:42:42
right
0:42:43
and then inside the it's an array of
0:42:45
objects with all our messages
0:42:49
okay
0:42:51
so like one thing we need is just like
0:42:52
an id
0:42:54
of course
0:42:56
like the message id and then
0:43:00
we can call it one or two but i don't
0:43:02
care or you can use random
0:43:06
we're just like mocking it out
0:43:10
we need to a value as well that's it
0:43:12
sure value like the message so this
0:43:14
would be the text for the message
0:43:18
okay
0:43:20
i forget what these would actually be
0:43:22
called from the api but like we can
0:43:24
change it easily later
0:43:26
and then maybe we want like one more
0:43:28
thing
0:43:29
or two more things actually we
0:43:31
and they're optional but like maybe we
0:43:34
would want a time stamp
0:43:37
um
0:43:39
and maybe we would also want
0:43:43
um
0:43:44
yeah you could just put like new date
0:43:48
or whatever is in javascript
0:43:50
i think it's a
0:44:00
um it's it's the new keyword and then
0:44:03
space date like it's an object
0:44:06
okay
0:44:08
um well it's not up and then you call it
0:44:11
cement call it it's a method there you
0:44:14
go and then
0:44:17
um
0:44:20
and then we maybe would want the
0:44:22
username
0:44:31
and then and then i think that's like
0:44:35
what you would need for a super basic
0:44:38
chat application you don't even need the
0:44:40
timestamp necessarily but like
0:44:43
or the username but like it's good to
0:44:45
know like who's sending stuff
0:44:47
yes
0:44:49
um
0:44:50
and
0:44:52
yeah why don't we just like copy that
0:44:54
one real quickly and we'll just make two
0:44:56
messages and then we'll just render them
0:44:58
on the page
0:44:59
okay
0:45:01
and just just like change the
0:45:04
the values a little bit
0:45:11
i love roar coders
0:45:22
okay
0:45:23
so
0:45:24
um
0:45:25
take the take the messages
0:45:29
um variable and drop it into your state
0:45:32
but just delete the
0:45:34
empty array
0:45:36
yeah there you go
0:45:39
all right
0:45:40
so um
0:45:42
now what we're gonna do
0:45:45
is use another
0:45:48
um
0:45:51
another um well actually let's just
0:45:54
render this out first since we just have
0:45:56
mock data but like
0:45:58
so the way if you have an array of data
0:46:01
do you know do you remember how to
0:46:02
handle it in to
0:46:04
render out every
0:46:07
um
0:46:08
like render out like
0:46:11
different components
0:46:23
so you're gonna map over that
0:46:26
array of objects
0:46:28
and then inside there
0:46:31
you're just creating those
0:46:33
creating a component like
0:46:36
it can be uh you know it can be like a
0:46:39
whole page
0:46:41
component or it can just be like a div
0:46:43
and
0:46:44
you know a message inside and then
0:46:46
closing div
0:46:48
that's it
0:46:50
so
0:46:51
so like what we would be rendering here
0:46:54
is just basically like you know
0:46:57
we have some text that we want to
0:46:58
display like username
0:47:00
right or
0:47:02
the message
0:47:05
so
0:47:06
[Music]
0:47:07
don't quite remember
0:47:09
messages
0:47:10
so uh the first thing you want to do is
0:47:12
because it's you because you're writing
0:47:14
um some you're you're writing like
0:47:18
variables your writing function is you
0:47:20
want to wrap it in curly braces like
0:47:22
that's jsx
0:47:26
so like in jsx yeah like if you're down
0:47:28
here in the return where you're like
0:47:30
actually rendering things
0:47:32
um you're gonna wrap it in curly braces
0:47:35
okay
0:47:36
and then
0:47:37
you just want to dot map and then map
0:47:40
over the different um
0:47:43
items in that array
0:47:50
we had hd or we had some gsx in here
0:47:53
right
0:47:55
uh you
0:47:56
[Music]
0:47:58
you will yeah you will have this like um
0:48:01
you can actually like one line it right
0:48:04
now if you want for fun or you can write
0:48:06
like you would write return
0:48:09
okay and then
0:48:11
um
0:48:13
you you don't use um curly braces you
0:48:15
actually use parentheses
0:48:17
to render a component
0:48:22
that's the syntax
0:48:26
so inside here you would you would write
0:48:29
out you know you're like
0:48:31
paragraph this is a message paragraph
0:48:34
right
0:48:36
and then inside there you gotta wrap it
0:48:38
again
0:48:40
uh
0:48:41
like so anything inside you want to put
0:48:43
like invert sure you like that's fine
0:48:46
there you go i mean like this
0:48:49
yep exactly
0:48:51
the only thing you're forgetting is like
0:48:52
in the map in the map callback the map
0:48:56
function like you need to
0:48:58
like
0:49:00
put a callback so uh um or not uh yeah
0:49:04
callback like you need a callback
0:49:05
parameter whatever parameter so like
0:49:08
um
0:49:09
like item or
0:49:12
message
0:49:14
maybe you've already used message i see
0:49:16
okay chat message chat message usually i
0:49:19
just take the name that was plural and
0:49:22
just
0:49:23
use its singular version and then
0:49:26
arrow functions fine
0:49:31
um but you will need you will need
0:49:36
i think you might need curly braces now
0:49:38
because you broke it on you broke the
0:49:40
line
0:49:41
yeah
0:49:43
yeah now you gotta you just gotta wrap
0:49:45
it
0:49:51
um
0:49:52
yeah i don't know there's some syntax
0:49:54
problem
0:50:05
what is the winter telling you
0:50:11
what is the webster
0:50:12
this one oh i just meant like what is
0:50:14
eslant saying
0:50:18
um
0:50:20
where's the problem
0:50:31
maybe it doesn't like your empty curly
0:50:33
braces inside the message
0:50:38
this one yeah inside the paragraph
0:50:52
no
0:50:54
um
0:50:56
let's see
0:50:57
closing
0:51:01
closes close the curly brace
0:51:05
oh you're you're missing so it's closed
0:51:08
curly brace then close parentheses then
0:51:10
close curly brace
0:51:15
or maybe you're true true
0:51:17
no no no you're right this happens to me
0:51:19
all the time
0:51:23
all right so now you've mapped out those
0:51:26
mock messages they should be displayed
0:51:28
on the page
0:51:30
nice okay we'll just i would just leave
0:51:32
this this one then
0:51:36
whoa
0:51:40
yeah like the other way too is like you
0:51:43
can
0:51:44
you don't have to use the the braces
0:51:46
from the arrow function but sometimes
0:51:48
like
0:51:49
i'm gonna like destructure the object
0:51:52
like up there because it's easier for me
0:51:55
um
0:51:57
but like anything you want to return as
0:51:59
a component like in jsx you have to wrap
0:52:03
it in
0:52:05
um closing like you know like
0:52:07
complementary parentheses there like
0:52:10
that's the that's the distinction for
0:52:12
jsx
0:52:13
so like
0:52:15
that happens
0:52:16
um
0:52:17
that happened to me so much in the
0:52:18
beginning like i'm like
0:52:22
forget to use like um parentheses
0:52:27
so that's like that's like basically the
0:52:29
whole idea
0:52:30
here um
0:52:32
and like yeah if you wanted to like you
0:52:34
can you can add some extra stuff to this
0:52:37
component like you could put you could
0:52:39
write like span
0:52:41
um
0:52:42
and then like the username so it's like
0:52:44
inlined or whatever but like
0:52:47
this is this is like
0:52:49
this is like the basic
0:52:51
structure of the
0:52:53
of the react
0:52:54
like you know whatever the html
0:52:57
um
0:52:58
so
0:53:00
next
0:53:02
when you whenever you're done
0:53:06
yeah that's that's gonna make it look
0:53:08
way better
0:53:15
i agree with that dude that was a good
0:53:17
choice
0:53:18
okay
0:53:20
i can't tell you being sarcastic
0:53:23
no like now
0:53:25
now it's like you can tell like who or
0:53:27
what
0:53:29
yeah
0:53:31
i like that that was a that was a good
0:53:33
feature you added
0:53:36
um
0:53:37
so then so then the next and last thing
0:53:40
we need to do is
0:53:42
add another hook which is like the
0:53:45
second most common hook which is a use
0:53:47
effect hook
0:53:49
which i think we imported
0:53:51
yep
0:53:53
okay so
0:53:55
do you remember how to write a use
0:53:57
effect tick
0:53:59
or what if it does
0:54:02
doesn't it render the start of the
0:54:06
when the page loads and then
0:54:09
that's one thing it does
0:54:12
um the user so they use effect hook is
0:54:15
like
0:54:15
the second most commonly used hook as i
0:54:18
said like you know you state is pretty
0:54:20
self-explanatory
0:54:22
because you're just like adding state to
0:54:24
your application and it doesn't um
0:54:27
it's it's not it's not like
0:54:30
it's not destroyed like when react
0:54:33
re-renders right so like use effect
0:54:36
is this hook that allows you to
0:54:39
[Music]
0:54:40
um
0:54:41
allow side effects
0:54:43
and that's basically why it's called use
0:54:45
effect
0:54:46
so
0:54:47
um
0:54:49
so it's this it's this um
0:54:52
it's this function
0:54:55
that you're gonna add like
0:54:57
dependencies to so there's like
0:55:01
let's just write it out and then it's a
0:55:02
little bit easier to explain
0:55:04
okay as you're like writing it out
0:55:06
so you so yeah you just you don't like
0:55:09
this isn't like you stayed or other
0:55:11
types of hooks
0:55:13
yeah you actually just like call this
0:55:14
one
0:55:17
and then inside so inside of it
0:55:21
you're gonna you you're calling another
0:55:23
arrow function
0:55:25
or an arrow function
0:55:28
just call an arrow function it doesn't
0:55:30
take so this one doesn't take as far as
0:55:32
i know and i would be surprised to learn
0:55:35
if it did take in any parameters or
0:55:37
arguments but it doesn't
0:55:39
what
0:55:40
and then and then so like the last
0:55:43
argument you're gonna write a comma and
0:55:44
this is like other
0:55:47
um
0:55:49
other types of
0:55:52
like i don't know like user like not use
0:55:55
reducer like reducer um method in
0:55:58
javascript or like other array methods
0:56:00
like you can yeah add that dependency
0:56:03
array
0:56:04
so like this this dependency array is
0:56:07
like
0:56:08
the piece of
0:56:11
state usually it's almost usually state
0:56:14
or something else
0:56:16
but almost
0:56:17
always commonly states so whatever you
0:56:19
put inside that dependency it's gonna
0:56:22
tell react like when it should run this
0:56:25
use effect hook
0:56:27
and actually a lot of
0:56:28
hooks like there's some other ones
0:56:31
called use callback and use memo they
0:56:33
also have a dependency array and those
0:56:36
those like those um
0:56:39
basically have the
0:56:40
have the same idea where like they're
0:56:42
only gonna like be run if
0:56:45
whatever is in your dependency has not
0:56:48
changed so
0:56:49
in this context like
0:56:51
um if we have
0:56:54
um
0:56:55
chat messages as our dependency
0:56:59
right
0:57:03
or
0:57:04
um or message for that matter actually
0:57:07
let's make it let's make a message for
0:57:09
this example because we're definitely
0:57:11
not going to finish
0:57:15
so like this use effect is going to hook
0:57:18
uh is going to run whenever message
0:57:20
changes
0:57:21
okay
0:57:23
and then that's
0:57:24
that's
0:57:26
it's not gonna trigger a re-render
0:57:30
it's only gonna trigger a re-render if
0:57:32
you
0:57:34
set the state to
0:57:37
something else so like in this example
0:57:39
we could just say
0:57:41
use effect
0:57:42
um
0:57:44
and then we can we can add we can like
0:57:47
add a
0:57:49
we can append like another object
0:57:52
to our set chat messages like from the
0:57:55
input which isn't what we would
0:57:57
necessarily do for this application but
0:58:00
like for demonstration purposes like we
0:58:03
can just see like hey i'm going to type
0:58:04
some stuff in an input
0:58:06
hit submit and then and then it's going
0:58:08
to add like a new um message to the chat
0:58:13
i see okay
0:58:15
you mean like append the array
0:58:17
or the chat messages eraser
0:58:21
yeah um
0:58:24
so
0:58:26
um
0:58:29
uh so
0:58:31
the first thing the first thing you
0:58:32
should know though is that use effect is
0:58:35
gonna run even on the first render of
0:58:37
the page
0:58:40
so if you try to put in a message and
0:58:43
it's empty
0:58:45
then it's not gonna do anything so like
0:58:47
you can write conditionals
0:58:50
like above it to say like return out of
0:58:53
this use effect hook
0:58:55
if there's no message
0:58:57
okay
0:58:59
um
0:59:00
what's that uh that was something i
0:59:02
don't remember but maybe you do tory but
0:59:05
wasn't there like um
0:59:08
it was like you add like three dots and
0:59:10
then you go spread operator
0:59:12
yeah
0:59:13
and then yeah well you do that inside
0:59:16
the set state method
0:59:18
function
0:59:21
okay
0:59:23
yeah because in react react we
0:59:27
well yeah i mean that's just like
0:59:29
javascript like spread syntax
0:59:32
but like so the first thing you want to
0:59:33
do is like we don't have a message so we
0:59:36
don't want to set any state and cause a
0:59:38
re-render
0:59:40
it's it's pointless and
0:59:42
it's
0:59:43
so like the first thing you want to do
0:59:44
is just say if
0:59:46
you know there's no message
0:59:48
just return
0:59:52
what i described won't help us for this
0:59:54
for this
0:59:56
issue
1:00:01
oh what i just said it's a i'm mistaking
1:00:04
what it does this one
1:00:07
well yeah we'll get there like you
1:00:09
almost got it you almost got it
1:00:18
axis
1:00:30
you and actually if you want to do that
1:00:32
you can just like get rid of the curly
1:00:34
braces
1:00:35
but it's just like simpler syntax i'm
1:00:38
lazy
1:00:42
totally up to you like yeah you can just
1:00:44
get rid of them you can bring up the
1:00:46
return yep
1:00:49
i just um i do that because i'm lazy
1:00:53
um
1:00:55
so now like if there is a if there isn't
1:00:57
a message this effect is just going to
1:01:00
exit and if there is a message
1:01:02
then we can set the state and add this
1:01:05
current message to our chat messages
1:01:07
right
1:01:10
uh yeah
1:01:12
yeah
1:01:13
so this is this set state
1:01:16
um part of the hook for st use state is
1:01:19
is um
1:01:21
uh
1:01:23
for objects and arrays like well for
1:01:26
arrays and in particular like yeah one
1:01:29
common way is just use the spread syntax
1:01:33
okay
1:01:34
um but because like the
1:01:37
messages
1:01:39
like the messages object or like
1:01:42
the id the value the timestamp the
1:01:45
username like you need to add that
1:01:50
to this to this message
1:01:52
right
1:01:54
so like just before you set it just
1:01:56
create and just create an object like
1:01:59
that you're gonna pass in the sent
1:02:01
messages with the id the value the date
1:02:04
the username
1:02:07
uh in the user fact just do it in the
1:02:09
use effect
1:02:11
in here
1:02:12
yep
1:02:14
anything you put outside of a hook in
1:02:16
react is gonna be wiped clean like every
1:02:20
render it's gone
1:02:22
really okay yeah so if you write let
1:02:25
message and then like react right
1:02:27
re-renders like
1:02:29
that message is gone like
1:02:31
rap doesn't know about it it doesn't
1:02:33
keep it around that's why we have the
1:02:35
used state hook like
1:02:37
it persists on renders
1:02:41
okay
1:02:50
i hope this is a good primer
1:02:52
[Laughter]
1:02:56
well this helps me a lot because
1:02:58
tomorrow i'm gonna have to be talking
1:02:59
about this like for like a good two
1:03:01
hours so
1:03:03
yeah i appreciate you doing this
1:03:06
that's all good man i'm yeah hopefully
1:03:09
that goes well
1:03:11
thank you
1:03:22
finish
1:03:27
so the one thing is for your value
1:03:29
just set that equal to your message
1:03:32
because we're we're just going to take
1:03:34
what you submit on your form and pass
1:03:36
that in
1:03:39
because your message is your is your
1:03:42
state here
1:03:43
um
1:03:44
and now
1:03:45
in your set state function or set sorry
1:03:49
set message function i mean set state
1:03:52
your set message function
1:03:56
uh
1:03:56
yeah uh so call it yeah just call it
1:04:04
and now like
1:04:06
make it um
1:04:08
uh it's an array
1:04:10
so you can either
1:04:12
you can you can do that um
1:04:16
spread syntax
1:04:18
if you want like that's definitely one
1:04:20
way to do it so you can write like um
1:04:24
you can write do i have to um
1:04:27
yeah you can just write um open braces
1:04:32
right
1:04:34
you mean outside no inside inside
1:04:37
because you're gonna whatever you put
1:04:38
inside of the setstate function that's
1:04:40
going to update your state to be your
1:04:42
news to be this new state
1:04:46
um so now you're not going to have any
1:04:48
state like if you go back to the page
1:04:50
it's going to be gone
1:04:52
like let's just try it for fun like send
1:04:54
a message submit it
1:05:00
yeah it doesn't allow you
1:05:02
oh that's
1:05:03
that's funny
1:05:06
it's about to happen right because
1:05:10
i can't remember
1:05:12
i can't remember like what we wrote
1:05:14
there
1:05:15
but like i thought it would clear the
1:05:17
array
1:05:20
um oh oh you know why oh there's some
1:05:24
oh it's angry at you because you're like
1:05:26
changing the messages and then updating
1:05:31
huh wait there's some loop running let's
1:05:33
go back like there's there's some bug we
1:05:36
wrote
1:05:39
said
1:05:42
oh um
1:05:43
we want to set the chat messages
1:05:47
not the actual message
1:05:49
yes
1:05:51
that's why it's that's why you're
1:05:52
getting that loop because it's like hey
1:05:55
i'm updating the
1:05:57
that's like react like
1:05:59
novice
1:06:00
stuff like you write a piece of state
1:06:03
that it's like or you put in a piece of
1:06:05
state that's a dependency
1:06:07
and then you're setting the state inside
1:06:09
there and then it just keeps like
1:06:11
re-rendering re-rendering
1:06:13
that's how you make an infinite loop and
1:06:15
react like the easy way
1:06:17
i see oh yeah i see what was happening
1:06:19
now because we have this dependency
1:06:20
right exactly yeah you got it man for
1:06:23
sure
1:06:24
so now like um if you did this like you
1:06:27
would clear all the messages because
1:06:28
it's empty
1:06:30
um
1:06:31
um but like
1:06:33
what you want to do is yeah see it's
1:06:35
gone right it's already gone
1:06:38
um so what you want to do is take your
1:06:41
um
1:06:42
your old messages your chat messages
1:06:45
sorry
1:06:46
your old chat spread them out
1:06:49
spread them out with the spread operator
1:06:52
and then comma
1:06:54
and then add your new example message
1:06:58
object
1:07:03
i i think um
1:07:05
uh you gotta you gotta use the spread
1:07:07
operator though the spread operator is
1:07:09
dot dot dot
1:07:12
um for both
1:07:14
okay
1:07:16
because that's that's just syntax and
1:07:18
javascript for how you
1:07:20
how you um it's just shorthand for how
1:07:23
you
1:07:24
um
1:07:26
uh what's the word concatenate um array
1:07:30
it's it's all good you could do the same
1:07:33
thing with like concat method but
1:07:37
then you'd be exposed um for
1:07:40
being like super old school
1:07:45
um okay cool let's check this out now so
1:07:49
now if we did everything right if you
1:07:51
write a message and hit submit it you
1:07:54
should see that message pop up
1:07:56
uh-oh
1:07:57
oh oops uh don't spread out the object
1:08:00
my bad
1:08:02
the first one
1:08:04
uh the second one
1:08:06
the second one because the second one is
1:08:07
the object
1:08:09
oh yeah
1:08:13
you could also just wrap it in an array
1:08:15
and then it would work but
1:08:17
no need see wow okay already showed up
1:08:22
oh okay
1:08:24
oh because it's on change that's why so
1:08:27
anytime you any time you
1:08:29
anytime you type in that input
1:08:32
um it's it's updating that piece of
1:08:34
state which is the message right
1:08:37
so that's why you're getting
1:08:39
that's why you're um you're spamming it
1:08:41
yeah so like the other way to do it
1:08:44
would be like
1:08:45
whenever we hit submit on the form and
1:08:48
like inside that handle submit it's then
1:08:51
going to set the message
1:08:53
right
1:08:54
instead of having this on change
1:08:57
we should uh we should put this in here
1:08:59
then in that case right
1:09:02
um
1:09:05
well that's the chat message well
1:09:09
um
1:09:12
you could do that
1:09:15
like i was thinking about how we would
1:09:16
do it if we're actually building the
1:09:18
application like
1:09:20
getting there but like
1:09:22
um
1:09:24
if you
1:09:24
[Music]
1:09:26
want there's another way to get the
1:09:29
value from the input field on the form
1:09:32
without
1:09:33
introducing like extra complexity
1:09:37
okay um and that is with
1:09:41
another hook
1:09:44
that's what i'm going to reach for like
1:09:46
um
1:09:49
uh it's called use ref
1:09:51
so like we'll learn some good stuff
1:09:53
today like these are like the three
1:09:55
hooks i use the most
1:09:58
okay
1:09:59
seriously
1:10:00
that's running did you want to call it
1:10:02
that man
1:10:03
oh wow yeah let's call it a day yeah
1:10:05
let's go there um and we can pick this
1:10:07
up
1:10:08
you know maybe
1:10:10
i don't know whenever we
1:10:12
we're not doing scramble enhancement
1:10:16
uh
1:10:17
like the name
1:10:20
but yeah it's been been really good i
1:10:21
think today
1:10:23
i got to yeah use react
1:10:26
um after a while how do you do you like
1:10:28
it
1:10:28
uh tori
1:10:30
what
1:10:31
the exercise
1:10:33
yeah yeah man i i hope uh i hope like it
1:10:36
was
1:10:37
a good like refresher on basic react
1:10:41
stuff
1:10:42
but like you know 90 of react is
1:10:45
this honestly like once you get your
1:10:47
hands
1:10:48
once you
1:10:49
once you get used to doing all this
1:10:50
stuff like these patterns like
1:10:54
that's pretty much like the core
1:10:56
competencies and react honestly
1:10:59
yeah
1:11:00
yeah that makes sense
1:11:02
yeah cool um
1:11:04
yeah i need to
1:11:05
get some practice on this i think but
1:11:08
anyways uh it's been a good good session
1:11:10
i think yeah thanks for having me
1:11:12
that's all good it's been a pleasure
1:11:15
um all right thanks everyone thanks for
1:11:17
watching
1:11:18
um yeah today we worked on the chat
1:11:21
messaging app um
1:11:23
that tori guided me through
1:11:26
and
1:11:27
and depending on what we do next maybe
1:11:30
we'll go back to scrambler or we'll
1:11:32
continue this but yeah it's been really
1:11:33
good either way
1:11:34
um yeah thanks everyone for watching
1:11:37
i'll see you on thursday uh same time
1:11:41
same place
1:11:42
and uh different tasks perhaps all right
1:11:45
thanks everyone see you later thank you
1:11:47
thanks dynash have a good night
1:11:49
yeah tori good luck tomorrow as well
1:11:52
thank you very thank you
1:11:54
i'll let you guys know
1:11:56
cool
1:11:57
for sure or if you don't hear from me
1:11:58
that means i'm sad
1:12:03
let us know either way but i'm sure
1:12:05
i will thank you thanks uh have a good
1:12:08
night