MERN Stack Tutorial #1 - What is the MERN Stack?
Summary
TLDRThis tutorial introduces the MERN stack, a powerful combination of MongoDB, Express, React, and Node.js, designed to create interactive, data-driven web applications. The instructor plans to guide viewers through building a full-stack application to track exercises, starting with the basics and later adding authentication. The course is aimed at those with a basic understanding of these technologies, offering a comprehensive overview of the MERN stack's capabilities and practical application.
Takeaways
- π The MERN stack consists of MongoDB, Express, React, and Node.js, which together enable the creation of interactive and data-driven web applications.
- π Mastering the MERN stack makes you a full-stack developer, capable of building both the front-end and back-end of a website.
- π The front-end is handled by React, which runs in the browser and typically manages routing to display different pages.
- π The back-end is managed by Node.js with Express, which creates APIs for handling requests, interacting with the database, and managing authentication.
- π Using a Node.js/Express back-end instead of directly accessing MongoDB from the front-end helps protect sensitive data and credentials.
- ποΈ The course will build a simple application for tracking exercises, incorporating core full-stack concepts as an introductory project.
- π Authentication will be added in a separate course following this one, focusing on user sign-up, login, logout, and protected dashboard access.
- π It's recommended to have a basic understanding of the MERN technologies before starting the course, though the instructor will explain everything during the lessons.
- π» Node.js needs to be installed on your computer to participate in the course, and instructions for checking the installation are provided.
- π Course files for each lesson are available on a GitHub repository, with instructions on how to use them including running 'npm install'.
- π The course is available for purchase without ads on the Net Ninja website, with options for individual course purchase or a subscription for all courses.
Q & A
What is the MERN stack?
-The MERN stack is a combination of four technologies: MongoDB, Express.js, React, and Node.js. It is used to build interactive and data-driven web applications. MongoDB is a NoSQL database, Express.js and Node.js are used for the backend API, and React is used for the frontend.
What does mastering the MERN stack mean?
-Mastering the MERN stack means you are a full-stack developer capable of building both the frontend and backend of a website. This includes handling the user interface and the server-side logic.
What is the role of React in the MERN stack?
-React is the frontend library used in the MERN stack. It runs in the browser, powers the website, and typically handles routing to display different pages.
What is the purpose of Node and Express in the MERN stack?
-Node and Express are used to create the backend API. Express is a framework for Node that helps in easily creating APIs, handling requests, interacting with the database, and managing authentication.
Why is MongoDB used in the MERN stack?
-MongoDB is a NoSQL database used to store application data such as user data or blogs. It is integrated with the backend to fetch, update, or delete data as needed.
What is the purpose of the backend API in the MERN stack?
-The backend API, built with Node and Express, handles requests from the frontend, interacts with the database to manage data, and also manages authentication to protect certain resources.
Why is it important to have a backend API instead of directly accessing the database from the frontend?
-Having a backend API prevents exposing sensitive data like database credentials in the frontend code. It keeps the logic secure and hidden from users, enhancing the security of the application.
What project will be built in this series?
-The project in this series is a simple application to track exercises. It will demonstrate the core concepts of a full-stack application and will later include authentication features in a separate course.
Why is authentication being added in a separate course?
-Authentication is one of the more complex aspects of a full-stack app, and the instructor believes it's not the best way to introduce the MERN stack. Therefore, it is being added in a separate course after the basics are covered.
What are the prerequisites for starting this course?
-It is recommended to have a basic understanding of the four technologies in the MERN stack. However, the course will explain everything in detail, so prior knowledge is not absolutely essential.
How can one access the course files?
-The course files for each lesson are available on a GitHub repository. Users can select the specific lesson from the branch dropdown and download the code by clicking the green 'Code' button and choosing to download a ZIP folder.
Outlines
π Introduction to the MERN Stack
The video script introduces the MERN stack, a collection of four technologies used to create interactive and data-driven web applications. It explains that mastering the MERN stack qualifies one as a full-stack developer, capable of building both the front and back ends of a website. The technologies involved are React for the front-end, Node.js and Express for the back-end API, and MongoDB as the NoSQL database. The script outlines how these technologies work together, with the browser running the React application, the Express app handling requests and database interactions on the server, and the importance of the back-end for security reasons. The project for the series is described as a simple exercise tracking application, which will be expanded with authentication in a subsequent course.
π Setting Up for the MERN Tutorial
This paragraph focuses on the prerequisites and setup needed for the MERN stack tutorial. It emphasizes the need for a basic understanding of the technologies involved and provides links to introductory courses for each. It also instructs viewers on how to install Node.js, verify the installation, and access the course files from a GitHub repository. The paragraph concludes with information on how to access the course without advertisements through the Net Ninja website, offering options to purchase the course or subscribe to Net Ninja Pro for access to all courses and additional premium content.
Mindmap
Keywords
π‘MERN Stack
π‘Full Stack Developer
π‘React
π‘Node.js
π‘Express
π‘MongoDB
π‘API
π‘Authentication
π‘Data Driven
π‘Course Files
π‘npm install
Highlights
Introduction to the MERN stack, a set of technologies used to build interactive and data-driven web applications.
MERN stack includes React for the front end, Node and Express for the back end API, and MongoDB for data storage.
Mastering the MERN stack makes you a full stack developer, capable of building both the front end and back end of a website.
React runs in the browser, handling website rendering and routing.
Node.js and Express are used to create APIs that handle requests from the front end.
MongoDB is a NoSQL database used to store application data like user information or blog posts.
The back end API interacts with the database to retrieve or update data, and handles authentication.
Using a Node API in the middle prevents exposing sensitive data like database credentials in the front end.
The project for this series is a simple application to track exercises, integrating core full stack concepts.
Authentication will be added in a separate course following this one.
The course will start without authentication and then add it in the subsequent course.
Users will be able to sign up, log in, and log out, with dashboard access restricted to logged-in users.
Each user will have their own exercises listed on the dashboard, ensuring privacy.
It's recommended to have a basic understanding of the MERN stack technologies before starting the course.
Introductory courses to each technology are available, with links provided in the video description.
Node.js needs to be installed on your computer, with instructions available at nodejs.org.
Course files for every lesson are available on a GitHub repo, accessible through a link in the video description.
Instructions on how to use the course files and run the project with npm install are provided.
The course can be watched without YouTube ads on the Net Ninja website, with options to buy the course or subscribe to Net Ninja Pro.
Transcripts
hey gang and welcome to your very first
moon stack tutorial
[Music]
all right so to begin with i just want
to talk a little bit about what the mern
stack is the different technologies
involved and how they all work together
and also just to explain exactly what
we're going to be building in this
series
so the mern stack is basically a bunch
of four different technologies that we
can use together to make an interactive
and data driven web application or
website and if you master the mern stack
then technically speaking you're a full
stack developer meaning you build the
front end of a website and the back end
of a website that's generally what we
mean when we say full stack the front
end and the back end the whole shazam
now there's loads of different
variations of a full stack and the mirn
stack is just one of them and it
consists of react which is the front-end
library that we use
node and express which we use to make
the back end api that we interact with
from the front end and then finally
mongodb which is a nosql database to
store application data in like user data
or blogs or whatever other data that
your website uses and together they
spell out the acronym mern
so
how these all work together is as
follows on the front end we have the
browser where we see the website and our
react application runs in the browser to
power the website and typically handles
routing in the browser as well to show
different website pages
then when we need to show data in the
website like blogs or even just
authenticate users we'd send a request
from the front end to the back end now
the back end is an express app running
in a node.js environment and if you
don't already know express is just a
framework for node that lets us easily
create apis
so the node and express api would handle
our request on the back end and
typically interact with a database to
get data or update data or delete data
etc it would also handle authentication
requests to do things like log a use in
log them out or sign them up as well as
protect certain api endpoints from
unauthenticated users so that only
logged in users can access certain
resources anyway
once it has the data from the database
it would then send a response with that
data back to the browser the client and
the react app would handle that response
by outputting the data in some kind of
template
now you might be thinking what's the
point of this middle node api step in
order to fetch the data why can't i just
reach out directly to mongodb for the
data and skip this middle bit entirely
and the answer is that if you do that
you'd be exposing sensitive data in your
front end code in the browser such as an
admin username and password to access
your database and by putting that logic
in the back end instead you're hiding
that sensitive code from people who use
your website
so
that's the moon stack from a bird's eye
view and these are the four different
technologies we'll be using to build a
full stack application in this series
react node express and mongodb so that
project that we're going to make looks
something like this it's a pretty simple
application to track exercises that you
might do but it pulls together all the
core concepts of a full stack
application and i think it serves as a
really good introductory project i will
also be adding authentication into the
mix but i'm splitting that section off
into a separate course that's going to
be released right after this one and the
reason i'm doing that is because a lot
of other mern tutorials start out with
authentication right off the bat and
generally speaking adding authentication
to a full stack app is arguably one of
the hardest parts about it and
personally i don't think it's the best
way to introduce the mern stack to
developers who want to learn it so we'll
be starting out by making the project
without authentication and then adding
in authentication in the next course
coming right after this one and that's
going to look something like this
where users can sign up log in and log
out and we protect the dashboard from
anyone who's not logged in and also
every user has their own exercises
listed on the dashboard as well so that
you don't see other people's just your
own so like i said that's coming right
after this course once we've nailed the
bread and butter of the mern stack
now before you start this course i would
strongly recommend that you have at
least a very basic understanding of each
of the four technologies we're going to
be using it's not absolutely essential
because i won't be skipping bits out and
i will explain everything as we go along
but i'm not going to pretend that
knowing about them prior to this course
is not going to be extremely beneficial
so if you want to learn the basics of
those four things in isolation first of
all i've got introductory courses to
each one of them so note and express
mongodb and also react so i'm going to
leave the links to each one of those
courses down below this video
also since we're using node.js to make
our backend api in this course it goes
without saying that you're going to need
node installed on your computer and you
can get that from nodejs.org
just hit this download button right here
and follow the installation steps and to
make sure it's installed correctly open
up any kind of terminal you can use
command prompt or whatever else you want
to use and then just type node then a
space then hyphen v and then press enter
and if you see a version number then you
know it's installed if you get an error
then it's not installed correctly and
you'll need to try again and then
finally as always i've made course files
for every single lesson in the series
and you can find those here on this
github repo the link to this is going to
be down below the video so if you want
to see or download the code for a
specific lesson you just need to select
that lesson from the branch drop down
for example to get the lesson two code
you select the lesson to branch and then
to download this code just head to the
green code button and then choose to
download a zip folder of this lesson
there's instructions on how to use the
course files down here as well since
you'll have to run an npm install for
the project to work once you download it
so
there we go my friends that's your
course introduction out of the way and
in the next lesson we're going to start
work on the node and express back end to
begin with by the way if you want to
watch this entire course now without
youtube adverts you can do it's all up
on the net ninja website netninja.dev
you can buy the course for two dollars
to get instant access to all of it or
you can sign up to net ninja pro and get
instant access to all of my courses
without adverts as well as premium
courses not found on youtube including
my udemy ones that's nine dollars a
month and you can get your first month
half price when you use this promo code
right here so i'm going to leave this
link down below in the video description
for you to sign up and i really hope you
enjoyed this series and please do not
forget to share subscribe and like the
videos that really helps a lot and i'm
going to see you in the very next lesson
Browse More Related Video
Complete MERN Stack Developer Roadmap For Beginners (2023)
What is the MERN Stack?
WSA - Internship Experience and Project Submission #internship #project #Free Internship
Docker Tutorial for Beginners
GPT Pilot βοΈ Build Full Stack Apps with a SINGLE PROMPT (Made for Devs)
Fastest way to become a Web Developer in 2024
5.0 / 5 (0 votes)