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

Module 1: Web Development Essentials

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 2: Frontend Development

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

In this Module you’ll learn how to make a Single Page Application. You will work with ReactJS, TypeScript, JS, Redux, React Hooks, Tailwind CSS. When you’re through, you’ll have a fully functional Mobile-Friendly Offline-Capable app with a code base that’s clean, readable, and performant. You’ll study best practices while also seeing how to construct a whole application piece by piece!

Syllabus

Introduction to TypeScript

·         TypeScript provides JavaScript developers with cutting-edge JavaScript features such as modules and decorator while enhancing JavaScript with strong-typing. Through typing files, strongly typed React and Redux programming improves the development experience especially for enterprise environments. This class will feature dynamic code driven lectures, and lots of hands-on programming work

Introduction to React

·         React is a popular library for building single-page JavaScript and HTML apps. Companies like Facebook, Instagram, Netflix, and the New York Times use it. This course will cover the foundations on which React and other libraries (such as Angular and Vue.js) are built, as well as the React specifics. It will also cover technologies such as Redux and React-Router, which are frequently used with React. Participants will be able to construct React apps of varying complexity while adhering to best practices by the end of the course.

Implementing Redux

·         You’re probably sharing data between React components if you’re building React applications. It’s time to employ a state-management library as the programme grows and data exchange becomes more complicated. With React, Redux is the most widely used state-management library. Redux allows you to use standard JavaScript syntax while also enforcing regular conventions that make your projects more dependable and predictable. In comparison to other state-management tools, Redux is more widely used and has greater documentation. Because Redux is so popular, knowing it can give you an advantage over other React developers when looking for jobs. You’ll be able to get up and running quickly if you have good documentation.

 The Magical Tailwind CSS

• Tailwind CSS is a utility-first CSS framework that allows you to quickly create bespoke user interfaces. It’s a highly configurable, low-level CSS framework that offers you all the building blocks you need to create personalized designs without having to fight to override irritating opinionated styles. The beauty of tailwind is that it doesn’t enforce design specifications or how your site should look; instead, you simply combine small components to create a unique user interface. Tailwind just takes a ‘raw’ CSS file, processes it over a configuration file, and outputs it.

Why Tailwind CSS?

• Faster UI building process
• It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.

Advantages of Tailwind CSS

• No more silly names for CSS classes and Id’s.
• Minimum lines of Code in CSS file.
• We can customize the designs to make the components.
• Makes the website responsive.
• Makes the changes in the desired manner. 
• CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS, we can use utility classes and make local changes.

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:

o  
Write handlers for
requests with different HTTP verbs at different URL paths (routes).

o  
Integrate with
“view” rendering engines in order to generate responses by inserting
data into templates.

o  
Set common web
application settings like the port to use for connecting, and the location of
templates that are used for rendering the response.

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

Module 4: Integration

8 Lectures (16 Hours & 4 Weeks)

This module is exclude from the regular training, can be joined on special request (would be charge separate)

This Module covers the integration of our Restful APIs that we have build previously. Now, we will
implement them on our App and we will also learn GraphQL in this Module.
When we are done implementing GraphQL and APIs integration into our app will do
software testing and in the end of the course will have project review where we
will check candidates project build by them.