the coding project that improved my skill the most (senior developer, no cs degree)

Summary

In 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

00:00

🚀 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.

05:00

🛠️ 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.

10:00

💡 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.

15:03

🌟 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.

Keywords

💡Senior Developer

A senior developer is an experienced software engineer who has typically progressed through various stages of software development, acquiring advanced skills in programming, system design, and project management. In the video, the speaker transitioned from having no career to becoming a senior developer, indicating a significant professional growth. This role often involves mentoring junior developers and taking on complex tasks within software projects.

💡Authentication

Authentication in the context of software development refers to the process of verifying the identity of a user or system. It's a critical component for securing applications, ensuring that only authorized users can access certain features or data. The speaker highlights the importance of authentication in app development, suggesting that it's one of the foundational elements required for almost every app, as it pertains to user security and data integrity.

💡Profile Management

Profile management involves the functionalities within an application that allow users to create, edit, and manage their personal information and settings. The speaker mentions profile management as a common feature in apps, which could include updating user details, changing preferences, or managing privacy settings. This is essential for personalization and user engagement within applications.

💡React Native

React Native is a popular framework developed by Facebook for building mobile applications using JavaScript and React. It allows developers to create native apps for iOS and Android platforms. The speaker used React Native in the development of the app discussed in the video, which exemplifies the use of cross-platform development tools to streamline the process of building apps for multiple operating systems.

💡Firebase

Firebase is a platform developed by Google that provides various backend services such as databases, authentication, hosting, and cloud functions. It is designed to help developers build, improve, and grow their apps. The speaker learned Firebase in the context of the app development, utilizing its services like Firestore for the database and Firebase Authentication for user verification, which underscores the reliance on robust backend services for modern app development.

💡Serverless Architecture

Serverless architecture is a cloud computing execution model where the cloud provider dynamically manages the allocation and provisioning of servers. The speaker mentions learning about serverless architecture, particularly in the context of using Firebase functions, which allows for writing code that runs in response to events without the complexity of building and maintaining a server.

💡Redux

Redux is a predictable state container for JavaScript applications, often used with React for managing the application's state in a more predictable and centralized way. The speaker discusses binding Firestore with Redux using a library called react-redux-firebase, which indicates the use of Redux for state management in the app, helping to streamline data flow and make the application more maintainable.

💡Modularization

Modularization in software development refers to the practice of breaking a system into smaller, independent, interchangeable modules. The speaker talks about modularizing features in the app, such as chat and journaling, to make it customizable for different clients. This approach enhances reusability and maintainability of code, allowing for more efficient development processes.

💡B2B (Business-to-Business)

B2B refers to transactions or relationships between businesses, rather than between businesses and individual consumers. The speaker mentions a B2B section in the app, indicating a part of the business model that involves providing services or products to other businesses, such as white-label applications or tech partnerships for mental health organizations.

💡TypeScript

TypeScript is a superset of JavaScript that adds optional static types to the language. It is often used in large-scale applications to improve developer productivity and code quality. The speaker learned TypeScript during the project, which suggests an adoption of a statically typed language to enhance the robustness and scalability of the app's codebase.

💡CRUD Operations

CRUD is an acronym for Create, Read, Update, and Delete, which are the four basic functions of persistent storage. The speaker implies that understanding CRUD operations is fundamental to app development, as most apps involve managing data through these operations. This is a common theme in software development, where the ability to manipulate data effectively is crucial for building functional applications.

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