the coding project that improved my skill the most (senior developer, no cs degree)
Summary
TLDRIn this inspiring talk, a 30-year-old senior developer recounts their journey from a novice to a successful professional in just five years. They share insights from developing a mental health app, emphasizing the importance of features like authentication, chat, and profile management. The developer discusses their experience with Firebase, serverless architecture, and React Native, highlighting the value of modularizing features and the impact of clean coding practices on their career growth. They also reflect on the significance of starting and completing projects, offering encouragement and advice for aspiring developers.
Takeaways
- 🚀 The speaker transitioned from having no career to becoming a senior developer with a six-figure salary in under 5 years.
- 💡 The app discussed was pivotal in the speaker's learning journey, focusing on mental health and offering various features like chat, video chat, journaling, and mood tracking.
- 🛠️ The speaker was tasked with redesigning and modularizing the app to cater to different client needs, which was a significant challenge early in their career.
- 🔑 Key components identified as essential for most apps include authentication, profile management, and chat functionalities.
- 💼 The speaker's role evolved from a sales and development position to leading the development of the app, showcasing their rapid growth.
- 🌐 The app was designed to be versatile, allowing features to be turned on and off based on client requirements, demonstrating adaptability in software development.
- 📚 The speaker learned about Firebase and serverless architecture during the app's development, which was a new experience and expanded their technical skills.
- 🔗 The use of react Redux Firebase was highlighted as a time-saving tool that streamlined data management and state control within the app.
- 📝 The importance of documentation and clean code organization was emphasized, which helped in maintaining and scaling the app effectively.
- 🔄 The speaker's advice for others is to start and finish projects, learn from mistakes, and not be afraid to make big changes if the initial approach is flawed.
Q & A
What was the speaker's initial situation before becoming a senior developer?
-The speaker was a 30-year-old with no career and no money in the bank.
How long did it take the speaker to transition from a beginner to a senior developer?
-It took the speaker just under 5 years to become a senior developer.
What was the nature of the first app the speaker learned the most from?
-The first app the speaker learned the most from was a mental health application.
What was the significant challenge the speaker faced while working on the mental health app?
-The significant challenge was redesigning and rebuilding the entire app within 3 months to meet new requirements.
What key features did the speaker identify as common in most apps?
-The speaker identified authentication, chat, and profile management as three key features common in most apps.
How did the speaker modularize the features of the mental health app?
-The speaker modularized the features by refactoring the app to allow turning on and off different functionalities like chat, video chat, and journaling.
What was the name of the mental health app the speaker worked on?
-The name of the mental health app was 'GB'.
What additional app did the speaker build using the knowledge gained from working on 'GB'?
-The speaker built another app called 'Napa' using the knowledge and modular approach from 'GB'.
What technology stack was primarily used in the development of the mental health app?
-The technology stack used included React Native, Node.js, Express, MySQL, Firebase, Firestore, and Cloud Functions.
What was the speaker's approach to organizing the codebase for the app?
-The speaker organized the codebase by using a folder structure that included navigation, stacks, hooks, services, components, assets, and config folders.
What did the speaker learn about Firebase during the development of the app?
-The speaker learned about Firebase's authentication, Firestore database, Cloud Functions, and how to integrate it with Redux using react-redux-firebase.
What advice does the speaker give to those looking to learn from their coding journey?
-The speaker advises to start and finish projects, learn from mistakes, and not be afraid to start over if the initial approach is wrong.
Outlines
🚀 Journey from Novice to Senior Developer
The speaker recounts their personal growth from a 30-year-old with no career to becoming a senior developer with a six-figure salary in under five years. They discuss an early career challenge of leading the development of a mental health app, which involved a tight three-month deadline to redesign and fully develop the product. The speaker emphasizes the importance of core app functionalities like authentication, chat, and profile management, and how these can be modularized to create different app experiences. They also mention the creation of a company called GB, which started as a mental health app and evolved to offer a variety of services including journaling, video chatting, and B2B app development.
🛠️ Building a Modular App with Firebase and React Native
The speaker dives into the technical aspects of building the app, highlighting the use of React Native, Node.js, Express, and MySQL. They discuss the transition to Firebase for its ease of use and fast deployment, and how they integrated Firebase with Redux using the react-redux-firebase library. The speaker shares insights on organizing a React Native project, including folder structures, navigation, and service organization. They also talk about the importance of documentation and how it aids in project clarity and collaboration with other developers.
💡 Insights on Firebase and Efficient App Development
The speaker shares their experience with Firebase, detailing its various services such as Firestore, Cloud Functions, and Authentication. They discuss the benefits of Firebase for app development, including its ease of use and the powerful features it provides. The speaker also touches on the potential cost implications of Firebase at scale and the importance of efficient data handling to minimize expenses. They provide a practical demonstration of how to interact with Firestore within an app, emphasizing the importance of clean code and modular design for maintainability and scalability.
🌟 Embracing Mistakes and Encouraging Continuous Learning
In the final paragraph, the speaker reflects on the learning process, emphasizing the importance of starting and finishing projects to gain practical experience. They discuss the value of making mistakes and learning from them, suggesting that it's better to 'reset hard' and change direction if necessary. The speaker also announces an upcoming JavaScript course aimed at beginners and experienced developers alike, covering topics from basics to CRUD operations. They conclude with an inspirational message, encouraging the audience to believe in their ability to learn and succeed in software development.
Mindmap
Keywords
💡Senior Developer
💡Authentication
💡Profile Management
💡React Native
💡Firebase
💡Serverless Architecture
💡Redux
💡Modularization
💡B2B (Business-to-Business)
💡TypeScript
💡CRUD Operations
Highlights
The speaker transitioned from having no career to becoming a senior developer with a six-figure salary in under 5 years.
The speaker discusses the most educational app they worked on early in their career.
The app was a mental health application that the speaker helped develop and later became the lead developer for.
The speaker had to redesign and rebuild the app within a 3-month timeframe.
The app was modularized to include features like chat, video chat, journaling, and profile management.
The speaker realized the importance of authentication, chat, and profile management in app development.
The app was expanded to offer services like video chatting with doctors and journaling to combat 'co blues' during the pandemic.
The company aimed to become a white label application company for mental health non-profits.
The speaker used Firebase and serverless architecture to streamline the app development process.
React Native, Node.js, Express, and MySQL were the initial tech stack used for the app's prototype.
The speaker learned about global state management with Redux and how to bind it with Firestore.
The speaker emphasizes the importance of code organization and documentation for collaborative projects.
The speaker created a boilerplate for serverless Firebase applications with React Native.
The speaker discusses the use of TypeScript in the project and how it helped in managing types.
Firebase's suite of tools, including authentication and Firestore, were utilized to build the app's backend.
The speaker shares insights on how to manage Firebase requests efficiently through global state management.
The speaker reflects on the importance of starting and finishing projects to learn and grow as a developer.
The speaker offers advice on not being afraid to make mistakes and learning from them in the development process.
The speaker announces an upcoming free JavaScript course for beginners and experienced developers.
The speaker concludes with an inspirational message, encouraging others that if they can do it, anyone can.
Transcripts
you know my story i r from a 30-year-old
with no career no money in the bank
account to being a senior developer with
multiple apps with many users for
different companies earning a six
figures annual salary in just under 5
years today we're going to talk about
the app that I learned the most from and
it was early in my career maybe when
after like 3 years I started programming
I'll give you a little backstory of what
the app was about so the story of the
app was that I was working at a software
development firm in sales and
development one of my clients was this
mental health application and so I set a
meeting and long story short I closed it
and I made the company some money right
and I programmed it to next he invited
me on to the team to be like the lead
developer and I was only three or four
years into my programming career so it
was very hard it was a big step up we
built the Prototype at the uh software
firm and then now he needed a fully
fledged working product and basically he
decided to redesign the whole app and uh
gave us 3 months to do it so it was uh
it was a challenge I got to building we
got the app done on time things were
going great but the CEO saw on
opportunity where we' build apps for
other NOS they really liked our app I
got to work and I started refactoring
and rebuilding the entire app and
separating all the features so I could
turn on and off the features to kind of
modularize the features to kind of make
it work here like some with chat some
without chat some with video chat some
without video chat some with journaling
some without journaling and you get the
point so through building this app
there's something that clicked in my
mind every app needs authentication chat
profile management these are like three
very important things that almost every
app does and and then it has some kind
of secret sauce like whether it be
journaling or video chatting or quizzes
or whatever it is in the end you're
always going to need authentication
profile management most likely 90% of
the time chat something clicked in my
mind just make those things really well
and then you can kind of get to the good
parts really easy and uh have fun and uh
so we built out an app and it had all
the features and I'll just show you the
website here uh called GB basically we
started out as a mental health company
during Co there was this thing going
around called the co blues and uh he
kind of like figured you know why don't
we make a journaling app where we can
and we'll have like this video chatting
with a doctor and it would be good but
then we had about us like wellness
Workshop that was like the video
chatting software Services community and
then he added this B2B section he wanted
this B2B section to build out apps for
other people he wanted to be like this
white label application company so an
all-in-one Tech partner for mental
health NOS so basically we built out all
these features show you down here uh
login so like authentication bio rhythm
tracking online video chatting uh text
chatting and chatbot online Journal mood
tracker self assessment test and uh GPS
enabled search and we kind of wanted to
use that not every app is going to need
all these right they could just choose
like five of these or three of these and
then make a whole app out of it there's
a little video of the app I'll just
share my screen we can look at the app
together this is the first app right
here it has like some scheduling
journaling mood tracking and you could
kind of see your weekly moods and
calendar and chatting and some kind of
chat bot and profile man management and
a whole bunch of just stuff that every
app is going to need it is in the App
Store I don't think you guys should
download it though I don't work there
anymore and with that app we did build
another app for this company called Napa
and basically we use that app to build
this app and it's in the App Store so
you see that it has a mood Journal
interactive dashboard and video chat and
um prompting cues M Journal so it's a
basically the same app just repackaged
with different logos different colors
and new design that's what I did and
I'll kind of show you how I did it
basically we went through the app you
know so what language stack and how did
I code it right we used uh react native
Community CLI and this was in like 2020
2021 and it was around 3 years or 3 or
four years into my uh career so when I
first built the Prototype at the
software development firm I was talking
about we just used react native nodejs
Express and MySQL that was it but uh
this is how I did it the first time but
having to redo it in the 3 months with
the new redesign uh I learned about
Firebase and serverless architecture so
I learned Firebase fire store fire based
Cloud functions and it was easy to use
and fast to deploy it was done in
node.js uh with Lambda functions and
react native and a big thing I'll show
you guys the code and the big thing I
learned was how to bind the fire store
with Redux with this Library called
react Redux Firebase it was really good
it saved me a lot of time and I think it
could add value to you guys I don't know
if people use it cuz people don't really
use Redux recently I had a good time and
it made very comfortable to use Redux I
just used this for the library it it
loaded up all the things into my fire
store from Redux that I needed I didn't
need to keep making calls and uh people
always talk about kind of like the uh
price of making requests over and over
again to fire store but you don't really
need to do that if you have a global
State Management there's like some code
to initialize the app and the user
profile cuz like you're not going to
keep asking for the profile over and
over again from fire store because
that's how you build up these requests
so you just stick that in your Redux and
if there's any changes you updated in
your Redux as it goes so that's kind of
what we did and I'll kind of show you
guys the code so this was the V1 we're
using storybook so we had a folder
structure like um and it taught me like
this code kind of like taught me a lot
about organization and how to set up
react native project you have like your
navigation you have your Stacks hooks
Services where your API calls go it was
uh it was very fun it was um interesting
and I had a big learning experience um
kind of working with uh other developers
trying to get this thing done it was
really good this was the first version
and I have something similar with like
the boiler plate that I wrote to make
like the other apps like I just showed
you with like Napa and everything else
I'll share the GitHub link with you guys
it isn't exactly the boiler plate that I
created at the company because it's not
my company it's not mine and but I use a
lot of that influence to build my own
kind of boiler plate like serverless
Firebase serverless architecture like um
fire store boiler plate with react
native that I used on my project for a
while I'll go to github.com I think it's
called react native burner in mind
here's like the folder structure so I
think you know a big thing about code
and when I was tasked to kind of redo
the app in a very you know lighter and
turn things off I learned about you know
how to organize my read me how to kind
of like organize everything in the
documentation so other people could help
me so I kind of wrote this documentation
you have the SRC folder I have my uh
assets and then I I would have my images
fonts and then um components and the
components would hold like the index.
TSX which would hold all my code that I
would import or export from there and
then if it had its own assets I put it
in there if I had something specific to
the Android or specific to the iOS I
would keep in those folders and then I
had my config and then the config of my
app like app config like uh server URL
language and all that kind of stuff and
uh it just showed me how to organize it
you guys can take a look I'll share the
link with you guys how I structured this
app it's not how I do it anymore but um
it was was uh it was a good one I
thought it was easy to use so a big part
of this right in the app config when you
go to SRC and you go to the config
folder in the app config I put all the
features right I put there's a pay mode
there's a language of the app and then
there's a story book if I wanted the
practice screen on or not uh if I wanted
chat in the app or not I could just pass
true or false and it would take away the
tab but button on the bottom Journal
true or or false and then chat extras
that I want to be able to let them
upload images or videos uh and I just
have to turn it true or false and then
the video I'll have to remove that if I
wanted video chat in there I'll just Pat
true or false and then I'd put some end
points in here this code helped me learn
a lot as in like um you could hide
things cuz on IOS and Android apps you
can't really look at the inspector or
anything so you can kind of just hide
things and people can't really see it so
I have my kind of index. TSX in The
Navigators and I would in the rout I
have my index. TSX and then I kind of
just uh hid stuff like if the config do
chat feature was on then then I would
show that this chat was in the app right
if uh the config dojour feature on I
would be able to kind of control you
know if the tabs were shown in the app
and kind of separate the logic so then
it was like its own app within the app
it really uh opened my eyes to kind of
like how to code clean and all that kind
of stuff so I did use Firebase in this
right so if you look at the package.json
of the app you'll see that I use a lot
of libraries in react native and uh
especially in the readme I kind of put
notes on how to install all the um
packages I was using so a big thing was
I kept on looking about it it's called
react Redux Firebase but maybe you know
what react is maybe you know what Redux
is but uh Firebase is a big one right
and it kind of ties it all in together
kind of um make the app have its own um
back end as a service or like
authentication so Firebase is a huge
huge SDK so software development kit
built by Google for authentication for
their nosql database for push
notifications for a bunch of things in
their in their Suite let's say right so
make your app uh the best it can be with
Firebase and generative AI this is just
added because they added some kind of
thing called Gemini but basically they
have a bunch of things like you can
deploy apps on here you can um do some a
lot of things right um You can do um and
it's used by a lot of big companies so
I'll just show you what it looks like in
the console so you got a Firebase
console and basically you can just turn
on um I'll just go to this react or the
burner basically it has a bunch of
products like app check app hosting
authentication and well look an end
to-end user identity solution under 10
lines of code that's you know it's super
powerful you have fire store it's almost
like just no well it helps you
store data and you can kind of um call
the fire store directly from your app
you have hosting you have functions like
Lambda functions and um basically the
only problem with it with it is that it
can get quite expensive if you have
thousands and thousands and thousands of
requests you know it's not hard to get
thousands thousands of requests if each
person is going moving here moving here
moving here and you have like a thousand
users and they're making a bunch of
actions on your app but basically you
have a firestore
database that you can kind of um
you can see the data you get a uid it's
very much like and you have like
chat requests um chat rooms you can
create your own
Collections and then you have basically
um
authentication which you can have here
and it stores uh authentication so you
don't have to store passwords and you
know create your o 2 uh strategies and
uh it taught me a lot because reading
through Google documentation Firebase
documentation you kind of learn how
software is supposed to be built you
understand the patterns that need to
happen within your um app to kind of
follow some kind of a readable format
and uh you know it helped me a lot
trying to like understand and piece
together you know react native and
Firebase because there's a lot of
documentation for it too it's not just
like I built it it's not like uh many
people use this deack and so maybe you
want to use something obscure or
whatever but you're not going to find as
many uh documentation but react native
Firebase uh Lambda functions you're
going to find many resources and it's
going to help you kind of um figure that
out as well so uh that was really good
for me because uh you got to see uh how
to store data and I'll show you how you
do that in the app right now I'll just
press a dot in
here I think that's a pretty cool
feature you can just press uh period in
the GitHub repository and it opens up
the uh Visual Studio code in the browser
that's a new feature from like four
years ago four years is not a new
feature but so basically you have like
um these screens right and you have like
uh so you maybe you'll have like a a
request or pending request
screen and you basically have these
hooks called like use Firebase and use
fir store and actually I never used
typescript before this project so I
learned how to use typescript during
this project as well so I had this um
component called chat
request and uh I use typescript so
extended Firebase instant extensive fir
store instance and you can kind of
see uh that it is a type from react
Redux Firebase that gives you things
like um fire Source set add and get and
then from there I would um I would get I
would say like add to this
um collections chat requests the uh the
empty requests of who it is and it would
be and then a status of pending and then
you'd kind of see that like pending
requests the first thing I do is um I
use State and then somewhere here I
remember I say get all the pending
requests from this person
and so here I think it is so get
firestore ref run transaction this was
kind of like my counter transaction in
case that something happened and I would
roll back the uh transaction from the
database and um you know it was it was
quite an eye openening experience kind
of getting to work on my own you know
and honestly it's right when GitHub
co-pilot came out so I was kind of
playing around with that a lot and it
was like a really fun pair programming
with uh AI at the time and I was
learning a lot and um oh here it was get
pending request so here we are I have my
get method from fir store so I say get
request from collection um chat requests
and I had my fire names here in my
contant my uh so everything was like I
was able to organize everything very
interestingly and um how other people
could read it and uh see right away and
the reason why I put my uh strings in
here where um I used to make a lot of
typos when I type so if I have my
variable names and auto completion it
helped a lot and here was my uh chat
request so I said basically
um wa request oh pending request sorry I
said get pending requests uh get
requests a wait get on the collection
chat requests where uh the key
participant uh contains
me and the key status equals pending so
there is nobody uh there is nobody that
touched like the accept or deny button
yet and then and then you get the
request pending so that are mine and
then um yeah basically the code was done
like in a very clean way as I thought at
the time there's many different ways to
do things but it was uh easy for me to
read and easy for me to navigate through
the code and um it was uh interesting
for me I'm not going to show you much
more code so this was something I
learned a lot like how to modularize
code how to separate things and how like
actually like there's one big big app
but then there's small apps within that
app that you can kind of uh separate and
kind of um use everywhere so like I
always say create your little treasure
test make things that you can keep
reusing and reusing and reusing and uh
it'll make your career like in software
development much easier yeah that was
something that was good one of the most
uh important things right is I started
and then I finished right so that
meaning I got to start you know with
there's nothing right well like I mean
there are like libraries and packages
but I have to kind of figure out how to
do it and then um I learned and then I
finished what I said I was going to
finish and through that I learned many
things right I learned how to um um you
know think about a problem think about
like the steps in order to like yes you
can send a chat request but then from
there what is going to happen and then
you kind of think about all the things
possibilities that are going to happen
from there so yeah like a suggestion to
the user or if you're you you watching
you can actually um write out your plan
and then actually not just start it but
finish what you say you're going to
start you know and you know I did make a
lot of mistakes mistakes are going to
happen and um don't be scared to like
run like uh get reset hard maybe not too
much you know like if you kind of get
too deep into like some kind of once you
understand the basics of JavaScript once
you get there you kind of make errors in
thinking right and if you start digging
a hole it's not like a reason of like
not knowing the language or not knowing
how to do it it's more like I was
thinking wrong let's roll it back and
then let's uh let's go a different way
cuz I always think about coding kind of
like this like uh I see other people and
they have like let's say I don't know
like a small little pen or a small
little pickaxe right uh trying to pick
away at the problem pick away at the
problem and you know you'll get the
problem done in a long time but
sometimes you need to go back in the
toolbox and then just kind of get that
sledgehammer and just break the wall
down right and it's um that's the kind
of thinking you have to have because
don't worry like if you have the pickaxe
in the beginning that's the wrong choice
in the beginning just go back and make a
better choice and uh fix the problem and
it doesn't matter you were wrong as long
as you fixed it that's that's like my
best advice for you yeah so like that's
it but uh you know like these are things
you're going to learn like uh through
projects and um there's a free
Javascript course coming up that I'm
going to uh teach and I think some PE a
lot of people signed up and I'm very
excited for it and um this is the uh
kind of uh JavaScript course I kind of
had it open on accident I didn't mean to
do it but uh here we are you know it's
going to be for beginners for kind of
experienced people we're going to go
through JavaScript HML CSS react basics
of react basics of get um do some uh
HTTP requests handling look through big
Jason objects look through arrays and
make some kind of crud uh create read
update and delete and um you'll
understand like every single app is a
crud to be honest
and um that meaning like like a Facebook
post you post you create a post you can
update a post you can delete a post you
have to get the post later so that's
something that I'm looking forward to it
and see you guys there and uh just
remember if I can do it you can do it
too coding saves lives
Ver Más Videos Relacionados
7 Лет Опыта в IT | Что я Понял?
React Native Mock Interview | Interview Questions for Senior React Native Developers
Telemetry Over Events: Developer-Friendly Instrumentation at American... Ace Ellett & Kylan Johnson
My framework when learning a new programming language
How I would approach gamedev (if I had to start over)
Sneha Nanandkar Final Reworked 3rd
5.0 / 5 (0 votes)