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

Summary

In the initial tutorial of the MERN stack series by Net Ninja, viewers are introduced to the fundamental components of the MERN stack, which stands for MongoDB, Express.js, React, and Node.js. The creator explains how these technologies work together to enable developers to create robust, data-driven web applications. The tutorial highlights the interaction between front-end (React) and back-end (Node, Express) technologies, and explains the necessity of having a middle API step to protect sensitive data. It also provides a sneak peek of the project that will be built throughout the series — an exercise tracker application. The video wraps up with a note on the importance of having a basic understanding of each technology before diving into the tutorial, and offers resources for further learning.

Highlights

• The MERN stack is essential for building dynamic web applications. 🚀
• React powers the front end, while Node.js and Express handle the back end. 🔄
• MongoDB stores data securely, ensuring the robustness of applications. 🛡️
• Net Ninja offers additional resources for learning each part of the stack. 📘
• The course includes an exercise tracker project for practical learning. 🏋️

Key Takeaways

• The MERN stack combines MongoDB, Express.js, React, and Node.js to create full-stack applications. 🌐
• React is used on the front end, while Node and Express form the back end, utilizing MongoDB to store data. 🗃️
• Using an API layer protects sensitive data from being exposed in the frontend. 🔐
• The tutorial series includes building a project and gradually introduces authentication features. 🚀
• Having a basic understanding of each component is beneficial before following the series. 📚

Overview

Welcome to the first tutorial in the MERN Stack series with Net Ninja! This tutorial sets the stage by delving into what the MERN stack is all about. MERN stands for MongoDB, Express.js, React, and Node.js, and represents a collective of technologies that, when combined, allow developers to create full-stack, dynamic web applications. In this video, you'll get an overarching view of how these components interact to construct a seamless user experience.

The magic of the MERN stack lies in its structure: React handles the client-side operations and user interfaces, while Node.js and Express power the server-side logic. MongoDB steps in to safely store and manage data. An important concept introduced is the middle API step – a security measure ensuring that sensitive data doesn't surface in the front end, which could otherwise lead to vulnerabilities.

In this series, you'll be building an exercise tracker application that highlights core concepts of the MERN stack. The tutorial series is mindful of pacing by avoiding the immediate complexity of authentication, breaking it into a separate course for clarity. This approach aims to accommodate learners at various stages, particularly beneficial for those who may be new to these technologies. With insightful resources and a structured approach, this series promises a thorough understanding of the MERN stack.

Chapters

• 00:00 - 00:30: Introduction to the MERN Stack This chapter serves as an introduction to the MERN stack, which comprises four technologies that work together to create interactive, data-driven web applications. It sets the stage for subjects to be covered in the series including what technologies are involved, how they integrate, and what will be developed during the tutorial series.
• 00:30 - 01:30: MERN Stack Components The chapter 'MERN Stack Components' explains the components of the MERN stack, a popular set of technologies used for full-stack web development. When one masters the MERN stack, it signifies that they are capable of building both the front-end and back-end of a website. The term 'full stack' refers to this capability of handling both sides of web development. The chapter mentions that there are various full-stack combinations, and the MERN stack is one of them, comprising four main technologies: React for front-end development, and Node.js, Express for back-end API development, and MongoDB as the database component (though MongoDB wasn't explicitly mentioned in the provided transcript).
• 01:30 - 02:30: Frontend and Backend Interaction This chapter discusses how the different components of the MERN stack (MongoDB, Express.js, React, and Node.js) interact with each other, particularly focusing on the interaction between the frontend and backend. It explains that React runs in the browser to power and manage the routing of the website, displaying various web pages and handling user interface logic.
• 02:30 - 03:30: Data Request Flow The chapter titled 'Data Request Flow' discusses the process of how data requests are managed in a web application. It explains that when data needs to be displayed on a website, such as blog posts, or when user authentication is required, a request is sent from the front end to the back end. The back end is described as an express application running in a Node.js environment. Express is highlighted as a framework for Node.js that facilitates API creation. The API on the back end is responsible for handling requests by interacting with a database to perform operations like retrieving, updating, or deleting data. Additionally, it manages user authentication.
• 03:30 - 04:30: Considering Security in MERN This chapter discusses the importance of considering security within the MERN (MongoDB, Express, React, Node.js) stack. It highlights the necessity for securing API endpoints to ensure that only authenticated users can access specific resources. The discussion includes the process of handling authentication requests like logging users in or out and signing them up. Additionally, it explains the data flow: how data is retrieved from the database, processed by the server, and then sent back as a response to the client, which in turn renders it in a template. The chapter also poses a reflective question on the necessity of the Node.js API step in this workflow.
• 04:30 - 05:30: Project Overview and Authentication This chapter focuses on the rationale behind the architecture of a web application, specifically addressing why direct database access from the frontend is not advisable. It emphasizes the importance of backend logic in securing sensitive information, such as admin credentials, to prevent exposing them to the end-users. The chapter sets the stage for understanding the responsibilities of different layers in the stack known as the 'moon stack.'
• 05:30 - 06:30: Basic Knowledge Prerequisites The chapter introduces the basic knowledge prerequisites required to build a full stack application in the series. It emphasizes learning and using technologies like React, Node, Express, and MongoDB. The described project is a simple exercise tracking application that integrates all the essential components of a full stack application. Additionally, it is mentioned that there will be a focus on authentication, though it will be covered in a separate course.
• 06:30 - 07:30: Setting Up Node.js In the chapter titled 'Setting Up Node.js', the focus is on the initial steps of creating a project in the MERN stack without including authentication. The author explains the reasoning for this approach, emphasizing that many tutorials begin with authentication, which can be one of the most challenging aspects of building a full stack application. To make learning more accessible, the author plans to first help developers understand the basics of the MERN stack, and then proceed to cover authentication in a subsequent course.
• 07:30 - 08:30: Course Resources and Files This chapter introduces the setup and management of course resources and files for a web development course. It covers essential user management features, such as sign-up, log-in, and log-out functionalities. Furthermore, it explains the security measures in place to protect the user's dashboard, ensuring only authorized users can access their personalized dashboard containing their own exercises. The importance of having a basic understanding of the MERN stack (MongoDB, Express, React, Node.js) is emphasized before proceeding with the course.
• 08:30 - 09:30: Course Access and Subscription In this chapter titled 'Course Access and Subscription', it is discussed that while prior knowledge of certain technologies like Note, Express, MongoDB, and React is not essential, it can be very beneficial for understanding the content of this course. The speaker mentions having separate introductory courses for each of these technologies and provides links to these courses for those interested in learning about them individually.

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

• 00:00 - 00:30 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
• 00:30 - 01:00 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
• 01:00 - 01:30 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
• 01:30 - 02:00 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
• 02:00 - 02:30 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
• 02:30 - 03:00 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
• 03:00 - 03:30 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
• 03:30 - 04:00 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
• 04:00 - 04:30 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
• 04:30 - 05:00 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
• 05:00 - 05:30 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
• 05:30 - 06:00 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
• 06:00 - 06:30 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
• 06:30 - 07:00 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
• 07:00 - 07:30 going to see you in the very next lesson