00:00:00
you know my story i r from a 30-year-old
00:00:02
with no career no money in the bank
00:00:04
account to being a senior developer with
00:00:05
multiple apps with many users for
00:00:07
different companies earning a six
00:00:08
figures annual salary in just under 5
00:00:10
years today we're going to talk about
00:00:12
the app that I learned the most from and
00:00:15
it was early in my career maybe when
00:00:16
after like 3 years I started programming
00:00:18
I'll give you a little backstory of what
00:00:20
the app was about so the story of the
00:00:21
app was that I was working at a software
00:00:23
development firm in sales and
00:00:25
development one of my clients was this
00:00:28
mental health application and so I set a
00:00:30
meeting and long story short I closed it
00:00:32
and I made the company some money right
00:00:34
and I programmed it to next he invited
00:00:36
me on to the team to be like the lead
00:00:38
developer and I was only three or four
00:00:40
years into my programming career so it
00:00:42
was very hard it was a big step up we
00:00:44
built the Prototype at the uh software
00:00:46
firm and then now he needed a fully
00:00:47
fledged working product and basically he
00:00:50
decided to redesign the whole app and uh
00:00:52
gave us 3 months to do it so it was uh
00:00:55
it was a challenge I got to building we
00:00:56
got the app done on time things were
00:00:58
going great but the CEO saw on
00:01:00
opportunity where we' build apps for
00:01:01
other NOS they really liked our app I
00:01:03
got to work and I started refactoring
00:01:05
and rebuilding the entire app and
00:01:07
separating all the features so I could
00:01:08
turn on and off the features to kind of
00:01:10
modularize the features to kind of make
00:01:12
it work here like some with chat some
00:01:15
without chat some with video chat some
00:01:17
without video chat some with journaling
00:01:19
some without journaling and you get the
00:01:20
point so through building this app
00:01:22
there's something that clicked in my
00:01:23
mind every app needs authentication chat
00:01:25
profile management these are like three
00:01:27
very important things that almost every
00:01:29
app does and and then it has some kind
00:01:31
of secret sauce like whether it be
00:01:32
journaling or video chatting or quizzes
00:01:36
or whatever it is in the end you're
00:01:37
always going to need authentication
00:01:39
profile management most likely 90% of
00:01:41
the time chat something clicked in my
00:01:42
mind just make those things really well
00:01:44
and then you can kind of get to the good
00:01:45
parts really easy and uh have fun and uh
00:01:48
so we built out an app and it had all
00:01:50
the features and I'll just show you the
00:01:51
website here uh called GB basically we
00:01:53
started out as a mental health company
00:01:55
during Co there was this thing going
00:01:57
around called the co blues and uh he
00:02:00
kind of like figured you know why don't
00:02:01
we make a journaling app where we can
00:02:03
and we'll have like this video chatting
00:02:04
with a doctor and it would be good but
00:02:06
then we had about us like wellness
00:02:08
Workshop that was like the video
00:02:09
chatting software Services community and
00:02:12
then he added this B2B section he wanted
00:02:14
this B2B section to build out apps for
00:02:16
other people he wanted to be like this
00:02:18
white label application company so an
00:02:20
all-in-one Tech partner for mental
00:02:22
health NOS so basically we built out all
00:02:24
these features show you down here uh
00:02:26
login so like authentication bio rhythm
00:02:29
tracking online video chatting uh text
00:02:31
chatting and chatbot online Journal mood
00:02:33
tracker self assessment test and uh GPS
00:02:35
enabled search and we kind of wanted to
00:02:38
use that not every app is going to need
00:02:39
all these right they could just choose
00:02:41
like five of these or three of these and
00:02:43
then make a whole app out of it there's
00:02:44
a little video of the app I'll just
00:02:46
share my screen we can look at the app
00:02:48
together this is the first app right
00:02:49
here it has like some scheduling
00:02:51
journaling mood tracking and you could
00:02:53
kind of see your weekly moods and
00:02:56
calendar and chatting and some kind of
00:02:58
chat bot and profile man management and
00:03:00
a whole bunch of just stuff that every
00:03:02
app is going to need it is in the App
00:03:04
Store I don't think you guys should
00:03:05
download it though I don't work there
00:03:06
anymore and with that app we did build
00:03:08
another app for this company called Napa
00:03:10
and basically we use that app to build
00:03:12
this app and it's in the App Store so
00:03:14
you see that it has a mood Journal
00:03:16
interactive dashboard and video chat and
00:03:19
um prompting cues M Journal so it's a
00:03:21
basically the same app just repackaged
00:03:23
with different logos different colors
00:03:25
and new design that's what I did and
00:03:27
I'll kind of show you how I did it
00:03:29
basically we went through the app you
00:03:30
know so what language stack and how did
00:03:32
I code it right we used uh react native
00:03:34
Community CLI and this was in like 2020
00:03:37
2021 and it was around 3 years or 3 or
00:03:39
four years into my uh career so when I
00:03:41
first built the Prototype at the
00:03:43
software development firm I was talking
00:03:44
about we just used react native nodejs
00:03:47
Express and MySQL that was it but uh
00:03:49
this is how I did it the first time but
00:03:52
having to redo it in the 3 months with
00:03:53
the new redesign uh I learned about
00:03:55
Firebase and serverless architecture so
00:03:57
I learned Firebase fire store fire based
00:04:00
Cloud functions and it was easy to use
00:04:02
and fast to deploy it was done in
00:04:03
node.js uh with Lambda functions and
00:04:05
react native and a big thing I'll show
00:04:08
you guys the code and the big thing I
00:04:09
learned was how to bind the fire store
00:04:11
with Redux with this Library called
00:04:12
react Redux Firebase it was really good
00:04:15
it saved me a lot of time and I think it
00:04:17
could add value to you guys I don't know
00:04:18
if people use it cuz people don't really
00:04:20
use Redux recently I had a good time and
00:04:22
it made very comfortable to use Redux I
00:04:25
just used this for the library it it
00:04:27
loaded up all the things into my fire
00:04:29
store from Redux that I needed I didn't
00:04:32
need to keep making calls and uh people
00:04:33
always talk about kind of like the uh
00:04:35
price of making requests over and over
00:04:37
again to fire store but you don't really
00:04:38
need to do that if you have a global
00:04:40
State Management there's like some code
00:04:41
to initialize the app and the user
00:04:43
profile cuz like you're not going to
00:04:45
keep asking for the profile over and
00:04:46
over again from fire store because
00:04:48
that's how you build up these requests
00:04:49
so you just stick that in your Redux and
00:04:51
if there's any changes you updated in
00:04:52
your Redux as it goes so that's kind of
00:04:55
what we did and I'll kind of show you
00:04:57
guys the code so this was the V1 we're
00:05:00
using storybook so we had a folder
00:05:02
structure like um and it taught me like
00:05:04
this code kind of like taught me a lot
00:05:06
about organization and how to set up
00:05:08
react native project you have like your
00:05:10
navigation you have your Stacks hooks
00:05:13
Services where your API calls go it was
00:05:16
uh it was very fun it was um interesting
00:05:19
and I had a big learning experience um
00:05:21
kind of working with uh other developers
00:05:24
trying to get this thing done it was
00:05:26
really good this was the first version
00:05:28
and I have something similar with like
00:05:31
the boiler plate that I wrote to make
00:05:33
like the other apps like I just showed
00:05:34
you with like Napa and everything else
00:05:37
I'll share the GitHub link with you guys
00:05:39
it isn't exactly the boiler plate that I
00:05:41
created at the company because it's not
00:05:43
my company it's not mine and but I use a
00:05:45
lot of that influence to build my own
00:05:47
kind of boiler plate like serverless
00:05:49
Firebase serverless architecture like um
00:05:51
fire store boiler plate with react
00:05:52
native that I used on my project for a
00:05:54
while I'll go to github.com I think it's
00:05:58
called react native burner in mind
00:06:01
here's like the folder structure so I
00:06:03
think you know a big thing about code
00:06:04
and when I was tasked to kind of redo
00:06:06
the app in a very you know lighter and
00:06:09
turn things off I learned about you know
00:06:11
how to organize my read me how to kind
00:06:14
of like organize everything in the
00:06:16
documentation so other people could help
00:06:18
me so I kind of wrote this documentation
00:06:20
you have the SRC folder I have my uh
00:06:23
assets and then I I would have my images
00:06:26
fonts and then um components and the
00:06:29
components would hold like the index.
00:06:31
TSX which would hold all my code that I
00:06:33
would import or export from there and
00:06:35
then if it had its own assets I put it
00:06:37
in there if I had something specific to
00:06:40
the Android or specific to the iOS I
00:06:41
would keep in those folders and then I
00:06:43
had my config and then the config of my
00:06:45
app like app config like uh server URL
00:06:48
language and all that kind of stuff and
00:06:51
uh it just showed me how to organize it
00:06:53
you guys can take a look I'll share the
00:06:54
link with you guys how I structured this
00:06:56
app it's not how I do it anymore but um
00:06:59
it was was uh it was a good one I
00:07:01
thought it was easy to use so a big part
00:07:03
of this right in the app config when you
00:07:05
go to SRC and you go to the config
00:07:08
folder in the app config I put all the
00:07:11
features right I put there's a pay mode
00:07:14
there's a language of the app and then
00:07:16
there's a story book if I wanted the
00:07:18
practice screen on or not uh if I wanted
00:07:22
chat in the app or not I could just pass
00:07:24
true or false and it would take away the
00:07:26
tab but button on the bottom Journal
00:07:29
true or or false and then chat extras
00:07:31
that I want to be able to let them
00:07:32
upload images or videos uh and I just
00:07:35
have to turn it true or false and then
00:07:37
the video I'll have to remove that if I
00:07:39
wanted video chat in there I'll just Pat
00:07:40
true or false and then I'd put some end
00:07:42
points in here this code helped me learn
00:07:44
a lot as in like um you could hide
00:07:46
things cuz on IOS and Android apps you
00:07:49
can't really look at the inspector or
00:07:50
anything so you can kind of just hide
00:07:52
things and people can't really see it so
00:07:54
I have my kind of index. TSX in The
00:07:57
Navigators and I would in the rout I
00:08:00
have my index. TSX and then I kind of
00:08:03
just uh hid stuff like if the config do
00:08:05
chat feature was on then then I would
00:08:08
show that this chat was in the app right
00:08:11
if uh the config dojour feature on I
00:08:13
would be able to kind of control you
00:08:15
know if the tabs were shown in the app
00:08:18
and kind of separate the logic so then
00:08:20
it was like its own app within the app
00:08:23
it really uh opened my eyes to kind of
00:08:25
like how to code clean and all that kind
00:08:27
of stuff so I did use Firebase in this
00:08:30
right so if you look at the package.json
00:08:32
of the app you'll see that I use a lot
00:08:34
of libraries in react native and uh
00:08:36
especially in the readme I kind of put
00:08:38
notes on how to install all the um
00:08:40
packages I was using so a big thing was
00:08:43
I kept on looking about it it's called
00:08:44
react Redux Firebase but maybe you know
00:08:46
what react is maybe you know what Redux
00:08:48
is but uh Firebase is a big one right
00:08:50
and it kind of ties it all in together
00:08:52
kind of um make the app have its own um
00:08:55
back end as a service or like
00:08:56
authentication so Firebase is a huge
00:08:59
huge SDK so software development kit
00:09:02
built by Google for authentication for
00:09:05
their nosql database for push
00:09:07
notifications for a bunch of things in
00:09:09
their in their Suite let's say right so
00:09:11
make your app uh the best it can be with
00:09:14
Firebase and generative AI this is just
00:09:16
added because they added some kind of
00:09:18
thing called Gemini but basically they
00:09:21
have a bunch of things like you can
00:09:22
deploy apps on here you can um do some a
00:09:26
lot of things right um You can do um and
00:09:29
it's used by a lot of big companies so
00:09:31
I'll just show you what it looks like in
00:09:33
the console so you got a Firebase
00:09:35
console and basically you can just turn
00:09:38
on um I'll just go to this react or the
00:09:42
burner basically it has a bunch of
00:09:45
products like app check app hosting
00:09:48
authentication and well look an end
00:09:49
to-end user identity solution under 10
00:09:51
lines of code that's you know it's super
00:09:55
powerful you have fire store it's almost
00:09:57
like just no well it helps you
00:10:00
store data and you can kind of um call
00:10:02
the fire store directly from your app
00:10:04
you have hosting you have functions like
00:10:06
Lambda functions and um basically the
00:10:08
only problem with it with it is that it
00:10:10
can get quite expensive if you have
00:10:12
thousands and thousands and thousands of
00:10:13
requests you know it's not hard to get
00:10:16
thousands thousands of requests if each
00:10:18
person is going moving here moving here
00:10:19
moving here and you have like a thousand
00:10:21
users and they're making a bunch of
00:10:22
actions on your app but basically you
00:10:25
have a firestore
00:10:27
database that you can kind of um
00:10:30
you can see the data you get a uid it's
00:10:34
very much like and you have like
00:10:37
chat requests um chat rooms you can
00:10:40
create your own
00:10:41
Collections and then you have basically
00:10:45
um
00:10:47
authentication which you can have here
00:10:50
and it stores uh authentication so you
00:10:52
don't have to store passwords and you
00:10:54
know create your o 2 uh strategies and
00:10:59
uh it taught me a lot because reading
00:11:01
through Google documentation Firebase
00:11:03
documentation you kind of learn how
00:11:05
software is supposed to be built you
00:11:08
understand the patterns that need to
00:11:10
happen within your um app to kind of
00:11:12
follow some kind of a readable format
00:11:15
and uh you know it helped me a lot
00:11:18
trying to like understand and piece
00:11:20
together you know react native and
00:11:21
Firebase because there's a lot of
00:11:22
documentation for it too it's not just
00:11:24
like I built it it's not like uh many
00:11:27
people use this deack and so maybe you
00:11:28
want to use something obscure or
00:11:30
whatever but you're not going to find as
00:11:31
many uh documentation but react native
00:11:34
Firebase uh Lambda functions you're
00:11:37
going to find many resources and it's
00:11:39
going to help you kind of um figure that
00:11:42
out as well so uh that was really good
00:11:45
for me because uh you got to see uh how
00:11:48
to store data and I'll show you how you
00:11:50
do that in the app right now I'll just
00:11:52
press a dot in
00:11:55
here I think that's a pretty cool
00:11:57
feature you can just press uh period in
00:11:58
the GitHub repository and it opens up
00:12:00
the uh Visual Studio code in the browser
00:12:04
that's a new feature from like four
00:12:06
years ago four years is not a new
00:12:08
feature but so basically you have like
00:12:11
um these screens right and you have like
00:12:13
uh so you maybe you'll have like a a
00:12:16
request or pending request
00:12:19
screen and you basically have these
00:12:22
hooks called like use Firebase and use
00:12:24
fir store and actually I never used
00:12:27
typescript before this project so I
00:12:28
learned how to use typescript during
00:12:30
this project as well so I had this um
00:12:34
component called chat
00:12:36
request and uh I use typescript so
00:12:38
extended Firebase instant extensive fir
00:12:40
store instance and you can kind of
00:12:43
see uh that it is a type from react
00:12:48
Redux Firebase that gives you things
00:12:49
like um fire Source set add and get and
00:12:54
then from there I would um I would get I
00:12:57
would say like add to this
00:12:59
um collections chat requests the uh the
00:13:04
empty requests of who it is and it would
00:13:07
be and then a status of pending and then
00:13:09
you'd kind of see that like pending
00:13:11
requests the first thing I do is um I
00:13:14
use State and then somewhere here I
00:13:17
remember I say get all the pending
00:13:19
requests from this person
00:13:22
and so here I think it is so get
00:13:26
firestore ref run transaction this was
00:13:28
kind of like my counter transaction in
00:13:30
case that something happened and I would
00:13:33
roll back the uh transaction from the
00:13:35
database and um you know it was it was
00:13:39
quite an eye openening experience kind
00:13:41
of getting to work on my own you know
00:13:44
and honestly it's right when GitHub
00:13:45
co-pilot came out so I was kind of
00:13:47
playing around with that a lot and it
00:13:49
was like a really fun pair programming
00:13:51
with uh AI at the time and I was
00:13:54
learning a lot and um oh here it was get
00:13:57
pending request so here we are I have my
00:14:01
get method from fir store so I say get
00:14:04
request from collection um chat requests
00:14:08
and I had my fire names here in my
00:14:10
contant my uh so everything was like I
00:14:13
was able to organize everything very
00:14:15
interestingly and um how other people
00:14:17
could read it and uh see right away and
00:14:20
the reason why I put my uh strings in
00:14:21
here where um I used to make a lot of
00:14:23
typos when I type so if I have my
00:14:26
variable names and auto completion it
00:14:28
helped a lot and here was my uh chat
00:14:31
request so I said basically
00:14:35
um wa request oh pending request sorry I
00:14:39
said get pending requests uh get
00:14:41
requests a wait get on the collection
00:14:44
chat requests where uh the key
00:14:47
participant uh contains
00:14:50
me and the key status equals pending so
00:14:53
there is nobody uh there is nobody that
00:14:55
touched like the accept or deny button
00:14:58
yet and then and then you get the
00:14:59
request pending so that are mine and
00:15:03
then um yeah basically the code was done
00:15:07
like in a very clean way as I thought at
00:15:10
the time there's many different ways to
00:15:12
do things but it was uh easy for me to
00:15:14
read and easy for me to navigate through
00:15:15
the code and um it was uh interesting
00:15:18
for me I'm not going to show you much
00:15:20
more code so this was something I
00:15:22
learned a lot like how to modularize
00:15:24
code how to separate things and how like
00:15:27
actually like there's one big big app
00:15:29
but then there's small apps within that
00:15:31
app that you can kind of uh separate and
00:15:33
kind of um use everywhere so like I
00:15:35
always say create your little treasure
00:15:37
test make things that you can keep
00:15:39
reusing and reusing and reusing and uh
00:15:41
it'll make your career like in software
00:15:43
development much easier yeah that was
00:15:45
something that was good one of the most
00:15:46
uh important things right is I started
00:15:49
and then I finished right so that
00:15:51
meaning I got to start you know with
00:15:53
there's nothing right well like I mean
00:15:55
there are like libraries and packages
00:15:56
but I have to kind of figure out how to
00:15:57
do it and then um I learned and then I
00:16:01
finished what I said I was going to
00:16:02
finish and through that I learned many
00:16:05
things right I learned how to um um you
00:16:08
know think about a problem think about
00:16:10
like the steps in order to like yes you
00:16:12
can send a chat request but then from
00:16:14
there what is going to happen and then
00:16:16
you kind of think about all the things
00:16:18
possibilities that are going to happen
00:16:19
from there so yeah like a suggestion to
00:16:22
the user or if you're you you watching
00:16:25
you can actually um write out your plan
00:16:28
and then actually not just start it but
00:16:30
finish what you say you're going to
00:16:31
start you know and you know I did make a
00:16:34
lot of mistakes mistakes are going to
00:16:36
happen and um don't be scared to like
00:16:40
run like uh get reset hard maybe not too
00:16:42
much you know like if you kind of get
00:16:44
too deep into like some kind of once you
00:16:46
understand the basics of JavaScript once
00:16:48
you get there you kind of make errors in
00:16:50
thinking right and if you start digging
00:16:52
a hole it's not like a reason of like
00:16:54
not knowing the language or not knowing
00:16:55
how to do it it's more like I was
00:16:56
thinking wrong let's roll it back and
00:16:59
then let's uh let's go a different way
00:17:01
cuz I always think about coding kind of
00:17:03
like this like uh I see other people and
00:17:05
they have like let's say I don't know
00:17:07
like a small little pen or a small
00:17:09
little pickaxe right uh trying to pick
00:17:12
away at the problem pick away at the
00:17:14
problem and you know you'll get the
00:17:17
problem done in a long time but
00:17:20
sometimes you need to go back in the
00:17:21
toolbox and then just kind of get that
00:17:22
sledgehammer and just break the wall
00:17:24
down right and it's um that's the kind
00:17:27
of thinking you have to have because
00:17:29
don't worry like if you have the pickaxe
00:17:31
in the beginning that's the wrong choice
00:17:33
in the beginning just go back and make a
00:17:35
better choice and uh fix the problem and
00:17:38
it doesn't matter you were wrong as long
00:17:39
as you fixed it that's that's like my
00:17:42
best advice for you yeah so like that's
00:17:44
it but uh you know like these are things
00:17:46
you're going to learn like uh through
00:17:47
projects and um there's a free
00:17:49
Javascript course coming up that I'm
00:17:51
going to uh teach and I think some PE a
00:17:53
lot of people signed up and I'm very
00:17:54
excited for it and um this is the uh
00:17:57
kind of uh JavaScript course I kind of
00:18:00
had it open on accident I didn't mean to
00:18:02
do it but uh here we are you know it's
00:18:05
going to be for beginners for kind of
00:18:07
experienced people we're going to go
00:18:08
through JavaScript HML CSS react basics
00:18:11
of react basics of get um do some uh
00:18:15
HTTP requests handling look through big
00:18:18
Jason objects look through arrays and
00:18:20
make some kind of crud uh create read
00:18:23
update and delete and um you'll
00:18:25
understand like every single app is a
00:18:27
crud to be honest
00:18:29
and um that meaning like like a Facebook
00:18:32
post you post you create a post you can
00:18:35
update a post you can delete a post you
00:18:37
have to get the post later so that's
00:18:39
something that I'm looking forward to it
00:18:42
and see you guys there and uh just
00:18:46
remember if I can do it you can do it
00:18:49
too coding saves lives
