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

Net Ninja
15 Jun 202207:05

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

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.

Mindmap

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

play00:00

hey gang and welcome to your very first

play00:02

moon stack tutorial

play00:04

[Music]

play00:09

all right so to begin with i just want

play00:11

to talk a little bit about what the mern

play00:13

stack is the different technologies

play00:15

involved and how they all work together

play00:18

and also just to explain exactly what

play00:20

we're going to be building in this

play00:21

series

play00:22

so the mern stack is basically a bunch

play00:25

of four different technologies that we

play00:27

can use together to make an interactive

play00:29

and data driven web application or

play00:31

website and if you master the mern stack

play00:33

then technically speaking you're a full

play00:35

stack developer meaning you build the

play00:36

front end of a website and the back end

play00:39

of a website that's generally what we

play00:41

mean when we say full stack the front

play00:42

end and the back end the whole shazam

play00:45

now there's loads of different

play00:46

variations of a full stack and the mirn

play00:49

stack is just one of them and it

play00:51

consists of react which is the front-end

play00:53

library that we use

play00:55

node and express which we use to make

play00:57

the back end api that we interact with

play00:59

from the front end and then finally

play01:01

mongodb which is a nosql database to

play01:05

store application data in like user data

play01:07

or blogs or whatever other data that

play01:09

your website uses and together they

play01:11

spell out the acronym mern

play01:14

so

play01:14

how these all work together is as

play01:17

follows on the front end we have the

play01:19

browser where we see the website and our

play01:21

react application runs in the browser to

play01:24

power the website and typically handles

play01:26

routing in the browser as well to show

play01:29

different website pages

play01:30

then when we need to show data in the

play01:32

website like blogs or even just

play01:34

authenticate users we'd send a request

play01:37

from the front end to the back end now

play01:39

the back end is an express app running

play01:42

in a node.js environment and if you

play01:44

don't already know express is just a

play01:46

framework for node that lets us easily

play01:49

create apis

play01:50

so the node and express api would handle

play01:53

our request on the back end and

play01:55

typically interact with a database to

play01:57

get data or update data or delete data

play01:59

etc it would also handle authentication

play02:02

requests to do things like log a use in

play02:05

log them out or sign them up as well as

play02:07

protect certain api endpoints from

play02:10

unauthenticated users so that only

play02:12

logged in users can access certain

play02:14

resources anyway

play02:16

once it has the data from the database

play02:18

it would then send a response with that

play02:20

data back to the browser the client and

play02:23

the react app would handle that response

play02:25

by outputting the data in some kind of

play02:27

template

play02:28

now you might be thinking what's the

play02:29

point of this middle node api step in

play02:32

order to fetch the data why can't i just

play02:34

reach out directly to mongodb for the

play02:36

data and skip this middle bit entirely

play02:38

and the answer is that if you do that

play02:40

you'd be exposing sensitive data in your

play02:43

front end code in the browser such as an

play02:46

admin username and password to access

play02:48

your database and by putting that logic

play02:50

in the back end instead you're hiding

play02:52

that sensitive code from people who use

play02:55

your website

play02:56

so

play02:57

that's the moon stack from a bird's eye

play02:59

view and these are the four different

play03:01

technologies we'll be using to build a

play03:03

full stack application in this series

play03:05

react node express and mongodb so that

play03:09

project that we're going to make looks

play03:11

something like this it's a pretty simple

play03:13

application to track exercises that you

play03:15

might do but it pulls together all the

play03:17

core concepts of a full stack

play03:19

application and i think it serves as a

play03:22

really good introductory project i will

play03:24

also be adding authentication into the

play03:26

mix but i'm splitting that section off

play03:28

into a separate course that's going to

play03:30

be released right after this one and the

play03:32

reason i'm doing that is because a lot

play03:33

of other mern tutorials start out with

play03:36

authentication right off the bat and

play03:38

generally speaking adding authentication

play03:40

to a full stack app is arguably one of

play03:42

the hardest parts about it and

play03:44

personally i don't think it's the best

play03:45

way to introduce the mern stack to

play03:47

developers who want to learn it so we'll

play03:49

be starting out by making the project

play03:51

without authentication and then adding

play03:54

in authentication in the next course

play03:56

coming right after this one and that's

play03:58

going to look something like this

play04:00

where users can sign up log in and log

play04:03

out and we protect the dashboard from

play04:05

anyone who's not logged in and also

play04:08

every user has their own exercises

play04:10

listed on the dashboard as well so that

play04:13

you don't see other people's just your

play04:15

own so like i said that's coming right

play04:17

after this course once we've nailed the

play04:19

bread and butter of the mern stack

play04:22

now before you start this course i would

play04:25

strongly recommend that you have at

play04:26

least a very basic understanding of each

play04:29

of the four technologies we're going to

play04:30

be using it's not absolutely essential

play04:34

because i won't be skipping bits out and

play04:36

i will explain everything as we go along

play04:38

but i'm not going to pretend that

play04:40

knowing about them prior to this course

play04:42

is not going to be extremely beneficial

play04:44

so if you want to learn the basics of

play04:46

those four things in isolation first of

play04:49

all i've got introductory courses to

play04:51

each one of them so note and express

play04:53

mongodb and also react so i'm going to

play04:56

leave the links to each one of those

play04:57

courses down below this video

play05:00

also since we're using node.js to make

play05:03

our backend api in this course it goes

play05:05

without saying that you're going to need

play05:07

node installed on your computer and you

play05:09

can get that from nodejs.org

play05:12

just hit this download button right here

play05:13

and follow the installation steps and to

play05:16

make sure it's installed correctly open

play05:17

up any kind of terminal you can use

play05:19

command prompt or whatever else you want

play05:21

to use and then just type node then a

play05:24

space then hyphen v and then press enter

play05:27

and if you see a version number then you

play05:29

know it's installed if you get an error

play05:31

then it's not installed correctly and

play05:33

you'll need to try again and then

play05:35

finally as always i've made course files

play05:38

for every single lesson in the series

play05:41

and you can find those here on this

play05:42

github repo the link to this is going to

play05:45

be down below the video so if you want

play05:47

to see or download the code for a

play05:49

specific lesson you just need to select

play05:51

that lesson from the branch drop down

play05:53

for example to get the lesson two code

play05:55

you select the lesson to branch and then

play05:58

to download this code just head to the

play06:00

green code button and then choose to

play06:02

download a zip folder of this lesson

play06:04

there's instructions on how to use the

play06:06

course files down here as well since

play06:08

you'll have to run an npm install for

play06:11

the project to work once you download it

play06:14

so

play06:14

there we go my friends that's your

play06:16

course introduction out of the way and

play06:18

in the next lesson we're going to start

play06:20

work on the node and express back end to

play06:22

begin with by the way if you want to

play06:24

watch this entire course now without

play06:26

youtube adverts you can do it's all up

play06:28

on the net ninja website netninja.dev

play06:31

you can buy the course for two dollars

play06:32

to get instant access to all of it or

play06:35

you can sign up to net ninja pro and get

play06:37

instant access to all of my courses

play06:39

without adverts as well as premium

play06:41

courses not found on youtube including

play06:43

my udemy ones that's nine dollars a

play06:46

month and you can get your first month

play06:47

half price when you use this promo code

play06:50

right here so i'm going to leave this

play06:52

link down below in the video description

play06:54

for you to sign up and i really hope you

play06:56

enjoyed this series and please do not

play06:57

forget to share subscribe and like the

play06:59

videos that really helps a lot and i'm

play07:01

going to see you in the very next lesson

Rate This
β˜…
β˜…
β˜…
β˜…
β˜…

5.0 / 5 (0 votes)

Related Tags
MERN StackWeb DevelopmentReactJSNode.jsExpressMongoDBFull StackAPIsAuthenticationCourseTutorial