Full Stack Dev (MERN)

Course Description

By the end of the course, students will have a strong foundation in full-stack development with the MERN stack and be equipped with the skills to build their own web applications. They will also have a personal portfolio website to showcase their work, preparing them for a successful career in the tech industry.

Course Goals

In the MERN Full Stack Development course, you'll gain a comprehensive understanding of the MERN stack and essential technologies, as well as practical experience with React.js, Node.js, Express.js, MongoDB, and JWT authentication. The course also includes weekly projects and exercises, a final project focused on building a personal portfolio website, and career preparation resources.

Week
1
( 18 Hours )
Introduction to Full Stack Development

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

Week
2
( 18 Hours )
HTML and CSS Fundamentals

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

Week
3
( 18 Hours )
Learn Javascript (Part 1)

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
Week
4
( 18 Hours )
Learn Javascript (Part 2)
  • Building Interactivity with DOM Manipulation
  • Javascript Variables, Operators & Expressions
  • Javascript Functions
  • Javascript Classes
  • Javascript Modules

Week
5
( 18 Hours )
Deep Dive to React.js (Part 1)
  • 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
Week
6
( 18 Hours )
Deep Dive to React.js (Part 2)
  • 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
Week
7
( 18 Hours )
Front-End Project (Personal Website)

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.

Week
8
( 18 Hours )
Introduction to Node.js

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

Week
9
( 18 Hours )
Introduction to Express.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

Week
10
( 18 Hours )
Introduction to MongoDB

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

Week
11
( 18 Hours )
Advanced Full Stack Overview

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

Week
12
( 18 Hours )
Full Stack Project Guide (Part 1)

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

Week
13
( 18 Hours )
Full Stack Project Guide (Part 2)

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

Week
14
( 18 Hours )
Full-Stack Project Development (Part 1)

Recommended Project Idea

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

Project Reference

  • Pre-designed UI framework

Week
15
( 18 Hours )
Project Completion and Review (Part 2)
  • Hosting The Project
  • Why Github is popular?
  • From Local to Github
  • Code Review and Refactoring
Week
16
( 18 Hours )
Career Preparation
  • Resume Review and Creation
  • Mockup Interview
  • LinkedIn Profile Creation
  • Personal Branding and Portfolio Building
  • Job Search Strategies
  • Agile Methodology