My Complete Tech Stack For Full-Stack development - 2024

Summary

In 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

00:00

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

05:01

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

Keywords

💡Full Stack Developer

A full stack developer is someone who works on both the front-end and back-end of applications. In the video, the speaker identifies themselves as a full stack developer, meaning they have the skills to create both web and mobile apps, handling everything from user interfaces to server-side logic. The speaker emphasizes this role by explaining their experience building apps for both platforms.

💡React

React is a popular JavaScript library for building user interfaces, especially for web applications. The speaker uses React for front-end development, highlighting its ease of use and large community support. They initially started with pure React before moving on to Next.js, which enhances React’s capabilities with additional features like server-side rendering.

💡Next.js

Next.js is a React framework that enables server-side rendering and provides additional features like routing and API handling. The speaker transitioned from React to Next.js to take advantage of its power in supercharging React, making the development process smoother. Next.js is used for the front-end part of the apps, and the speaker praises its features, such as server actions and app router.

💡PHP

PHP is a server-side scripting language used to develop back-end services. The speaker prefers PHP for writing back-end logic, citing its native ability to communicate with MySQL databases as a key advantage. They explain that while JavaScript with Node.js could also handle back-end logic, PHP’s direct SQL support makes it simpler for database-driven tasks.

💡API-driven development

API-driven development focuses on creating back-end services that expose APIs for different platforms to communicate with. The speaker emphasizes this approach, explaining that their Next.js front-end communicates with the PHP back-end via API endpoints. They also mention the advantage of using APIs for cross-platform functionality, like developing both web and mobile apps that utilize the same back-end.

💡MySQL

MySQL is a popular relational database management system used to store and manage data. The speaker uses MySQL for the back-end database, explaining that PHP natively supports MySQL connections. MySQL serves as the database for storing app data, which is accessed by the back-end and communicated to the front-end through APIs.

💡Vercel

Vercel is a cloud platform for deploying web applications, particularly Next.js apps. The speaker uses Vercel to host all their front-end applications, praising it for its seamless integration with GitHub for automatic deployments and continuous integration. They find it the easiest deployment process they've ever experienced, and they recommend Vercel for personal and professional projects.

💡Hostinger

Hostinger is a web hosting service the speaker uses to host their PHP-based back-end services. They mention that Hostinger provides a MySQL database and allows for easy scaling as the app’s user base grows. Hostinger is responsible for hosting API endpoints that the front-end apps communicate with.

💡Authentication

Authentication refers to the process of verifying a user's identity before granting access to an application. The speaker discusses using NextAuth.js, a library for handling user authentication in Next.js, which simplifies the process of managing traditional login methods (e.g., email/password) and social logins. This allows for session management without the developer needing to build everything from scratch.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows for rapid styling of web applications. The speaker uses Tailwind CSS to streamline the process of writing CSS, expressing their dislike for traditional CSS. Tailwind’s utility classes help avoid writing unnecessary code, making it easier to design responsive and functional user interfaces.

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