Learn Mern Stack Web Development & Build Real World Projects using React & Node

Module 1: Web Development Essentials

8 Lectures (16 Hours & 4 Weeks) , 4 Coding Challenges , 6 Tasks

Do you aware that the web page is the only part of a web application with which the user interacts directly? If you, do it incorrectly, the server-side becomes useless to the user! The modern user expects a lot from a web page: it must load quickly, provide the needed service, and be easy to read on a variety of devices, including desktop computers, tablets, and mobile phones.

We will learn the fundamental tools that any web page coder should be familiar with in this course. We’ll start from the ground up, learning how to use HTML and CSS to create modern web pages. We’ll then go on to learning how to code our pages such that its components dynamically resize and reorganize themselves according on the size of the user’s screen. You’ll be able to create a web page that works equally well on a smartphone as it does on a desktop computer. There’s no need to “pinch and zoom”! Last but not least, we’ll get a full introduction to Javascript, the web’s most ubiquitous, popular, and tremendously powerful language.

Syllabus

Introduction to HTML5

• We’ll master the fundamentals of HTML5 in this module. We’ll start with how-to videos on setting up your development environment, then go over HTML5 fundamentals including proper document structure, which elements can be placed inside other elements and which cannot, the meaning and utility of HTML5 semantic tags, and key HTML5 tags.

Introduction to CSS3

• CSS is used by a lot of individuals to “tinker” with their websites. We’ll cover everything from the fundamentals of CSS3 to more complex concepts like floating and CSS rule conflict resolution in this section. We’ll go through things like the ‘box model,’ the background property, and so on. We’ll end the subject by learning about Responsive Design.

Coding the Static Site

• Are you ready to have a good time? This is the module for you! When managing a web site project, we’ll go over the fundamentals of interacting with clients. We’ll spend the rest of the module creating a real web site from scratch for this company, and you’ll get to sit next to me and witness the process unfold.

Introduction to Javascript

• What good would a website be if it didn’t have any functionality? This lesson will focus on understanding the fundamentals of the Javascript programming language. Even experienced coders “tinker” with Javascript without actually understanding how it works. As a result, the language is seen as a nuisance rather than a useful tool. That is why we will focus not only on the “how,” but also on the “why,” so that you will be empowered rather than bewildered by the Javascript language features. From common language constructions and Javascript types to objects, functions, arrays, closures, scope isolation, and ES6+, we’ll cover it all.

Module 3: Backend Development

8 Lectures (16 Hours & 4 Weeks), 7 Assignments

This Module covers the basics of setting up your Next.js app and configuring it for Redux, MongoDB,
NodeJS and ExpressJs from there we will go over some implementations of these
key features, the aim is to give you a solid understanding of what can be
accomplished and how you can accomplish it! We will also take into account some
best practices when it comes to file structuring

Syllabus

Introduction to Next JS

• Next.js is a React framework that includes a page-based routing system, server-side rendering, static optimization with data-fetching, automatic code splitting, client-side routing with page prefetching, built-in CSS (and SASS) support, and API routes for constructing React apps. React, webpack, and babel are all used in Next.js. It’s a fantastic tool for building online applications, and it’s well-known for server-side rendering. Zeit is the creator of Next.js. While react is fantastic, Next.js goes a step further with its Server-Side Rendering functionality, which improves SEO. Next.js is a popular React framework that is presently used in over 110,000 GitHub repositories.
  
  

Introduction to Node JS

• Node (or Node.js) is an open-source, cross-platform runtime environment that allows JavaScript developers to create a variety of server-side tools and apps. The runtime is designed to be used outside of a browser (i.e., running directly on a computer or server OS). As a result, the environment drops support for browser specific JavaScript APIs in favor of more traditional OS APIs like HTTP and file system libraries.
  
  

Introducing Express

• Express is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks. It provides mechanisms to: Write handlers for requests with different HTTP verbs at different URL paths (routes).
• Integrate with “view” rendering engines in order to generate responses by inserting data into templates.
• Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.
• Add additional request processing “middleware” at any point within the request handling pipeline.

MongoDB

• MongoDB is a document oriented NoSQL database for storing large amounts of data. MongoDB uses collections and documents instead of tables and rows, as in traditional relational databases. Documents are made up of key value pairs, which are MongoDB’s basic data unit. Collections are the equivalent of relational database tables in that they include sets of documents and functions.

MongoDB Features

• Each database contains collections which in turn contains documents. Each document can be different with a varying number of fields. The size and content of each document can be different from each other.
• The document structure is more in line with how developers construct their classes and objects in their respective programming languages. Developers will often say that their classes are not rows and columns but have a clear structure with key-value pairs.
• There is no need to establish a schema for the rows (or documents as they are known in MongoDB). Fields can be built on the fly instead.
• MongoDB’s data schema makes it easier to represent hierarchical connections, store arrays, and store other more complicated structures.
• Scalability – MongoDB environments have a lot of scalability. Companies all across the world have defined clusters, with some running 100 or more nodes and millions of documents in the database.

Auth Module for Our App

The purpose of this part is to introduce you to web application development using Node.JS and Express. MongoDB is used to store the data in the database. The emphasis of the part is on security and permission. Here’s a rundown of some of the most important topics:     

• Use Registration
• Authentication
• Authorization

APIs for Frontend App

We will build powerful, scalable RESTful APIs using latest technologies for our App.