Full Stack Dev (MERN)

The Basic

• What is the Web?
• How Does It Work?
• How Data Finds its Way?

‍

The Front End

• The Server-side and The Client-side
• HTML
• CSS
• JavaScript

‍

The Back End

• What is the Back End?
• Microservice Architecture
• Back-end programming
• NodeJS

‍

Web Development Frameworks

• What are the Frameworks?
• Front-end Frameworks
• Back-end Frameworks
• Isomorphic Frameworks
• Software Stacks

‍

What is MERN Stack

• MongoDB
• Express
• Node.js
• React JS

‍

Semantic Web Page Layout with HTML

• What is HTML?
• Attributes + Hyperlinking
• Headings + Lists
• Inline vs. Block Elements + Divs
• id + class Attributes
• The img Element
• Delving into Semantics
• HTML Tables
• HTML Forms

‍

Stylizing HTML Content using CSS

• What is CSS?
• Introduction to the Cascade
• Basic CSS Selectors
• Selector Combinations
• The Box Model
• Color
• Font Styling + Webfonts
• Text Alignment + Sizing

‍

Additional Materials - Layout

• Layout
• Container Elements
• Grid vs Flexbox
• Grid
• Flexbox

‍

Introduction to Javascript, Basic Data Types + Operators

• What is Javascript?
• Numbers
• Strings
• Booleans
• Undefined / Null

‍

Javascript Program Flow + Data Structures

• Program Flow: Functions
• Program Flow: Conditional Statements
• Program Flow: Loops
• Data Structures: Arrays
• Data Structures: Objects
• Functions Are Just Variables
• More on Objects and The "this" Keyword

• Building Interactivity with DOM Manipulation
• Javascript Variables, Operators & Expressions
• Javascript Functions
• Javascript Classes
• Javascript Modules

‍

• Introduction
• Introduction to ES2015+
• JSX – an Introduction
• Rendering of Elements and Components in React
• State and Lifecycle Methods
• Event Handling
• Forms
• Lists, Fragments, and Conditional Rendering
• CSS and Styling
• Higher Order Components
• Functions as a Child and Render Props

• Context API
• Refs
• Error Boundaries
• Portals
• Code Splitting
• Typechecking with PropTypes, Flow, and TypeScript
• React Hooks – an Introduction
• Hooks in Action
• The Hooks API
• Routing in React
• State Management
• Internationalization

Personal Portfolio - One Pager Website with React

The goal of this project is to create a personal portfolio website using HTML, CSS, JavaScript, and React.

Introduction

• Features of Node.js
• Blocking and Non-blocking

‍

Fundamentals

• Input
• Console
• Buffer
• Events
• File System
• Globals
• Quiz Yourself on Node.js Fundamentals

‍

Advanced Topics

• Modules
• OS
• Process
• Net
• UDP
• HTTP
• REPL
• Quiz Yourself on Advanced Topics in Node.js

‍

Building a RESTful API with Express

• Introduction to Express
• Project Setup: Part One
• Project Setup: Part Two
• Implement Routing
• Install Nodemon
• Implement Middleware
• Build a RESTful API with Express
• Implement a Route Handler
• Implement Route Handlers for GET, PUT, and DELETE
• Enable CORS
• Error Handling
• Refactor the Controller
• Wrap Up
• Quiz Yourself on Building a RESTful API with Express

‍

Introduction to Database and MongoDB

• Introduction to Database
• What is RDBMS?
• What is a NoSQL Database?
• What is a MongoDB Database?
• When Should We Use the MongoDB Database?

‍

Create Database and Authorization

• Basic Guide for Examples
• Create and Drop MongoDB Database
• Create and Drop MongoDB Collections
• MongoDB Authorization
• MongoDB Data Types

‍

Performing CRUD Operations on MongoDB - Part 1

• Create Documents
• Read Documents: Part 1
• Read Documents: Part 2

‍

Performing CRUD Operations on MongoDB - Part 2

• Update Documents: Part 1
• Update Documents: Part 2
• Delete Documents
• Bulk Write - Part 1
• Bulk Write: Part 2
• Store and Retrieve Large Files with GridFS

‍

‍

Integrating MongoDB With Express.Js

• Integrating MongoDB with Express.js
• Connecting to MongoDB with Express.js
• Building API endpoints with MongoDB integration

‍

Authentication with Passport.js and JSON Web Tokens

• Introduction to Passport.js and JSON Web Tokens
• Project Setup: Part One
• Project Setup: Part Two
• Wrap Up
• Quiz Yourself on Authentication with Passport.js and JWTs

‍

Deployment And Optimization

• Deploying a MERN stack application
• Performance optimization techniques
• Monitoring and logging

‍

The Server-side

• MVC
• Directory Structure
• A Hello World Application in Express
• Express Route Handlers
• Nodemon
• Test Yourself: Server-side Architecture

‍

User Authentication with a JSON Web Token

• Authorization and Authentication
• The User Model
• Sign-up Implementation
• Email Confirmation
• Login implementation
• Middleware for Authentication
• Test Yourself: JSON Web Tokens

‍

Set up the Client-side Environment

• React
• A Hello World Application in React
• React Router
• Style the Application
• Test Yourself: Client-Side Environment

‍

Business Logic

• Upload Files
• Process Text Files
• Process an Image
• Test Yourself: Business Logic

‍

Server-side Routes

• Read Files
• Update and Delete Files
• Test Yourself: CRUD Operations

‍

Client-side Routes

• File Uploads
• Retrieve Files
• Update Files
• Delete and Download a File
• Test Yourself: Client-side CRUD Operations

‍

Recommended Project Idea

• Todo List Application:
• Weather App
• URL Shortener
• Recipe App
• Movie Recommendation System

‍

Project Reference

• Pre-designed UI framework

‍

• Hosting The Project
• Why Github is popular?
• From Local to Github
• Code Review and Refactoring

• Resume Review and Creation
• Mockup Interview
• LinkedIn Profile Creation
• Personal Branding and Portfolio Building
• Job Search Strategies
• Agile Methodology