My Complete Tech Stack For Full-Stack development - 2024
Summary
TLDRIn this video, a seasoned software developer shares their tech stack for full-stack web development. They primarily use React with Next.js for the front end, citing Next.js's powerful features like server-side rendering. For the back end, they favor PHP and MySQL, preferring API-driven development for scalability and flexibility. Hosting is done through Vercel for front-end apps and Hostinger for the back end. The developer also discusses using Tailwind CSS, Font Awesome for icons, Firebase for real-time updates, and AWS S3 for storage, while stressing the importance of experimenting with different frameworks.
Takeaways
- đ» The speaker is a full stack developer with experience in both mobile and web app development.
- âïž For front-end development, the speaker primarily uses React and Next.js, praising Next.js for its enhanced features like server-side rendering and app routing.
- đ Although the speaker uses React and Next.js, they suggest beginners experiment with various front-end frameworks like Vue.js, React, and Angular before choosing one.
- đ For back-end development, the speaker prefers PHP with MySQL due to their familiarity with it and the native support for SQL queries in PHP.
- đ The speaker follows an API-driven development approach, allowing flexibility to reuse API endpoints across different platforms, such as web and mobile applications.
- âïž Hosting for front-end apps is done using Vercel due to its ease of deployment, while Hostinger is used for back-end services with PHP and MySQL.
- đ For authentication, the speaker has switched to using NextAuth.js, simplifying the process with support for social logins and session management.
- đĄ The speaker recommends Tailwind CSS for front-end styling, as it saves time by avoiding unnecessary CSS code.
- đ„ Firebase is primarily used for real-time communication in the speaker's apps, particularly for email verification and real-time updates.
- đšâđ» The speaker emphasizes the importance of trying out different tools and frameworks to find what works best, advising developers not to limit themselves to what others recommend.
Q & A
What tech stack does the speaker primarily use for web app development?
-The speaker primarily uses React for the front end and Next.js as the framework for web app development. On the backend, they use PHP and MySQL, following an API-driven development approach.
Why does the speaker prefer Next.js over plain React for web development?
-The speaker prefers Next.js because it supercharges React with additional features like server-side rendering, app routing, and server actions, while still being heavily based on React. The transition from React to Next.js was smooth, according to the speaker.
What front-end frameworks does the speaker recommend for beginners?
-The speaker suggests that beginners experiment with different front-end frameworks and not just choose one based on recommendations. However, they mention that Vue.js is the easiest to learn, followed by React and then Angular, which has a steeper learning curve.
Why does the speaker prefer PHP over Node.js for backend development?
-The speaker prefers PHP because they were exposed to it before Node.js, and it feels familiar. Additionally, PHP natively supports SQL connections and queries, making it more straightforward for database-related tasks compared to JavaScript, which requires third-party packages to communicate with SQL databases.
What hosting services does the speaker use for their front-end and backend applications?
-The speaker hosts their front-end applications on Vercel, which integrates seamlessly with Next.js and GitHub for easy deployment. For backend services, they use Hostinger, which provides PHP hosting and a free MySQL database.
What benefits does the speaker find in API-driven development?
-The speaker values API-driven development because it allows for reuse of the same API endpoint across different applications. For example, they can build a mobile app in the future that uses the same API as the web application, making integrations with other services like Slack or Discord easier.
What authentication methods does the speaker use, and why?
-The speaker uses NextAuth.js for authentication, which supports traditional email/password login and social logins like Google, GitHub, and Microsoft. They appreciate how it simplifies session management and takes away the stress of manually developing authentication flows.
What are some other tools and libraries the speaker uses in web development?
-The speaker uses Tailwind CSS for styling, as it saves time by eliminating the need to write unnecessary CSS code. They also use Font Awesome for adding icons to their web apps, and AWS S3 for storage solutions.
How does the speaker use Firebase in their projects?
-The speaker uses Firebase for real-time communication, such as monitoring user verification statuses during email verification processes. They also use it for notifications when developing mobile applications.
What advice does the speaker offer for developers choosing a front-end framework?
-The speaker advises developers to experiment with various frameworks and not choose one solely based on recommendations. Each framework has its pros and cons, and developers should select the one they feel most comfortable working with.
Outlines
đ» Exploring My Tech Stack as a Full-Stack Developer
The author introduces themselves as a full-stack developer with four years of experience developing web and mobile apps. The video focuses on their web development tech stack, particularly for the front end. The author shares that they use React, and more recently, Next.js, which improves React with features like server-side rendering and server actions. They recommend trying different frameworks like Vue.js or Angular, noting Vue's simplicity and React's popularity. The author advises beginners to explore various frameworks to find the best fit, using resources like roadmap.sh to guide their learning.
đ„ïž API-Driven Backend Development and MySQL
The author discusses their backend approach, which centers around API-driven development using PHP and MySQL. They explain that PHPâs native support for MySQL connections makes it easier than using JavaScript with MySQL, which requires third-party drivers. API-driven development allows for easy reuse of backend services across multiple platforms, such as web and mobile. While they prefer PHP due to early exposure, they acknowledge that similar results can be achieved with Node.js. For smaller projects, the author uses services like Supabase or Firebase for backend support.
Mindmap
Keywords
đĄFull Stack Developer
đĄReact
đĄNext.js
đĄPHP
đĄAPI-driven development
đĄMySQL
đĄVercel
đĄHostinger
đĄAuthentication
đĄTailwind CSS
Highlights
The speaker is a full-stack developer with four years of experience developing both mobile and web applications.
The focus of the video is on the tech stack used for web development, with a mention of future content related to mobile app development.
The speaker prefers React for front-end development and transitioned to Next.js, which supercharges React with features like server-side rendering and server actions.
Angular is noted as more common in enterprise applications due to its structure, but with a steeper learning curve compared to React and Vue.js.
Vue.js is recommended as the easiest to learn among popular front-end frameworks.
For back-end development, the speaker uses PHP with MySQL for API-driven development, explaining that PHP's native support for SQL makes database logic easier than with Node.js.
API-driven development allows the reuse of the same backend logic across different platforms, such as both web and mobile applications.
Hostinger is the web hosting service used for PHP and MySQL backends, providing easy scaling as user traffic grows.
The speaker highlights the simplicity of hosting front-end applications on Vercel, emphasizing its integration with GitHub for continuous deployment.
NextAuth.js is used for authentication, which simplifies the process with built-in session management and social logins.
The speaker mentions Clerk as an emerging authentication library but has not yet tried it.
AWS S3 is the preferred storage solution, praised for its ease of use in web and mobile applications.
Tailwind CSS is used for front-end styling to avoid writing custom CSS, which the speaker finds cumbersome.
Font Awesome is recommended for providing a wide range of free icons, easily integrated into any web application.
Firebase is primarily used for real-time communication tasks, such as handling email verifications and notifications.
Transcripts
one of the most commonly asked questions
I get as a software developer that has
been developing apps for the past four
years is what text tack do you use to
develop your apps I've been wanting to
make this video for a very long time now
but I keep procrastinating 2,000 years
later so with no further delay let's get
into
it for those of you guys who might not
know I'm a full stack developer and I
develop apps for both mobile and web I
wouldn't say I develop for one platform
more than the other I've approximately
buil to the same amount of web apps and
mobile apps but for the sake of this
video we're going to focus on web
Technologies let me know if you guys
want me to make a video about the tech
stack I use for mobile app development
so like I mentioned earlier I do full
stack development so let's start with
the front end side of things for the
front end I develop all my apps using
react and for my framework I use nextjs
I started off writing PL react for about
a year I loved it it got the job done
then I heard about nextjs and how its
supercharges react and I decided to try
it out it was absolutely amazing the
transition from react to nextjs was very
smooth because nextjs is still heavily
based on react so the way you do things
in react in most cases is the same with
nextjs except from nextjs has its own
special features like server actions app
router and serers side rendering but
honestly if I wasn't writing react on
nextjs the next front end framework I
would choose has to be angular angular
is more common amongst most Enterprise
web applications because of how it's
structured but I would say it does have
a large learning curve compared to its
counterparts like View and react but
it's definitely worth it in the long run
but I would say personally I don't write
angular so I can't really say much about
it but if you're a beginner and you
don't use any front end framework right
now and you're looking to learn a new
front end framework I would say don't
choose angular because it's used for
Enterprise applications and also don't
choose react or next year because I told
you it's awesome I will advise you to
experiment with any front and framework
of your choice and see if you like it
but I will say definitely check out road
map. sh to see a very detailed learning
route for the framework of your choice
but I already looked at it before
recording this video the easiest to
learn is vue.js because it's a light
JavaScript framework followed by react
then angler react is sitting right there
in the dead center because it's not so
difficult to learn and it's also widely
used and it also has a large community
as well so that's why it makes sense for
most people to learn react but like I
said I would definitely advise you to
you know experiment with all of them and
see whichever one you like best every
framework has its pros and it's cons so
keep that in mind all right so moving on
to the back end side of things which is
my favorite so for my back end I
actually follow an API driven
development I mainly develop all my
backend services using PHP and my SQL I
write all my backend logic using vanilla
PHP no framework PHP communicates with
my SQL database and my client nextjs
communicates with my backend through an
API endpoint and before you guys come
for me in the comment section I know the
same thing can be achieved without
introducing a new language PHP into the
picture you can still develop your
backend services in let's say node.js
and still be able to communicate with my
S SQL database but the thinge is that
JavaScript can't natively communicate
with my SQL database because it runs on
a browser you will definitely need to
install a third party package that act
as a driver to help you connect to a
mySQL database but PHP on the other hand
natively supports SQL connections and
queries so performing any kind of
database logic in PHP is going to be
more straightforward compared to
JavaScript and also one of percs of API
driven development is that you can
utilize that same API endpoint for any
other application let's say my most
recent project script blue that's a web
application and in the future I plan on
developing a mobile application for that
project in that case I don't have to
worry about any backend stuff I can just
focus on developing the UI and just hit
the same Endo that my web application
hits if I choose I can also develop any
kind of Integrations with let's say
slack or Discord using that same API
endpoint that's just one General
advantage of using API driven
development but that's not the actual
reason I choose PHP over nodejs the
reason I actually write PHP over nodejs
is because I was exposed to PHP before
nodejs and I got used to it before I
even knew what nodejs was that was what
I learned first and like they say you
can't betray your first love so it is
what it is and also I think it's
important for me to say it also heavily
depends on what I'm developing there's
some really small projects I work on
that doesn't really require me to
develop a whole um PHP backend for in
that case I can use something like super
Bas or fire Bas to um you know develop
the whole backend service super Bas is
actually very very nice if you haven't
tried it I would say definitely give it
a go because it's like the SQL
alternative for Firebase it's truly
amazing now moving on to hosting full
stack isn't really complete if you don't
talk about how you host your
applications I host all my front- end
apps that I develop in next year using
Verso or versel is it Verso or versel I
don't know versel is a hosting service
created by the creators of nextjs
Hosting my apps on versel is very easy
and seamless the building and deployment
process is a breeze it helps with
continuous integration and development
in the sense that I can quickly write an
update on VSS code push it to my git
repository verel is already connected to
your GitHub and whenever you push code
into the repository it's connected to it
triggers a deployment process that
deployment process builds your app it
runs test then finally deploys it to the
public and all this without you having
to do anything this is the easiest
deployment I've ever done in my career
like I don't even know how else to
explain it it is truly amazing they have
a free plan which if you use for your
personal project you will be just fine
but if you develop apps that people are
going to use then I would say you might
exceed the free band reads and you might
have to pay for the hosting service
which then it can it can get pretty
expensive for my backend Services since
I use PHP and my SQL I use a web hosting
service from hostinger they are not
sponsoring this video by the way the
service from that web hosting service is
what's going to house your API end
points it also comes with a free mySQL
database which I don't think you're ever
going to use up they also let you scale
the server as your users grow with very
very little input from you so that's
also amazing all right guys I just
wanted to pop in to let you guys know
that I've started a membership on
YouTube and you can become a member some
of the PRS of being a member of this
channel includes early access to my
weekly videos you also get a fancy badge
besides your name in the comment section
you also get to see member only Post in
the community tab on YouTube and the
biggest PR of all is that you get a free
monthly call with me where we can
discuss anything from career plans to
learning structures and also project
reviews like literally anything you want
to talk about you get one free monthly
call with me so go ahead and click the
first link in the description to become
a member of this channel I've talked
about the three major things so let's
also talk about the little things that
also matter let's talk about
authentication for authentication I use
next years but not until the beginning
of this year I've always developed my
own authentication Flow by myself it
worked but it was it was very stressful
whenever I start a new project I always
develop the authentication flu first
just to get it out of the way because
that's that's probably the most
difficult in that project but recently I
discovered next o which is an
authentication library that handles all
your authentication for you it allows
the traditional email and password
authentication and it also allows social
login like login with Google loging with
apple GitHub Microsoft and many more
once your user is authenticated it
automatically creates a session with
whatever data you select and it also
lets you the developer to choose an
expiration date for that session that's
actually very cool because you don't
understand how much stress that takes
away from you but I've also heard about
click it's actually theer trending
authentication Library within the
development Community right now I'm yet
to try it out but if you guys want me to
make a video about clerk let me know in
the comment section and also clerk if
you're willing you can decide to sponsor
my next video and also I use AWS S3 for
storage it's a very easy and simple
storage solution for web apps and mobile
apps and whatever kind of development
you're doing some other little things I
use in the front end is Tailwind CSS
it's saves me from writing unnecessary
CSS code I don't know who who likes
writing CSS code not me definitely not
me I absolutely hate hate hate hate
writing CSS code I also use Font onome
library for icons tell me what what's a
web application without icons like just
just tell me what's a web app without
icons font awesome provides you with a
variety of icons for free and it's also
very easy easy easy to integrate with
your you know web applications whether
you're using nextjs VJs angular or react
it's very easy to integrate with your
web apps so I 10 out of 10 recommend
font awesome I sometimes use Firebase
mainly for realtime communication in the
application for example let's say I need
to handle an email verification I use
Firebase to monitor the user
verification status in real time so like
when I send the user the verification
email I set up a listener to observe
changes in the user's verification State
once the user clicks the verification
Link in the email Firebase automatically
updates the user's verification State my
app receives that update in real time
allowing the user to continue without
having to refresh the page that's one of
my most used cases for Firebase I know
it's also used for like other backend
operations but that's mainly what I use
it for and I also use it for
notifications when I'm developing mobile
apps as well but yeah guys that's my
complete Tech stack as a full stack
developer let me know if you guys have
any questions in the comment section let
me know in the comments if you guys want
me to make a separate video talking
about the tech stack I use in developing
mobile applications also don't forget to
join my coding community on Discord I'm
also going to leave a link to that in
the description thanks again for
watching don't forget to like this video
share it and also subscribe and I'll see
you guys in my next video
Weitere Àhnliche Videos ansehen
Web Developer Roadmap (March 2024) - Everything is Changing
Fastest way to become a Web Developer in 2024
Tá»ng hợp Full Lá» TrĂŹnh vĂ cĂĄc CĂŽng Nghá» Web nĂȘn há»c nÄm 2024
Complete MERN Stack Developer Roadmap For Beginners (2023)
Caught Cheating - SDE Candidate interview unexpectedly terminated | [Software Engineering Interview]
What is the MERN Stack?
5.0 / 5 (0 votes)