MERN Stack Tutorial #1 - What is the MERN Stack?

Summary

This 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

00:00

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

05:01

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

Keywords

💡MERN Stack

The MERN Stack refers to a modern technology stack used for building web applications. It consists of MongoDB, Express.js, React, and Node.js. In the video, the MERN stack is the central focus, as it is the set of technologies the tutorial will use to teach full-stack web development. The MERN stack is essential for creating interactive and data-driven web applications, with each component handling different parts of the application's architecture.

💡Full Stack Developer

A full stack developer is a programmer who is proficient in both front-end and back-end technologies, enabling them to develop complete web applications. In the context of the video, mastering the MERN stack makes one a full stack developer. The script mentions that this involves building both the front-end user interface and the back-end server logic, which is a comprehensive skill set for web development.

💡React

React is a JavaScript library used for building user interfaces, particularly single-page applications. It is the front-end component of the MERN stack. The video script explains that React runs in the browser and handles routing to display different pages of the website, making it a crucial part of the front-end development process.

💡Node.js

Node.js is a JavaScript runtime that allows developers to run JavaScript on the server side. In the video, Node.js is part of the back-end technology used alongside Express to create APIs. It is essential for handling server-side logic and interactions with the database, which is a key aspect of back-end development.

💡Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for building single and multi-page, and hybrid web applications. In the script, Express is used in conjunction with Node.js to create APIs that the front-end React application interacts with, facilitating data retrieval and updates.

💡MongoDB

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format, making it easy to store and retrieve data for web applications. The video script describes MongoDB as the database used in the MERN stack to store user data, blogs, or other application data, highlighting its role in managing the persistence layer of the application.

💡API

API stands for Application Programming Interface, which is a set of rules and protocols for building software applications. In the context of the video, the back-end Express app creates APIs that the front-end React application uses to request and receive data, such as user authentication and data retrieval.

💡Authentication

Authentication is the process of verifying the identity of a user or device. The video script mentions that authentication will be added to the project in a separate course, emphasizing its importance in securing applications by allowing only verified users to access certain resources.

💡Data Driven

A data-driven application is one that relies heavily on data to function, often involving dynamic content that changes based on user interactions or data stored in a database. The video describes the MERN stack as being used to create interactive and data-driven web applications, indicating the importance of data in the applications built with this stack.

💡Course Files

Course files are resources provided by the instructor to support the learning process, often including code examples, exercises, and project files. The video script mentions that course files for each lesson are available on a GitHub repository, allowing learners to follow along with the tutorial by accessing and using the provided code.

💡npm install

npm install is a command used with the Node.js package manager (npm) to install dependencies required for a project. In the video script, it is mentioned as a necessary step after downloading the course files to ensure that the project works correctly by installing all needed packages.

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