Web Developer Roadmap (March 2024) - Everything is Changing
Summary
TLDRThis video provides a comprehensive overview of modern web development, highlighting the latest trends and essential technologies for aspiring developers. It emphasizes the importance of AI co-pilots, TypeScript, Tailwind CSS, and Next.js with its innovative server components and server actions. The video also covers full-stack development, exploring front-end frameworks like React, Angular, and Vue, as well as back-end solutions like Node.js and Python. Additionally, it delves into databases, authentication, payments, hosting providers, and mobile app development. Overall, the video presents a roadmap for becoming a highly-skilled and well-paid modern web developer, capable of earning $10,000 per month.
Takeaways
- 🤖 AI co-pilots like GitHub Copilot have become a game-changer, enabling developers to write code more efficiently and focus on higher-level thinking.
- 📖 TypeScript has become mandatory for modern web development, especially in the React ecosystem, leading to more robust and maintainable codebases.
- 🌐 Next.js has emerged as a powerful full-stack framework with innovations like Server Components and Server Actions, simplifying the development of robust web applications.
- 🎨 Tailwind CSS has risen as the preferred way of styling websites and web apps, providing a utility-first approach to CSS.
- 🧩 Component libraries like Chakra UI and Radix UI have gained significant traction, offering pre-built, accessible, and customizable UI components.
- 🔐 Authentication and payment solutions like Clerk and Stripe have become essential tools for modern web development, simplifying complex processes.
- ☁️ Cloud hosting providers like Vercel and Netlify have made it easier to deploy and manage web applications.
- 📱 Frameworks like React Native and Expo have facilitated the development of mobile apps using web technologies.
- 🌐 Full-stack development has become the norm, with developers expected to work across a wider range of the technology stack.
- 🚀 The web development ecosystem is rapidly evolving, requiring developers to continuously learn and adapt to new technologies and best practices.
Q & A
What is the biggest innovation mentioned in modern web development?
-According to the script, the biggest innovation mentioned is AI co-pilots, which can suggest entire code snippets and help developers reason at a higher level of abstraction.
Why has TypeScript become mandatory in web development?
-The script states that TypeScript has completely broken through in the world of web development, especially in React, and has become mandatory to learn if one wants to become a full-stack web developer. It enforces more precise types, resulting in more robust code.
What is the significance of the Next.js App Router and Server Actions?
-The script highlights that Next.js has released its App Router, which includes Server Components and Server Actions as major innovations. Server Actions are considered the biggest innovation, as they allow developers to write backend code directly within Next.js, replacing the need for separate API endpoints.
How has Next.js impacted the development of full-stack applications?
-According to the script, Next.js has made it very easy to create full-stack applications by abstracting away many complexities and providing a unified framework for both the client and server sides of web development.
What is the recommended approach for styling websites and web apps?
-The script states that Tailwind CSS has completely taken over and has become the default way of styling websites and web apps, especially in Next.js.
What is the role of React Query in Next.js applications?
-The script suggests that in Next.js applications, data fetching should be done differently, using Server Components instead of React Query, which is more commonly used in React applications.
What is the recommended approach for managing state in React applications?
-The script mentions that while the Context API and Zustand are gaining popularity, Redux was previously a common choice for state management in React applications. However, the script suggests that the Context API and Zustand are becoming more popular choices.
What is the purpose of Zod in web development?
-Zod is a library mentioned in the script for validating data, both on the server-side (e.g., in Server Actions) and on the client-side (e.g., in forms). It helps ensure that the data received from the client matches the expected shape.
What is the recommended approach for authentication in modern web development?
-The script suggests using third-party authentication solutions like Clerk (formerly called IdentityKit) instead of open-source solutions like NextAuth.js, as they provide a better developer experience and handle authentication properly.
What is the significance of AppMysite mentioned in the script?
-AppMysite is mentioned as a sponsor in the script. It is a service that makes it easy for developers to convert their websites into mobile apps for Android and iOS platforms, allowing them to publish their websites as native mobile applications.
Outlines
📺 The Significance of AI Copilots and TypeScript in Modern Web Development
This paragraph highlights the major innovations in modern web development, particularly the emergence of AI copilots and the widespread adoption of TypeScript. AI copilots are advanced tools that can suggest entire code snippets, making it easier for developers to focus on higher-level abstractions. TypeScript has become mandatory, improving code robustness through precise type declarations. These advancements have greatly enhanced developer productivity and code quality.
🌐 The Emergence of Next.js and Server Components
This paragraph discusses the rise of Next.js and its innovative features like the App Router, Server Components, and Server Actions. Next.js has become a powerful full-stack framework, enabling developers to create complete websites and web applications with React. Server Components and Server Actions simplify the development process by handling server-side tasks within the Next.js framework, eliminating the need for separate API endpoints. This has resulted in performance benefits through caching and a more streamlined developer experience.
⚡️ Static Site Generation (SSG) and Server-Side Rendering (SSR) in Next.js
This paragraph explains the concepts of Static Site Generation (SSG) and Server-Side Rendering (SSR) in Next.js. SSG generates HTML during the build process, enabling fast delivery from a CDN. SSR renders content on the server during request time, allowing for dynamic content. Next.js can also perform Streaming and Suspense, rendering individual components on the server and streaming them to the front-end. These techniques provide performance benefits and enable a more flexible approach to rendering content.
🔧 Exploring the Web Development Ecosystem
This paragraph discusses the broader ecosystem of tools and technologies surrounding modern web development. It covers component libraries like Shadcn/UI and Radix UI, form handling with React Hook Form, data validation with Zod, animations with Framer Motion, authentication solutions like NextAuth.js and Clerk.dev, payment providers like Stripe, hosting platforms like Vercel and Netlify, version control with Git and GitHub, and mobile app development options like React Native and Expo. Understanding and leveraging these tools can greatly enhance the development experience and functionality of web applications.
🚀 Mastering Modern Web Development for a Lucrative Career
The final paragraph emphasizes the importance of staying up-to-date with the latest innovations in web development to secure a lucrative career as a developer. It encourages learning the fundamentals of HTML, CSS, JavaScript, and frameworks like React, as well as exploring full-stack development with Next.js. The paragraph also mentions the author's React and Next.js course as a resource for mastering these technologies. Overall, it highlights the exciting pace of innovation in web development and the potential for career growth by embracing new tools and techniques.
Mindmap
Keywords
💡AI co-pilot
💡TypeScript
💡Tailwind CSS
💡Next.js
💡Server Components
💡Server Actions
💡Static Site Generation (SSG)
💡Server-Side Rendering (SSR)
💡Chakra UI
💡Zod
Highlights
The biggest innovation has been AI co-pilots that can suggest entire code snippets, reducing the need to memorize low-level details and enabling reasoning at a higher level of abstraction.
TypeScript has become mandatory for web development, especially in React, providing robustness and precision through type checking.
Tailwind CSS has taken over as the default way of styling websites and web apps, including in Next.js.
Next.js has introduced server components and server actions, allowing traditional backend code to be written within Next.js, simplifying the development process.
Server actions are a significant innovation, eliminating the need for separate API endpoints and allowing server-side functionality to be written as normal JavaScript functions.
React Query is no longer necessary in Next.js, as data fetching is now done in server components.
The trend is moving towards full-stack web development, where developers work across a wider range of the stack, enabled by frameworks like Next.js.
For learning web development from scratch, the recommended path is to start with React, learn components, hooks, state management, and styling with Tailwind CSS.
Next.js is recommended for full-stack development, leveraging its built-in routing, server components, server actions, and patterns like SSR and SSG.
For separate backend services, Node.js with Express or Nest.js are popular choices, but other languages like Python, Java, Ruby, and Go are also options depending on the project's needs.
The differences between SQL and NoSQL databases have been abstracted away by ORMs like Prisma, Drizzle, and Mongoose, making the choice less critical unless there are specialized needs.
The ecosystem includes tools like Chakra UI for component libraries, Zod for data validation, React Hook Form for form management, Framer Motion for animations, and third-party solutions like Clerk for authentication and Stripe for payments.
Vercel (formerly Zeit) is the most popular hosting provider, especially for Next.js applications, though other options like Netlify are available.
For mobile app development, AppMySite is a sponsor that simplifies the process of converting websites into mobile apps for Android and iOS.
The landscape of web development is constantly evolving, with exciting innovations and changes, making it a dynamic and rewarding field for developers who keep up with the latest technologies.
Transcripts
everyone everything in web development
is changing and for your career as a
developer it's really important that you
understand what's going on and what new
things to learn and what not to learn so
I'm going to give you a high level
overview of modern web development with
all the things that you need to know
right now so you can make $110,000 a
month as a modern developer so let's
start from here because a lot of things
have actually changed in the past year
or so so I would say the biggest
innovation has been these AI co-pilot
and these are so good I have to say just
to give an example here I have a new
hook here use optimistic we're using
this in my pets soft project in my
reacting nexj ESC course you can see it
knows exactly what I want to do here it
can suggest the entire code snippet here
for me now it does miss the default gear
case here at the bottom but you can see
fix that very easily right so thanks to
these AI co-pilots I can sort of forget
about a lot of those lower level details
and I can reason more in a higher level
abstraction about my code huge change
and it makes it less important to
memorize a lot of things and algorith
rhythms another major change is actually
typescript now typescript has been
around for a long time but in the world
of web development especially react I
would say the past year it has
completely broken through and now it has
become sort of mandatory whereas before
it was kind of optional you would see it
around but now I see it everywhere and
it has become yeah in my view it has
become mandatory to learn if you want to
become a fullstack web developer till
when CSS in my view has also completely
taken over of course it's been around
for a long time but now it's also the
def default in nextjs and in my view
it's going to become the default way of
styling websites and web apps now
another huge innovation of course is
nextjs nextjs has released their app
router so before they had the pages
router but there's lots of innovation
here it's not just server components in
my view actually server actions are the
biggest Innovation yes there is a bit of
a learning curve but in my view it's the
right way forward and it actually makes
it a really exciting time in my view to
be a web developer because now with
nextjs and actually all of these tools
together it makes you very powerful as a
developer it makes it very easy to
create full stack applications so I
think it's a really exciting time yes
it's annoying that as a you know
experienced developer you have to learn
some new things again especially
typescript was kind of annoying to learn
a lot of people went through it last
year it's basically a month or two
months of struggling and then you kind
of get it but that's part of the job the
benefit of being a junior or newcomer is
that you can go straight to the latest
Technologies and you can sort of skip
ahead you can leap frog over the maybe
the more senior developers that are
still kind of stuck with the old
technology right so that's the one
advantage you have as a newcomer so how
would I learn web development if I were
starting from scratch I want to make 10K
a month let's say that's what I'm going
to show you right now in this video
let's go through it so you're going to
learn all about how to build modern
websites now what about apps Progressive
web apps haven't really broken through
yet people don't want to add something
to their home screen they want to
install a native app from the App Store
so how do you do that how do you convert
a website to a mobile app well you could
do it yourself but it's very painful so
instead you may want to take a look at
today's sponsor which is app My Side
they make it very easy for you to turn
your website into an app so you can
connect you can just provide your url
you can change the design and you can
then publish it to the Android and iOS
App Store so in the dashboard I can
create my app here I can call it B grad
and I already have my website right it's
bat.com I can convert it into a mobile
app very easily here with at my site so
here in the dashboard I can add an app
icon right here I can change the the
splash screen which is what you're going
to see when you open up an app for a
couple seconds on your phone here in
navigation I can change that top bar and
Bottom bar color I can change the buttom
colors right here and then of course you
want to test and see what you get on a
real mobile app you can download this on
your phone or right here in the web view
I can press on click Start and it will
show you how it will look like so here
you can see it's loading up my website
right here in this mobile phone this is
what it's going to be right here my
latest scores let's take a look right so
you can see it renders this very nicely
and it also gives me analytics out of
the box so I would say check out at my
site the link is in the description all
right so then let's actually take a look
at what you need to learn and so
traditionally you would specialize in
either front end or back end my view is
that over time it's going to merge
together in full stack web development
because a lot of the difficult Parts on
both sides are being abstracted away for
you right nextjs makes a lot of things
easy for you so over time as a developer
you're going to work across a wider
range of this deack in my view now
regardless of what you're doing in web
development you're going to have to
learn the fundamentals I'm not going to
list every little thing you need to know
a lot of those things you will learn as
you go so for HTML basically you have to
take a look at semantic tags don't just
use divs everywhere try to use a section
sometimes an article all right so then
CSS is really important even if you want
to learn tillin CSS make sure you master
CSS itself first very important the Box
model so every element on a page let's
say this button here has a so-called Box
model and you can actually see it here
in the dev tools so you can see it it
has some of its own size basically this
is coming from the text actually in
there and how big the text is and then
around there you have padding and around
there you have a border a border may
have a certain size it doesn't have a
border here but that would add some
additional space and then you have
margin which is essentially space
between elements right that's the Box
model every element on a page has this
sort of rectangular box now to have a
nice layout you want to take a look
mostly at Flex box you want to use a
flex box I would say 99% of the time
sometimes you want to use grid so I
think you should still learn it as well
but flexbox should be your priority when
it comes to layout animations and
transitions so you can see here in this
app I'm using eraser here when I hover
this button here there's a slight
background color that changes that's
actually just a transition and animation
for example when I go to this page you
can see when I load here I have a bit of
a fancier animation here to load this
image I would probably do that with an
actual animation in CSS also make sure
your project need to look good across a
wide variety of devices and we can do
that with media queries in CSS all right
so for JavaScript of course you need to
know about variables you want to store
some value somewhere in order to work
with it these days we use let and G
previously we used far people have kind
of settles on using const as the default
unless you cannot use const because you
actually need to reassign a value for
example in that case use a Le basically
we never use far anymore whenever you
have a collection or list of things you
want to put it in an array and these
arrays they have certain methods right
so map for example in react is very
common for each you want to go over each
one right push you want to add something
these methods I think are important to
learn so then we have objects so
whenever you need to represent something
in your code you can have an object
that's an object may be for example on a
real estate website you may have an
apartment and apartments they need to be
represented by an object so they may
have let's say some size like square
meters or square feet they may be price
for them right maybe number of bedrooms
right so this object represents an
apartment we use objects to represent
entities in our code in JavaScript we
have Arrow functions new compared to the
traditional function right so now you
don't have to write the actual function
keyword anymore instead you sort of have
a fat arrow in the middle here here
whenever you need to reach across the
network to get some data for example you
may want to use the built-in fetch API
so you need to understand how that works
it actually gives you a so-called
promise you need to learn asynchronous
code in general as well you don't have
to create promises yourself typically
typically you only consume promises so
if you have a promise that's called p in
order to get its value essentially to
consume it traditionally you can use
then on there and then in there you get
the value or more recent is you can
write a weight in front of a promise
right so those are essentially the two
ways of consuming a promise typically
acing weight is preferred these days and
also generally you need to learn about
the Dom itself right the in the Dom
there are certain events when I click in
here you can see there's a blue line
here so eraser this is a web app it's
hooking into that click event that
occurs when I click there and it's
manipulating the Dom to add like a blue
line in here and generally you need to
learn a little bit about the web
platform with things like local storage
how URLs work how to communicate with a
server Etc around all right so those are
the fundamentals now I want to emphasize
don't get stuck too long in here it's
okay if you don't fully understand some
things I would recommend that at some
point you just have to jump into it and
you're going to have to learn a library
or framework to really become like a
useful developer so let's say we're
going to start off with the front end
here we're going to learn about react
there are also other options which I'll
talk about but react is probably the
most popular one if you want to create a
react app typically these days you're
going to use a feat this is essentially
replacement of create react app so for
react you need to learn about components
right so a component is just well let's
say I have some patform button component
it's actually just a JavaScript function
and we write it with capital case so now
whenever I need some button in my
project I can use this component I don't
have to repeat myself with the markup I
can put all the markup inside this one
component and then just reuse the
patform button whenever I need that
button but how can you make it different
in a certain instance well let's say I
need to change the text in here right so
sometimes it needs to say add pads and
sometimes I'm changing a pad and it
needs to say save changes how can I make
sure that a component can also be
changed I can use props here and
destructuring that right here and I can
use that here to change the component in
a particular instance react has
so-called hooks so if you have a piece
of data and you want to track of it over
time you want to use use State sometimes
you need to go outside your react app
maybe you need to reach out to some
server or maybe you need to reach out to
local storage right local storage that's
something outside your react app
typically you want to use user effect
for that custom hooks sound very fancy
it's basically just like a utility
function instead of writing your use
stes and use effects let's say here in
your component you can sort of put it
away somewhere else and that's what
people will call a custom hook so if you
have a piece of data you typically start
off by just using you state for that but
it's very common that you will need that
piece of data in many different
components and you can use props to pass
that around unfortunately it will make
your app too brittle so you want to put
that piece of State in a dedicated
solution a date management solution
sounds very fancy but you can use the
built-in context API in react for that
um or something called twoand or
something called Redux these are
typically the most popular options now I
have to say my view on this is that the
context API and two stands are getting
more popular I actually teach quite a
lot of people about react and nextjs in
my react and nextjs course and I have
not received one question about Redux so
far so you can take that as a simple
data point I actually think Redux is
fine to use one of the benef benefits of
it is that it has a more sophisticated
Dev tool but purely looking at usage it
does seem that two and the context APR
are getting a little bit more popular
for styling I would only go for til and
CSS at this point and then of course you
also need to know about common patterns
and best practices so you want to make
sure that your components for example
are reusable there's certain things you
can do and also things like state in the
URLs so a piece of data should not
always go in US state sometimes it's
better to make it part of the URL as
let's say a search per RAM for example
real estate website I only want to see
houses below a million dollars let's say
I can make that part of the URL and now
the user can bookmark it can and they
can come back later and get the exact
same view they can share it with other
people and they get the exact same view
and so some pieces of data should go
into the URL most commonly filter or
sorting parameter so that's all react
now what about things like routing for
example well routing I would argue is
going to come from a full stch framework
like nextjs which we'll talk about in a
second and same thing for react query
maybe you've heard of react query that
is basically how I would do data
fetching in a reactive feat app but in
nextjs I would do data fetching a little
bit differently I would do it in a
so-called server component so I wouldn't
use react query in next we'll talk about
it in a second all right so this is all
react now of course besides react which
is backed by meta there is also angular
which is backed by Google and there's
also few and swell these are the most
common options you have for the front
end now notice that I haven't really
talked about typescript yet so
typescript I would say is kind of like
mandatory it's it forces you to be much
more precise with your types which
results in much more robust code but you
don't really have to learn it separately
I would argue as an app developer you
can just enable it in your react apps
and TP skits can already do a lot of
inference right so it can already detect
when something is going to be a string
or a number or a Boolean you don't
really have to specify that very often
yourself I have a video on my YouTube
channel about type versus interface make
sure you check it out a more advanced
concept is generics in react you're most
commonly going to see that when you
create a custom hook that's what I would
do if if I was learning the front end
now like I said I think the trend is
going to become that you as a developer
you're going to work along a wider range
of the stack so I think the focus these
days should be on becoming a full stack
developer so that means now we also need
to take a look at the back end so if
we're going to use react you definitely
want to take a look at nextjs so nextjs
has built-in routing through the file
system so depending on how you structure
your folders and files that's how you do
routing essentially and nextjs these
days offers server components and server
actions so a lot of the traditional
backend code that you would have in
let's say a nodejs Express server a lot
of that is now going to be written in
nextjs in your server components or
server actions and actually a lot of it
is going to be in these server actions
so traditionally if you had a web server
you would have let's say an API end
point to update some data well you're
going to use a server action for that
now and for getting data typically
you're going to do it in a server
component right so next yes is a full
stack framework you don't need a
separate back end you can now create
complete websites and web apps with just
nextjs with just the react model which I
think is very powerful nextjs does a lot
of caching for you behind the scenes so
that results in some performance
benefits so I would say by the way
server components are mostly also for
performance benefits and server actions
I would say is more of a developer
benefits right so you don't have to
create those separate you know/ API end
points anymore and then hook it up with
the front end you can just create a
normal JavaScript function and it's only
going to run on the server that's
basically what a server action is I
would also take a look at more General
the concepts of SSR and SSG they come up
quite often and they're actually quite
similar so static site generation SSG
basically it just takes your components
together and it just creates HTML out of
it during build time you can put it on a
CDN so then when somebody comes to your
website it's very fast because it's
already there waiting for them and it's
just it's just creating HTML out of your
react components so next ja has is
really page focused so you create a page
and then on the page you have components
so nextjs will actually automatically
create HTML out of that whole page with
all of the components that are on there
whether it's a client or server
components it's all going to render that
during the build into HTML and then it
will serve it from a CDN so SSR is
actually very similar it's also going to
render things on the server but when
people say SSR they don't mean during
the build it's during a request time so
when I go to website it's not already
waiting for me like with SSG as I make
that request it needs to render things
on the server and then it will send me a
response so it's more on the Fly and it
can do that not just for the whole page
but next JS can do that for an
individual server component right
independently from the rest of the app
it can render a component by itself on
the server and then stream it to the
front end that's so streaming and
suspense that's a very powerful Paradigm
in nextjs but that's handled for you
behind the scenes mostly all right so
nexts we also have patterns and certain
best practices like data fetching things
like data fetching have changed you
typically don't use react quer for that
anymore you typically would do that in a
server component when you submit data
you're going to submit it to typically
to a server action and we want to make
sure that we validate that data that we
get just like with the normal API end
point because you don't know what you're
going to get from a client right so you
want to validate that with something
like Z now since nextjs is a full stack
framework and they abstract away the
network boundary for you it's kind of
easy to leak sensitive data so there are
certain ways of avoiding that right so
that's nextjs nextjs is a react
framework there are other react
Frameworks as well so nextjs is actually
backed by forell and there's also remix
which has been acquired by Shopify so if
you're in the e-commerce space this this
is definitely something to take a look
at there's also asro which uh seems to
specialize more in content websites and
there's also GSP which is backed by
netlify but I do sense that this is a
bit on the decline in terms of user but
that's all react right so that's all
react now besides react we also saw that
we have angular view spelt they all have
their own full stack Frameworks as well
right so we have n for view angular
Universal and spelt kit as well all
right so those are full stack Frameworks
meaning client and service site are are
both in one framework so doesn't mean
that you never need to create a separate
backend server anymore and the answer is
no you actually often still need it so
for example I was building a startup
last year and it had to do some video
rendering rendering videos on the server
that's a very resource intensive task it
makes sense to spin that out of your
main nextjs app into a separate surface
or separate back end so it doesn't
interfere with any of the standard
things going on essentially right so
whenever you have some kind of compute
heavy or special task I think it makes
sense to spin that out into a separate
back end now of course you may also work
with some kind of microservices
architecture where you have essentially
a bunch of separate Services all little
backend apps and you can use any kind of
language for that right so the benefit
of noj s is that you already learn
JavaScript and typescript from the front
end you can then use that for the back
end as well nodejs is the most popular
one there's also something called bun
but I do feel like nodejs is uh here to
stay you can create API end points um
easily doable with something called
Express but also nestjs are common
options uh PHP is very popular in the
world of Wordpress actually it's it's
popular all around but I would say if
you're doing WordPress work this is
definitely something to take a look at
larel is a popular web framework for PHP
I just sneaked in Python here as well
python has become actually very popular
because of data science so now with all
the AI machine learning that's where
python comes in so if you are close to
the data science type of world this is
definitely something you want to take a
look at it has D Jango as a popular web
framework Java is very popular in
Enterprise also used for mobile apps
Android and spring is the web framework
there Ruby is also an option they have
Ruby on Rails and I also see go a lot
these days so these are some common
options you have for your separate
backend services or apps all right so
then for databases people would
traditionally split them up uh sequel
databases and then on the other side you
had no SQL databases now my sense is
that the the big differences between
them have been abstracted away for the
most part mostly through these so-called
OMS so typically as a developer you
don't deal directly with your D basis
you're going to do it through an omm as
it's called so something like Prisma or
drizzle very popular on YouTube or
mongoose and they have abstracted away a
lot of the differences between these
databases so for example I can just
interact with Prisma and then no matter
what database I use whether it's in
postgress or mongodb the code is
essentially going to be the same for me
so I don't think it makes a huge
difference which option you go with
unless you have some specialized need
like certain performance or or storage
issues some of those differences may
actually come into play now I do get a
sense that SQL light is uh growing very
fast because it's probably the easiest
one to set up it's just a file that's
essentially just part of your app it's
not like a separate server you have to
spin up it's just a file it does require
access to the file system and that
that's a problem for if you deploy to a
so-called serverless uh platform like
for sale where your whole app
essentially becomes a bunch of
serverless functions you don't get
access to the file system so you cannot
use SQL light but it's possible that
there will be solutions for that there
are also popular what I call hosted
database services so they host the
database for you so superbase for
example is just a postgress database but
they host it for you and they offer lots
of other services out of the box as well
same with Firebase and for sale now
these days actually also offers a
database service so that's databases I
typically during development go with SQL
light because it's the easiest to set up
depending on where I host my app I may
have to change it to a let's say a
postgress database so if I deploy to
forel for example I'm going to use their
database service and they actually give
me a postgress database in production
all right so that's basically the core
of it so if you learn most of that
you're already very far along but it's
also important in my view that you learn
the Eco system so there are many Tools
around the core that solve specific
problems so shaty nuui has actually
exploded in the past year or so and I
think it has a great shot of becoming
like a default component library for the
web it's basically a thirdparty set of
components but it's a little bit
different than the traditional ones
because traditionally you would use mpm
install and then you would not really
get the source code of the component you
would get a third- party component and
then if you want to change the component
you had to use their their props now
with Chad CN it's a little bit different
so with Chad CN for example if I get the
dialogue here when I install this I get
sort of like the source code so I can
literally change anything I want here
customize it exactly how I see fit and
not with only the props that the that
the third party Library gives me I can
literally change everything now the
reason you want to use a third party
library in the first place is because it
removes a lot of hassle right so for for
example with a dialogue when you open it
up you want to focus the first input in
here let's say when I press tab I'm
going to change the focus around here
but notice that the focus is trapped
within the dialogue here and so shatan
actually prevents the focus from going
outside the dialog into let's say this
input field uh in the background so
there are many little details a lot of
accessibility things that you have to
take care of and actually a lot of that
work has been done by radex UI so Shan
is built on radex so radex actually
deserves a lot of credit as well Shad CN
is basically a tailin CSS layer over
Radix UI so that's a very powerful
combination so I think this is one of
the big innovations that we've had over
the past year as well actually so
there's also something called Zod so we
talked about data on the server side
let's say so there some incoming data
into your server action it's just like
an API endpoint you don't really know
what you're going to get from the front
end people can send all sorts of crazy
data in which shape which format and to
your server so you want to validate that
what you get is of the shape that you
expected to be I have a complete
tutorial on my YouTube channel you can
do that with zot and the cool thing
about zot is you cannot only do it on
the on the server side you can also do
it on the front end with your forms so
you may want to use react hook form to
control your forms makes it very easy to
deal with let's say a loading State and
error States in your form and you can
connect Z to your forms as well so that
Z can be responsible for the validation
and then with react to form you can
easily uh do everything else like
displaying an error message for every
particular field of the form so the
combination here is very powerful and
actually you can even use chn because
chn also has components for forms the
first three here are actually super
powerful combination frame or motion
very popular for animations instead of
using plain CSS animations you may
actually just decide to use frame or
motion for pretty much any animation
you're going to do all right so for
authentication there is an open source
solution called next off a lot of people
are a little bit frustrated with it
because it's the docks and it's just not
a great developer experience right now
and you may actually also want to take a
look at third party options for
authentication so I'm I'm actually a
brand ambassador for kind it is a paid
sponsorship but even if they weren't
sponsoring me I would still use kind
authentication is just difficult to do
properly and a third party solution has
thought about how to do it and it's also
easier to get started in my experience
so I personally would use kind for
authentication all right so for payments
tribee is pretty much uh the most
popular option kind is actually also
coming out with a payment solution soon
which is actually really powerful
because often when a user pays they get
access to some feature right so the
payment is actually closely related to
user management and the roles and
permissions they have so with kind you
can manage your user including any kind
of subscription or payment related logic
very soon with their new offering all
right so you want to take a look at
hosting providers my channel is mostly
focus on react and nextjs so forell is
pretty much the most popular option
because they are actually backing nextjs
I do get the sense in general that forel
is getting more popular than the other
options so netlify for example is
another option my personal sense is that
forel is getting more and more popular
so maybe that's a platform you want to
take a look at of course git and GitHub
so git is for managing your codebase and
GitHub is basically place to host your
git repository there's also gitlab and
some other options all right so then
mobile apps the sponsor of this video at
my site actually makes it super easy to
build mobile apps so that's something
you want to take a look at first if you
want to go down the rout of doing it
completely yourself there is some
Innovation here as well with react
native and Expo actually so there is
some Innovation there as well that you
may want to take a look at if you sign
up for my email newsletter I'll send you
the link to this diagram so you can take
a look at this yourself I know this is
overwhelming there's a lot to learn uh
but you just have to take it one day at
a time and you'll see that in a couple
months you can get pretty far now I have
a complete react and nextjs course in
which you will learn pretty much
everything here so check that out if you
want to master all of these go check
that out I'm Wesley by the way I'm a
brand ambassador for kind and then I
hope that this gave you a good high
level overview of where we are currently
at in web development I think it's a
really exciting time there's lots of
innovation lots of things are changing
but if you keep up things are only
getting better so thanks for watching
and I hope to see you next one bye
Посмотреть больше похожих видео
Tổng hợp Full Lộ Trình và các Công Nghệ Web nên học năm 2024
My Complete Tech Stack For Full-Stack development - 2024
Fastest way to become a Web Developer in 2024
Complete MERN Stack Developer Roadmap For Beginners (2023)
Profitable Web Developer RoadMap - Step by Step | Freelancing, Jobs & AI in Web Development 🔥
100+ Web Development Things you Should Know
5.0 / 5 (0 votes)