Full Stack Dev (MERN)
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.
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.
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