Software Entrepreneur



Home Courses Software Entrepreneur

HTML5, CSS3, Bootstrap4 (23 Projects, 13 Capstone Projects and 350 Challenges)

  • @keyframes, Animation and Transition, Cascade, Specificity, Inheritence, Component Based Design
  • Writing Reusable Code, Huge Projects with Flexbox, Huge Projects with CSS Grid, Sass
  • Global Variables, Managing Media Queries, Mobile First vs Desktop First, NPM ecosystem
  • Faster Page Load Responsive Images, Videos in HTML and SVG Images for Background Effect
  • Bootstrap 4 include Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups,
  • Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions and Carousels.
  • HTML5, CSS3, Responsive Web Sites, CSS Grid, Flexbox, Custom Fonts, Color Palettes

Projects:

  • Project 1 - Gov. Collage (20 C)
  • Project 2 - CHAI PANI (10 C)
  • Project 3 - Valley Tours (10 C)
  • CAPSTONE PROJECT 001
  • Project 4 - PHOTO CARDS (10 C)
  • Project 5 - Software House (10 C)
  • Project 6 - Coding Guru (10 C)
  • CAPSTONE PROJECT 002
  • Project 7 - Ninja Coding (10 C)
  • Project 8 - Food Heaven (10 C)
  • Project 9 - Photographer (10 C)
  • CAPSTONE PROJECT 003
  • Project 10 - Gana Bajana (10 C)
  • CAPSTONE PROJECT 004
  • Project 11- Northern Valley Tour (Huge Project) 20 C
  • CAPSTONE PROJECT 005
  • Project 12 - PC Hotel Huge Project (20 C)

  • CAPSTONE PROJECT 006
  • Project 13 - ZameenDotCom Huge Project (20 C)
  • CAPSTONE PROJECT 007
  • Project 14 - Nirala Sweets (10 C)
  • Project 15 - Modren Appartments (20 C)
  • CAPSTONE PROJECT 008
  • Project 16 - Interwood (20 C)
  • Project 17 - Toyota Show Room (20 C)
  • CAPSTONE PROJECT 009
  • Project 18 - Bandu Khan Restaurant (20 C)
  • Project 19 - Developer Portfolio (20 C)
  • CAPSTONE PROJECT 010
  • Project 20 - Netsol Web Site (10 C)
  • Project 21 - Atif Aslam Studio (10 C)
  • CAPSTONE PROJECT 011
  • Project 22- Admin Web Site (10 C)
  • CAPSTONE PROJECT 012
  • Project 23 - Revision (40 C)
  • CAPSTONE PROJECT 013

JavaScript ES/5, ES/6, ES/7, ES8, ES9, ES10
(33 Projects, 10 Capstone Projects, 20 Assignments and 510 Challenges)

  • AJAX and APIs, NPM, Webpack, Babel
  • ES6: arrow functions, classes, default and rest parameters
  • ES7/ES8 Object. values / Object. Entries, String padding, Object. getOwnPropertyDescriptors
  • Trailing commas in function parameter lists and calls
  • ES9 Lifting template literal restriction, Asynchronous iterators, Promise, Unicode property escapes in regular expressions
  • RegExp lookbehind assertions, Object Rest/spread properties, RegExp named capture groups
  • ES10 Array. Flat, String. trimStart/trimEnd, Object. fromEntries
  • Optional Catch Binding, Function toString Revision, Symbol Description Accessor

Project 1 - Build an ToDo App (25 C)

  • Javascript structure
  • Exploring String Methods
  • Exploring Number Methods
  • Constant Variables
  • Bonus: Variables with var
  • JavaScript Arrays
  • Array Basics
  • Manipulating Arrays with Func.
  • Looping Over Arrays
  • The For Loop
  • Searching Arrays
  • Filtering Arrays
  • Sorting Arrays
  • Improve Our Expense Tracker
  • Javascript in the Browser
  • Setting up a Web Server
  • JavaScript in the Browser
  • DOM Manipulation

  • DOM Challenge
  • Adding Elements via the DOM
  • Handling User Interaction
  • Advanced Queries
  • Inputs and Live Data Filtering
  • Rendering Our Filtered Data
  • Todo Filter Challenge
  • Working With Forms
  • Checkboxes
  • Dropdowns
  • Data Storage, Libraries, and More
  • Splitting up Our App. Code
  • Refactor Challenge
  • Debugging Our Applications
  • Complex DOM Rendering
  • Setting up a Third-Party Library
  • Targeting by UUID
  • Checkbox Challenges
  • Capstone Project 001

Project 2 - Edit Note Page (25 C)

  • Syncing Data Across Pages
  • JavaScript Dates
  • Moment
  • Integrating Dates
  • Arrow Functions
  • Conditional (Ternary) Operator

  • Truthy and Falsy Values
  • Type Coercion
  • Catching and Throwing Errors
  • Handling Application Errors
  • Working in Strict Mode
  • Capstone Project 002

Project 3 - Hangman Game (50 C)

  • Advanced Objects and Functions
  • Object Oriented Programming
  • Constructor Functions
  • Setting up the Prototype Object
  • Prototypical Inheritance
  • Primitives and Objects
  • Creating Subclasses
  • Getters and Setters
  • Update: Fixing an Edge Case
  • Asynchronous JavaScript
  • HTTP Requests from JavaScript
  • HTTP Headers and Errors
  • Exploring Another API
  • Callback Abstraction
  • Async vs. Synchronous Execution
  • Callback Abstraction Challenge
  • Exploring Promises

  • Converting to Promises
  • Promise Chaining
  • The Fetch API
  • A Fetch Challenge
  • A Promise Challenge
  • Async/Await
  • Integrating Data into the App
  • Cross-Browser Compatibility
  • Exploring Babel
  • Setting up Our Boilerplate
  • Avoiding Global Modules
  • Exploring Webpack
  • Setting up Webpack
  • Adding Babel into Webpack
  • Webpack Dev Server
  • Environments and Source Maps
  • Converting Hangman App
  • Capstone Project 003

Project 4 - Google Doc. App (10 C)

  • Explore Doc - Class Doc. App
  • DocumentApp Class overview
  • Get Document Contents
  • Document Body Contents
  • Class DocumentApp
  • Document Body Updates
  • Document Body Children
  • Document Classes & Method
  • Simple Copy Doc Script
  • DocumentApp Bound Script
  • Base Values within Script

  • HTML in Google Documents
  • Bound Content Interaction
  • Ranged elements in Document
  • Translate Selected Content
  • Search Content Replace With
  • Find Content Update Attributes
  • Content Selection Exercise
  • DocumentApp Create Content
  • insert Image DocumentApp
  • Doc. App Template Exercise

Project 5 - Spreadsheet Adv. (10 C)

  • StandAlone SpreadSheetApp
  • Google SpreadSheetApp Meth.
  • Creating Content and Styling.
  • Spreadsheet data to Doc Table
  • Spreadsheet data dynamic
  • SpreadSheet Tracker Exercise
  • SpreadSheet Sheet Class
  • From one sheet to another
  • Bound Spreadsheet App
  • Google Sheets Functions
  • UI menu options Spreadsheet
  • Spreadsheet UI Sidebar Modal
  • Get Selected Content
  • Cell Selection Add to Sheet
  • Range to Another Sheet CopyTo
  • Selecting Cell Values Loops
  • Sidebar content HTML
  • Script More UI options

  • HTML to backend GS code.
  • Google Sheet content to Client
  • Triggers OnEdit OnChange
  • Generate Random Content
  • Adding new Column
  • Add Formulas Set Colors
  • HTML modal to Spreadsheet
  • Sheet Data to HTML file
  • Get Sheet Data
  • Run Script Client Side
  • Response with Google Sheet
  • Source Code HTML index file
  • Google Script Sites
  • Introduction to Google Sites
  • Publish Web App Google Script
  • Google Site Scripting
  • Google Script Web App html

Project 6 Google Drive (10 C)

  • Google Drive - DriveApp Class
  • Google DriveApp Class
  • Select Folder By ID
  • Create Folder DriveApp
  • DriveApp create File
  • SpreadSheet with DriveApp
  • Source Code
  • Create Doc and Move it
  • Source Code
  • DriveApp Search
  • DriveApp Search Files
  • DriveApp searchFolders Params
  • Add editors and Delete
  • Redirect on search string
  • Exercise WebApp Redirector

Project 7 - Google GmailApp (10 C)

  • Make Draft GmailApp
  • View your Draft Email
  • Use HTML Template email
  • Send out a bunch of Emails
  • Chat Threads GmailApp
  • Get Gmail Messages

Project 8 - Calendar App (10 C)

  • Calendar App Service
  • Add Location Info Calendar App
  • Calendar Event with options
  • Full Day events Calendar App
  • Calendar App Event Series
  • Calendar App Date Time
  • Easy way to enter Events
  • More Calendars
  • Calendar Settings
  • Get All Calendars
  • Calendars By Name
  • Source Code
  • Calendar Events
  • Calendar Events Explored
  • Calendar Events / spreadsheet
  • Google Calendar Events Invites
  • Send Weekly Calendar Events

Project 9 - Image Uploader (10 C)

  • Apps Script Image Uploader
  • HTML Content Service
  • HTML Content Template File
  • HTML Content from File
  • Create the HTML form
  • Send Data to Script Backend
  • Send Image to Google Script
  • Image upload Tweaks
  • App tracking uploads
  • Send Email notification
  • Application Image Uploader

Project 10 - Email responder (10 C)

  • Setup Google Form
  • Spreadsheet Bound Script
  • Script Setup Project triggers
  • Setup Email to Send
  • MailApp Send Email
  • Email HTML template
  • HTML Service replace content
  • HTML to PDF and Attach it
  • Send automatic emails
  • iterate Sheet Data Send Emails

Project 11 - Website form submission (10 C)

  • Contact Form Setup
  • Create Spreadsheet and setup
  • Sending an Email with Script.
  • Google Script send email
  • Spreadsheet App add content
  • Test Sheet Google Script
  • Create Web App
  • Get Data Parameters
  • JavaScript Fetch
  • Outdate HTML in Submit
  • Send email on submit
  • Email template
  • Create Web App

Project 12 - Calendar App Advance (10 C )

  • CalendarApp Setup
  • Add SideBar Dialog
  • HTML service Method
  • CalendarApp Methods
  • New Event Form HTML.
  • New Event .html file
  • JavaScript Form Submit Data
  • Google Script Run
  • HTML file source code
  • Spreadsheet Tweaks
  • Create Event Checker
  • Client Side to Server Side
  • SheetMaker Spreadsheet
  • Get Event Data for Sheet
  • Search Title Update
  • WebApp Option to add

Project 13 - PDF upload (10 C)

  • PDF Uploader Project Section
  • Spreadsheet App
  • Update Spreadsheet content
  • Get Content from Spreadsheet
  • Add Content to Spreadsheet
  • Spreadsheet content
  • Create Web App.
  • Templated HTML webApp
  • Index page source
  • Sheet Values on Client Side
  • Upload PDF to Drive
  • Upload html source code

Project 14 - Coffee Shop (10 C)

  • Setup
  • Header HTML
  • Header CSS
  • Video HTML
  • Video CSS
  • Navigation Button
  • Navbar HTML
  • Navbar CSS
  • Switch Button
  • Preloader HTML CSS
  • Preloader JS
  • Navbar JS
  • Refactor Javascript
  • Video Play Pause
  • About HTML
  • About CSS
  • Drink HTML
  • Drink CSS
  • Work HTML
  • Work CSS
  • Work Modal JS
  • Contact HTML
  • Contact CSS

Project 15 - Car Dealership (10 C)

  • Setup
  • Navbar HTML
  • Navbar CSS
  • Header HTML
  • Header CSS
  • Section Title
  • Skills Section
  • Preloader
  • Inventory Section
  • Question Section
  • Featured Section
  • Footer Section
  • Javascript Code Struct
  • Create Data
  • Display Featured Cars
  • Display All Cars
  • Inventory Filter

Project 16 - Wikipedia (10 C)

  • Overview
  • Setup
  • HTML
  • CSS
  • Javascript Setup
  • Show/Hide Gif Image
  • Wikipedia API Res.
  • Display Data

Project 17 - Comfy House (10 C)

  • Navbar
  • Hero
  • Products
  • Cart and Cart Overlay
  • Javascript Setup
  • Getting Products
  • Display Products
  • Store Products in Local Storage
  • getBagButtons Method
  • Add Product To The Cart
  • Set Cart Values
  • Display Cart Item
  • Show Cart
  • SetupAPP Method
  • Cart Logic - Clear Cart
  • Contentful Intro
  • Add Data To Contentful
  • Get Data From Contentful
  • Go Live On Netlify
  • Finished Project

Project 18 - Online Shopping(10 C)

  • Add Items in Cart
  • Remove Items Cart
  • Saving Courses Into Storage
  • Print from Storage on Load
  • Clearing from Storage
  • Remove from Storage

Project 19 - Simulate Email with Form (10 C)

  • Validating Fields
  • Send the email
  • Email is sent
  • Restart form
  • Object Literals
  • Object Constructor
  • Constructors for Data Types
  • Prototypes
  • Inheriting Const. & Proto.
  • The Object Create Method
  • Creating a Class
  • Inheriting a Class and it's meth.

Project 20 - Car Insurance (10 C)

  • Kicking off the Project
  • Reading Values from the Form
  • Printing a message
  • Calculating the Insurance
  • Calculate Insurance Func.
  • Printing the Result
  • Displaying a Summary
  • Finishing this Example
  • From Prototypes to ES6 Classes

Project 21 - Adv. Budget APP (10 C)

  • Creating the Classes
  • Validating the Expenses
  • Adding Expenses into the List
  • Working with the Rem. Budget

Project 22 - Name Generator with AJAX & Rest API (10 C)

  • Fields from the form
  • Making the Ajax Request
  • Printing the Results
  • Asynchronous JavaScript
  • Callbacks
  • Promises
  • Fetch API
  • Fetch API - Loading Text
  • Fetch API - Load Content
  • FETCH API - Load Content
  • Arrow Functions and Fetch API
  • Async / Await
  • Async Await from a REST API

Project 23 - Crypto Currencies (10 C)

  • Starting the project
  • Querying the Rest APIS
  • Reading Values from the Form
  • Querying the Rest API
  • Printing the Results
  • Finishing the Project

Project 24 - EventBrite (10 C)

  • Creating the EventBrite App
  • Categories into the Select
  • Reading the form content
  • Querying the REST API
  • Printing the Events

Project 25 - Quiz Game (10 C)

  • Adding the Main Containers
  • Calling the Questions API
  • The Algorithm
  • Injecting the Right Answer
  • Possible Questions
  • Allowing the user to select 1
  • Validating at least 1 answer
  • Checking answer
  • Adding the Totals
  • Saving the Total
  • Destructuring
  • Basic Object Destructuring
  • Destructuring inside another
  • Destructuring a Arrays
  • Symbols
  • Sets
  • Maps
  • Iterators
  • Generators
  • Built Iterators In JavaScript
  • Regular Expressions
  • Capstone Project 004

Project 26 - PerfectCocktail (10 C)

  • Project and the API
  • Form Event Listener
  • Displaying a Message
  • Querying the Rest API
  • Building the Results Template
  • REST API to the Template
  • Making our Rest API
  • Templates in our App
  • Show the Recipe
  • Recipe into a Modal Function
  • Displaying the Recipe Info
  • Select from the REST API
  • Querying By Category
  • Favorites in the Favorites page
  • Removing Favorites
  • Importing / Exporting Variables
  • Importing / Exporting Functions
  • Importing / Exporting Classes
  • Inherit from other Classes
  • Capstone Project 005

Project 27 - Lyrics Search Engine with Modules (10 C)

  • Importing User Interface
  • Validating the Form
  • Querying the REST API
  • Capstone Project 006

Project 28 - Appointment Management (10 C)

  • Client Side Storage IndexedDB
  • Main Selectors for the User
  • Creating the IndexedDB
  • Working with the Schema
  • Creating an Object
  • Inserting Record in Database
  • Displaying the Records
  • Displaying a Conditional Text
  • Adding a Remove Button
  • Deleting Rec. from the Database
  • The forEach method
  • The .map method
  • The .filter method
  • The .find method
  • The .reduce Method
  • The .some Method
  • Capstone Project 007

Project 29 - Search Form with Higher Order Functions (10 C)

  • Kicking off the Project
  • Displaying all the Cars
  • Reading the Selected Element
  • Higher Order Function
  • Filtering by Year
  • Filtering by Price
  • Building the No Results Function
  • Installing NodeJS & NPM
  • Webpack configuration file
  • Creating an NPM Script
  • Adding Babel
  • Adding CSS into our JS Bundles
  • Adding SASS (SCSS)
  • Creating Files with Webpack
  • Adding webpack dev server
  • Capstone Project 008

Project 30 - Budget Controller (50 C)

  • Project Setup and Details
  • Project Planning
  • Imp. the Module Pattern
  • Reading Input Data
  • Creating an Initialization Func.
  • Adding a New Item to the UI
  • Clearing Our Input Fields
  • Event Delegation
  • Deleting an Item from the UI
  • Percentages: Controller
  • Percentages: Budget Controller
  • Percentages: UI Controller
  • Formatting Our Budget
  • Displaying the date
  • Improving the UX
  • Capstone Project 009

Project 31 - Shopping Cart API (50 C)

  • Making our First API Calls
  • The Search Model
  • The Search Controller
  • The Search View
  • The Recipe View
  • Updating Recipe Servings
  • The Shopping List Model
  • The Shopping List View
  • The Shopping List Controller
  • The Likes Model
  • The Likes Controller
  • The Likes View
  • Data with localStorage
  • Capstone Project 010

Project 32 - React - Building a Complete Project (50 C)

  • Node, NPM, Create-react-app
  • Your First Component
  • JSX & Building the Form
  • Adding CSS into the Project
  • Events in ReactJS
  • The React State
  • Validate a Form in React
  • Handling Form Submissions
  • Helper Functions in React
  • Building the Result Component
  • Displaying the Results
  • Rendering of Components
  • Show a Loading Spinner
  • Project Deployment



  • Assignment 001
  • Assignment 002
  • Assignment 003
  • Assignment 004
  • Assignment 005
  • Assignment 006
  • Assignment 007
  • Assignment 008
  • Assignment 009
  • Assignment 010

Project 33 - NodeJS - Website -w/ Sequelize Express & PUG -(10 C)

  • Creating the Express Server
  • Adding Express Router to create a Website with Multiple Urls
  • Working with Views
  • Building a Master View
  • Creating the Header and the Footer
  • Adding the Static Files and linking the Public Folder
  • Passing Variables to the Views
  • Passing the Name of the Page to the Title
  • Creating the Sitename for Production & Development
  • Working with the About Us Page
  • Installing Sequelize and Creating the Database
  • Connecting our Website with the Database
  • Adding the Table Columns
  • Defining the Model
  • Querying the Database and Displaying the Travels
  • Working with the Single Travel Page
  • Finishing the Single Travel Page
  • Creating the Form for the Testimonials
  • Creating the Testimonials Table & Defining the Model
  • Reading the Form Data Processing..
  • Adding Validation to the Form
  • Inserting the Testimonial into the Database



  • Displaying the Testimonials into the Page
  • Fixing the Problems with the Testimonials Page
  • Building the Index Page
  • Working with About Us & Discount Section in the Index Page
  • Printing the Travels in the Homepage and Creating a Partial
  • Passing Multiple Queries to the View
  • Highlighting the Current Page
  • Adding the C (Controllers) into our MVC Project
  • Finishing the Controllers
  • Adding Async / Await into our project
  • Assignment 011
  • Assignment 012
  • Assignment 013
  • Assignment 014
  • Assignment 015
  • Assignment 016
  • Assignment 017
  • Assignment 018
  • Assignment 019
  • Assignment 020

Node, React, Gatsby with Graphql and WordPress
(38 Projects, 20 Capstone Projects and 820 Challenges)

  • Express web servers and APIs, Store data with Mongoose and MongoDB, GraphQL,
  • Prisma to store and access data from a production database
  • Apollo Client to communicate with GraphQL, Cassandra
  • Network Programming with Node, React, Flux, Redux, Webpack, React-Router
  • Firebase,Full-stack applications with React and GraphQL, Everything with Gatsby.js
  • React-Apollo in-depth, including Query and Mutation Components
  • Apollo Boost within React applications, Authenticate your GraphQL application using JSON Web Tokens
  • React patterns such as higher-order components and render props, React Router 4
  • state management patterns, Animate React app with React Pose, Gotchas
  • Gulp, Git, Heroku, Socket.io, React Hooks, Context Api
  • Netlify, Paypal, Stripe Api, Surge.sh, Firestore, Saga, Snipcart
  • Strapi.io, Material-ui, Progressive Web Apps, sitemap and robots.txt
  • Redux Thunk and Redux Saga, siteMetadata, SEO
  • Testing your application with Jest, Enzyme and snapshot testing
  • PHP to manipulate the data of a WordPress, JavaScript to add on-the-fly interactivity to a WordPress
  • Custom block types for the "Gutenberg", JavaScript libraries that ship with Gutenberg
  • JS Approach of using ES6/7/8/9/10, JSX, React, Webpack With Wordpress
  • compile SASS to CSS, bundle and minify your JS and CSS files for Wordpress
  • Integrating ESLint, Prettier and husky in projects, Guterberg with Redux and React
  • Wordpress as a backend to build Application with Gatsby JS (with React JS & GraphQL)

Project 1 (50 C) - Notes App

  • Node.js Module System (Notes App)
  • Importing Node.js Core Modules
  • Importing npm Modules
  • Global npm Modules and nodemon
  • File System and Command Line Args (Notes App)
  • Section Intro: File System and Command Line Args
  • Getting Input from Users
  • Argument Parsing with Yargs: Part I
  • Argument Parsing with Yargs: Part II
  • Storing Data with JSON
  • Adding a Note
  • Removing a Note
  • ES6 Aside: Arrow Functions
  • Refactoring to Use Arrow Functions
  • Listing Notes
  • Reading a Note
  • Debugging Node.js (Notes Apps)
  • Section Intro: Debugging Node.js
  • Debugging Node.js
  • Error Messages

Project 2 (20 C) - Weather App

  • Asynchronous Node.js (Weather App)
  • Asynchronous Basics
  • Call Stack, Callback Queue, and Event Loop
  • Making HTTP Requests
  • Customizing HTTP Requests
  • An HTTP Request Challenge
  • Handling Errors
  • The Callback Function
  • Callback Abstraction
  • Callback Abstraction Challenge
  • Callback Chaining
  • ES6 Aside: Object Property Shorthand and Destructuring
  • Destructuring and Property Shorthand Challenge
  • Bonus: HTTP Requests Without a Library
  • Web Servers (Weather App)
  • Section Intro: Web Servers
  • Hello Express!
  • Serving up HTML and JSON
  • Serving up Static Assets
  • Serving up CSS, JS, Images, and More
  • Dynamic Pages with Templating
  • Customizing the Views Directory
  • Advanced Templating
  • Styling the Application
  • Accessing API from Browser (Weather App)
  • ES6 Aside: Default Function Parameters
  • Browser HTTP Requests with Fetch
  • Creating a Search Form
  • Wiring up the User Interface
  • Application Deployment (Weather App)
  • Joining Heroku and GitHub
  • Version Control with Git
  • Exploring Git
  • Integrating Git
  • Setting up SSH Keys
  • Pushing Code to GitHub
  • Deploying Node.js to Heroku
  • New Feature Deployment Workflow
  • Avoiding Global Modules

Project 3 (25 C) - Task App

  • MongoDB and Promises (Task App)
  • Section Intro: Databases and Advanced Asynchronous Development
  • MongoDB and NoSQL Databases
  • Installing MongoDB on Windows
  • Installing Database GUI Viewer
  • Connecting and Inserting Documents
  • Inserting Documents
  • The ObjectID
  • Querying Documents
  • Promises
  • Updating Documents
  • Deleting Documents
  • REST APIs and Mongoose (Task App)
  • Setting up Mongoose
  • Creating a Mongoose Model
  • Data Validation and Sanitization
  • Structuring a REST API
  • Installing Postman
  • Resource Creation Endpoints
  • Resource Reading Endpoints
  • Promise Chaining
  • Promise Chaining Challenge
  • Async/Await
  • Integrating Async/Await
  • Resource Updating Endpoints
  • Resource Deleting Endpoints
  • Separate Route Files

Project 4 (50 C) -Task App ver 2

  • API Authentication and Security (Task App)
  • Securely Storing Passwords
  • Logging in Users
  • JSON Web Tokens
  • Generating Authentication Tokens
  • Express Middleware
  • Accepting Authentication Tokens
  • Advanced Postman
  • Logging Out
  • Hiding Private Data
  • Authenticating User Endpoints
  • The User/Task Relationship
  • Authenticating Task Endpoints
  • Cascade Delete Tasks
  • Sorting, Pagination, and Filtering (Task App)
  • Working with Timestamps
  • Filtering Data
  • Paginating Data
  • Sorting Data
  • File Uploads (Task App)
  • Adding Support for File Uploads
  • Validating File Uploads
  • Validation Challenge
  • Handling Express Errors
  • Adding Images to User Profile
  • Serving up Files
  • Auto-Cropping and Image Formatting
  • Sending Emails (Task App)
  • Section Intro: Sending Emails
  • Exploring SendGrid
  • Sending Welcome and Cancelation Emails
  • Environment Variables
  • Creating a Production MongoDB Database
  • Heroku Deployment
  • Testing Node.js (Task App)
  • Jest Testing Framework
  • Writing Tests and Assertions
  • Writing Your Own Tests
  • Testing Asynchronous Code
  • Testing an Express Application
  • Jest Setup and Teardown
  • Testing with Authentication
  • Advanced Assertions
  • Mocking Libraries
  • Wrapping up User Tests
  • Setup Task Test Suite
  • Testing with Task Data

Project 5 (25 C) - Chat App

  • Real-Time Web Applications with Socket.io (Chat App)
  • Creating the Chat App Project
  • WebSockets
  • Getting Started with Socket.io
  • Socket.io Events
  • Socket.io Events Challenge
  • Broadcasting Events
  • Sharing Your Location
  • Event Acknowledgements
  • Form and Button States
  • Rendering Messages
  • Rendering Location Messages

  • Working with Time
  • Timestamps for Location Messages
  • Styling the Chat App
  • Join Page
  • Socket.io Rooms
  • Storing Users
  • Tracking Users Joining and Leaving
  • Sending Messages to Rooms
  • Rendering User List
  • Automatic Scrolling
  • Deploying the Chat Application
  • CAPSTONE PROJECT 001

Project 6 (100 C) - Blogging App (Huge App)

  • GraphQL Basics: Schemas and Queries
  • GraphQL Queries
  • GraphQL Queries
  • Nested GraphQL Queries
  • Setting up Babel
  • ES6/7 Import/Export
  • Creating Your Own GraphQL API
  • GraphQL Scalar Types
  • Live Reload for GraphQL-Yoga
  • Creating Custom Types
  • Operation Arguments
  • Working with Arrays
  • Relational Data: Basics
  • Relational Data: Arrays
  • GraphQL Basics: Mutations
  • Creating Data with Mutations
  • The Object Spread Operator with Node.js
  • The Input Type
  • Deleting Data with Mutations
  • A Pro GraphQL Project Structure
  • Updating Data with Mutations
  • GraphQL Basics: Subscriptions
  • Setting up a Comments Subscription
  • Setting up a Posts Subscription
  • Expanding the Posts Subscription for Edits and Deletions
  • Expanding the Comments Subscription for Edits and Deletions
  • Enums
  • Database Storage with Prisma
  • Prisma Windows Setup
  • Prisma 101
  • Exploring the Prisma GraphQL API
  • Add Post type to Prisma
  • Adding Comment Type to Prisma
  • Integrating Prisma into a Node.js Project
  • Using Prisma Bindings
  • Mutations with Prisma Bindings
  • Using Async/Await with Prisma Bindings
  • Checking If Data Exists Using Prisma Bindings
  • Customizing Type Relationships
  • Modeling a Review System with Prisma: Set Up
  • Modeling a Review System with Prisma: Solution
  • Authentication with GraphQL
  • Section Intro: Authentication with GraphQL
  • Adding Prisma into GraphQL Queries
  • Integrating Operation Arguments
  • Refactoring Custom Type Resolvers
  • Adding Prisma into GraphQL Mutations

  • Adding Prisma into GraphQL Update Mutations
  • Allowing for Generated Schemas
  • Storing Passwords
  • Creating Auth Tokens with JSON Web Tokens
  • Logging in Existing Users
  • Validating Auth Tokens
  • Locking Down Mutations (Users)
  • Locking Down Mutations (Posts and Comments)
  • Locking Down Queries
  • Locking Down Individual Type Fields
  • Fragments
  • Cleaning up Some Edge Cases
  • Locking Down Subscriptions
  • Token Expiration
  • Password Updates
  • Pagination and Sorting with GraphQL
  • Pagination
  • Pagination Using Cursors
  • Working with createdAt and updatedAt
  • Sorting Data
  • Production Deployment
  • Creating a Prisma Service
  • Prisma Configuration and Deployment
  • Exploring the Production Prisma Instance
  • Node.js Production App Deployment
  • Node.js Production Environment Variables
  • Apollo Client and Testing GraphQL
  • Setting up a Test Environment
  • Installing and Exploring Jest
  • Testing and Assertions
  • Apollo Client in the Browser
  • Configuring Jest to Start the GraphQL Server
  • Testing Mutations
  • Seeding the Database with Test Data
  • Testing Queries
  • Expecting GraphQL Operations to Fail
  • Supporting Multiple Test Suites and Authentication
  • Testing with Authentication: Part I
  • Testing with Authentication: Part II
  • GraphQL Variables
  • Testing Comments
  • Testing Subscriptions
  • Test Case Ideas
  • Creating a Boilerplate Project
  • Using the Boilerplate Project
  • CAPSTONE PROJECT 002

Project 7 (20 C) - Ilmi Book Depot

  • Kraken Setup & Foundation
  • Routes & Views - Part A
  • Routes & Views - Part B
  • Database & Models
  • Admin CRUD - List & Add Books
  • Admin CRUD - Edit & Delete Books
  • Shopping Cart

Project 8 (20 C) - Document Handling

  • Cassandra Install & Setup
  • FindaDoc User Interface
  • Express Setup
  • Express Layout
  • Fetch Doctors From Cassandra
  • Add & Search Doctors

Project 9 (20 C) - Portfolio App

  • MySQL & App Setup
  • Add Projects
  • Display Projects
  • Edit & Delete Projects

Project 10 (20 C) - eLearning System

  • App & Kickstart Setup
  • Fetching Classes
  • Registering Users
  • Logging In Users
  • Instructor & Student Classes
  • Class Lessons

Project 11 (20 C) - RecipeBook

  • PostgreSQL Install & Database Setup
  • App & Dust Setup
  • Fetching & Displaying Recipes
  • Adding Recipes
  • Deleting Recipes
  • Editing Recipes
  • CAPSTONE PROJECT 003

Project 12 (50 C) - Indecision App

  • React Components
  • ES6/7 Classes
  • Creating a React Component
  • Nesting Components
  • Component Props
  • Events & Methods
  • Method Binding
  • What Is Component State?
  • Adding State to Counter App
  • Alternative setState Syntax
  • Build It: Adding State to VisibilityToggle
  • Indecision State
  • Stateless Functional Components
  • Default Prop Values
  • React Dev Tools
  • Removing Individual Options
  • Lifecycle Methods
  • Saving and Loading Options Data
  • Saving and Loading the Count
  • What Is Webpack?
  • Avoid Global Modules
  • Installing & Configuring Webpack
  • ES6/7 import/export
  • Default Exports
  • Importing npm Modules
  • Setting up Babel with Webpack
  • One Component per File
  • Source Maps with Webpack
  • Webpack Dev Server
  • ES6/7 class properties
  • Using a Third-Party Component
  • Section Intro: Using a Third-Party Component
  • Passing Children to Component
  • Setting up React-Modal
  • Styling React
  • Setting up Webpack with SCSS
  • Architecture and Header Styles
  • Reset That $#!*
  • Theming with Variables
  • Big Button & Options List
  • Styling the Options List
  • Styling Option Item
  • Styling React-Modal
  • Mobile Considerations
  • React-Router
  • Server vs. Client Routing

Project 13 (50 C) - Budget App

  • Setting Up Budget App
  • React-Router 101
  • Setting up a 404
  • Linking Between Routes
  • Organizing Our Routes
  • Query Strings and URL Parameters
  • Build It: Router for Portfolio Site
  • Redux
  • Setting up Redux
  • Dispatching Actions
  • Subscribing and Dynamic Actions
  • ES6 Object Destructuring
  • ES6 Array Destructuring
  • Refactoring and Organizing
  • Reducers
  • Working with Multiple Reducers
  • ES6 Spread Operator in Reducers
  • Spreading Objects
  • Wrapping up Our Reducers
  • Filtering Redux Data
  • Sorting Redux Data
  • React with Redux
  • Connecting React and Redux
  • Organizing Redux
  • The Higher Order Component
  • Connecting Store and Component with React-Redux
  • Rendering Individual Expenses
  • Controlled Inputs for Filters
  • Dropdown for Picking SortBy
  • Creating Expense Add/Edit Form
  • Setting up a Date Picker
  • Wiring up Add Expense
  • Wiring up Edit Expense
  • Redux Dev Tools
  • Filtering by Dates
  • Testing Your Application
  • Setting up Jest
  • Testing Expenses Action Generators
  • Testing Filters Action Generators
  • Testing Expenses Selector
  • Testing Filters Reducer
  • Testing Expenses Reducer
  • Snapshot Testing
  • Enzyme
  • Snapshot Testing with Dynamic Components
  • Mocking Libraries with Jest
  • Testing User Interaction
  • Test Spies
  • Testing AddExpensePage

  • Testing EditExpensePage
  • Testing ExpenseListFilters
  • Deploying Your Apps
  • Integrating Git into Our Project
  • Setting up SSH and Github
  • Production Webpack
  • Creating Separate CSS Files
  • A Production Web Server with Express
  • Deploying with Heroku
  • Firebase 101
  • Writing to the Database
  • ES6 Promises
  • Promises with Firebase
  • Removing Data from Firebase
  • Updating Data
  • Fetching Data From Firebase
  • Array Data in Firebase
  • Firebase with Redux
  • Asynchronous Redux Actions
  • Testing Async Redux Actions
  • Creating a Separate Test Database
  • Heroku Environment Variables
  • Fetching Expenses
  • Remove Expense
  • Update Expense
  • Firebase Authentication
  • Login Page and Google Authentication
  • Logging Out
  • Redirecting Login or Logout
  • The Auth Reducer
  • Private Only Routes
  • Public Only Routes
  • Private Firebase Data
  • Data Validation and Deployment
  • Styling Budget App
  • Styling Login Page
  • Styling Buttons
  • Styling Summary Area
  • Styling List Filters
  • Styling Inputs
  • Styling Expense Form
  • Styling Expenses List
  • Adding Loader
  • Babel Polyfill
  • Final Deployment
  • Creating the Final Boilerplate
  • Budget App Enhancements
  • CAPSTONE PROJECT 004

Project 14 (50 C) - Chef Zakir Recipes App (Huge Project)

  • Install Packages our for Project
  • Project Setup and Building a GraphQL Backend
  • Git Clone and npm Install Dependencies
  • Initialize Express Server
  • Create MongoDB Atlas Database and Connect To It
  • Create Mongoose Schemas
  • Add Apollo-Express Middleware
  • Create GraphQL Schema
  • Add bodyParser Middleware and Root Query Type
  • Queries and Mutations in GraphQL / GraphiQL
  • Create First Mutation
  • Create First Query
  • Create React Application with create-react-app
  • Clean Up App.js and Add Components Folder
  • Add Client Dependencies and Set Up ApolloClient/ApolloProvider
  • Create Queries Folder, Write First Apollo Query
  • Add cors Middleware to s Prevent Cross-Origin Error
  • Add Skeleton CSS and BaseStyles
  • Creating User Signup Functionality / Password Hashing
  • Create Signup Mutation
  • Hash User Password with bcrypt
  • Add Routing with react-router-dom
  • Add Form to Signup Component
  • Manage Input State in Signup Form
  • Add Mutation Component to Signup Component,
  • Write SIGNUP_USER Apollo Mutation
  • Add onSubmit to Signup Form, Run Signup Mutation on Client
  • Create Error Component, Clear State Upon Submit, Add Form Validation
  • Adding Signin Functionality
  • Create Signin Mutation on Backend
  • Implement Signin Mutation on Client
  • Add Token to Local Storage, Put Token on Authorization Header
  • Verify JWT on Backend to Get Current User
  • Add getCurrentUser Query, Create withSession Component
  • Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect
  • Adding User-Based Navigation to React
  • Add Navbar Component, Add Search Component
  • Add Navbar Links For Auth User
  • Make Navbar Dynamic, Add Custom Heading
  • Implement Signout Button
  • Map Over Recipes, Create Recipe Item Component
  • Create Recipe Page, Get Recipe Id From Path
  • Add getRecipe Query in Backend, Run Query on Recipe Page
  • Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form

  • Adding Ability to Create Recipes / Optimistic UI
  • Make AddRecipe a Stateful Component
  • Implement addRecipe Mutation on Client
  • Clear State and Redirect Upon addRecipe Mutation
  • Learning and Implementing Optimistic UI
  • Create searchRecipes Query on Backend,
  • Add Apollo Query to Search Component
  • Index Recipe Fields, Perform Search Query on Input Change Event
  • Add SearchItem Component
  • Adding User Profile
  • Add UserInfo Component to Profile Page
  • Add UserRecipes Component to Profile Page,
  • Implement getUserRecipes Query
  • Add Route Protection with withAuth Component
  • Deleting User Recipes and Refetching Queries
  • Add and Implement deleteUserRecipe Mutation
  • Add Optimistic UI to deleteUserRecipe Mutation
  • Add refetchQueries to deleteUserRecipe Mutation
  • Add refetchQueries to addRecipe Mutation
  • Provide Default Text for User Without Recipes
  • Adding Like / Unlike Functionality
  • Create LikeRecipe Component and Hide If Not Auth
  • Add and Implement likeRecipe Mutation
  • Develop Client-side Logic to Properly Toggle Like
  • Create and Implement unlikeRecipe Mutation with Optimistic UI
  • Prepare for Deployment
  • Use Fragments to Clean Up Queries
  • Deploy to Heroku
  • Add Additional CSS to Project
  • Adds imageUrl field on Recipe model and imageUrl input in addRecipe
  • Display Recipe Image on Home Page, Build Card
  • Style Recipe Page
  • Add CKEditor Component to AddRecipe Page for Formatted Instructions
  • Intro to React Pose Animation Library
  • Add React Pose Animation to Home Page
  • Add Spinners When Loading
  • Style Searchbar and Redeploy
  • Add Update Button, Make UserRecipes Stateful Component
  • Create Edit Recipe Modal
  • Populate Edit Recipe Modal
  • Create updateUserRecipe Mutation, Execute on Client
  • CAPSTONE PROJECT 005

Project 15 (10 C) - Github Profile Viewer Files & Webpack Setup

  • Main App Component
  • Profile Component
  • RepoList & Repo Components
  • Search Component
  • Github Profile Viewer Quiz

Project 16 (10 C) - Quick Application

  • App Component Setup
  • QuestionList & Question Component
  • Quiz Logic
  • Quick Quiz Application Quiz
  • CAPSTONE PROJECT 006

Project 17 (10 C) - MovieFinder

  • Flux Structure
  • Flux Setup & Preperation
  • SearchForm Component
  • Working With The API
  • Displaying Results
  • Firebase ContactList
  • Flux Boilerplate Setup
  • Adding Contacts To Store
  • Persisting Data To Firebase
  • Listing & Deleting Contacts
  • Edit & Update Contacts Part A
  • Edit & Update Contacts Part B

Project 18 (10 C) - Stickypad Notes

  • Stickypad Boilerplate Setup
  • AddNoteForm Component
  • Add & Fetch Notes From MongoLab
  • Display Sticky Notes
  • CAPSTONE PROJECT 007

Project 19 (10 C) InfoFinder Search Engine

  • InfoFinder Fluxboiler Setup
  • Search Form
  • Fetch Data From DuckDuckGo API
  • Display Results
  • InfoFinder Search Engine Quiz

Project 20 (10 C) Youtube Gallery

  • Boiler & Add Video Form
  • Persist Data To Firebase
  • Displaying Videos
  • Deleting Videos
  • CAPSTONE PROJECT 008

Project 21 (10 C) Socket.io Chat App

  • Webpack & React Setup
  • Server Connection Setup
  • Adding Messages
  • Display Messages
  • Username Functionality

Project 22 (10 C) Workout logger

  • Setup & ShowForm State
  • Add Workout Form
  • Using LocalStorage
  • Fetch & Display Workouts
  • Deleting Workouts
  • Workoutlogger Quiz
  • CAPSTONE PROJECT 009

Project 23 (20 C) Lahore Tours Project

  • Font Awesome Update
  • Install and Setup
  • Font Awesome Update!
  • Navbar Component Logic
  • Navbar Component SASS
  • Main Project Structure
  • TourList Component
  • Tour Component Logic
  • Tour Component Styling
  • Tour Info Toggle
  • Tour Component Delete
  • Deploy on Netlify with Drag and Drop
  • Deploy on Netlify with Continuous Deployment (Github, Git)
  • Controlled Inputs and Form Submission
  • Uncontrolled Inputs with ref
  • React Fragment and this.setState() Asynchronous

Project 24 (20 C) Todo List Project

  • Font Awesome Update!
  • Bootstrap and Folder Structure
  • Github and Netlify Pipeline
  • App Component
  • Input Component
  • Handle Change and HandleSubmit
  • Todo List Component
  • Todo Item Component
  • Clear List and Delete Method
  • Edit Method

Project 25 (50 C) Jumaira Beach Resort

  • Setup Files and CSS
  • Scaffold React Application
  • Page Setup
  • Router Setup
  • Navbar Component
  • Hero Component
  • Banner Component
  • Services Section
  • Local Data
  • Context Api Setup
  • Format Data
  • Loading Component Setup
  • Featured Rooms Component
  • Room Component
  • GetRoom Function

  • Single Room Setup
  • Single Room Hero
  • Styled-Hero
  • Single Room Complete
  • Room Container
  • Room List
  • Room Filter Setup
  • Type Filter
  • Capacity Filter
  • Price Filter
  • Size-Checkbox Filter
  • Contentful Interface
  • Content Model
  • Consume Content
  • Deploy On Netlify

Project 26 (50 C) Hafeez Center

  • Google Fonts, CSS Variables and App.css
  • Github - Netlify Pipeline
  • React-Icons Intro
  • Styled-Components Intro
  • Folder and Page Structure
  • React Router Setup
  • Navbar-Sidebar-Sidecart-Footer
  • Context API Intro
  • Context API Setup
  • Navbar Context API
  • Navbar Component
  • Sidebar Component
  • SideCart Component
  • Hero Component
  • Main Link Class
  • Default Page
  • About Page and Title Component
  • Contact Page
  • Formspree
  • Footer
  • Home Page Services Section
  • Products Data Intro
  • Setup State in Context
  • SetProducts
  • Image Url Fix
  • Featured Products Section
  • Product Component
  • All Products Section
  • AddToCart Method
  • AddTotals Method

  • SyncStorage Method
  • SetSingle Product Method
  • SetSingleProduct Page
  • SideCart Component
  • Cart Page Method Placeholders
  • CartPage Component Setup
  • CartPage Setup
  • Cart Columns Component
  • Cart Totals Component
  • Cart List Component
  • Cart Item Component
  • Increase Method Logic
  • Remove Item Logic
  • Clear Cart and Decrease Method Logic
  • Filter Products Context Setup
  • Filter Products Product Component Setup
  • Product Filter Component
  • Select Input Logic
  • Handle Change Method Logic
  • Sort Data Method Logic
  • Finished Project Before Adding Contentful
  • Contentful Interface
  • Setting Up Content Model
  • Adding Content
  • Retrieving Content
  • Setting Up Environment Variables and Netlify Build Variables
  • Image Fix
  • Paypal Button Setup
  • React Router Netlify Fix

Project 27 (20 C) Budget Calculator

  • Project Setup Files
  • Bootstrap Application
  • Folder Structure
  • Initial List
  • UseState Setup
  • App Component Return
  • Expense List
  • Expense Item
  • Expense Form
  • Controlled Inputs
  • Handle Submit Function
  • Alert Component
  • Clear Expenses
  • Delete Single Item
  • Edit Single Item
  • localStorage API
  • useEffect

Project 28 (10 C) CocktailDB Project

  • Folder Structure
  • React Router Dom Install and Basic Setup
  • First Pages
  • Error Page
  • Single Cocktail Setup - Url Parameters
  • Navbar
  • About Page
  • Error Page
  • Home Page Setup
  • UseEffect and API Setup
  • UseEffect Second Argument
  • GetCocktails
  • CocktailList Component
  • Cocktail Component
  • Single Cocktail HTTP Request
  • Single Cocktail JSX
  • Search Form Component
  • CAPSTONE PROJECT 010

Project 29 (50 C) Vintage Tech (Huge Project)

  • Folder Structure
  • Router Setup
  • Basic Routes
  • Error Page
  • Product Details Page
  • Header
  • Error Page
  • About Page
  • Hero Component
  • Context API Intro
  • Product Context Setup
  • Setting Values using useState
  • Url Value
  • Axios - Url - Response
  • UseEffect Setup
  • UseEffect Second Argument
  • Loading Component
  • Product List and Product
  • Featured Products
  • Single Product
  • Cart Context Setup
  • Empty Cart
  • Single Cart Item
  • Calculate Cart Total and Cart Items
  • Remove Item
  • Increase Amount
  • Decrease Amount
  • AddToCart and ClearCart
  • localStorage
  • CartLink
  • Strapi Install
  • Strapi Basics
  • Content Type
  • Add Products
  • API Access
  • Image Problem
  • Local Image Fix
  • Claudinary Image Fix
  • CartItem Image Fix
  • Login Page Setup
  • Login Page JSX
  • Login Page Initial Functionality
  • Strapi Auth Info
  • Register User Function
  • Login User Function
  • User Context Setup

  • User Context Complete
  • Alert Functionality
  • Alert Component
  • Using Alert
  • Hide Submit
  • Restrict Access
  • Restrict Checkout Page
  • Checkout Page Setup
  • Checkout Page JSX
  • Stripe Account and API Keys
  • Install react-stripe-elements
  • Integrate Stripe Elements
  • Get Stripe Token
  • Create Order Content Type
  • Submit Order Setup
  • Submit Order Complete
  • Strapi Backend
  • Deployment Info
  • Heroku Deployment
  • Setup Production App
  • Deploy FrontEnd
  • createStore and reducer
  • Separate Logic
  • Connect To Redux
  • Access Dispatch
  • mapDispatchToProps
  • Setup Multiple Reducers
  • Modal Component
  • Modal Reducer
  • Connect Modal to Redux
  • Action Creators
  • Products Reducer
  • Products Component
  • CAPSTONE PROJECT 011
  • CAPSTONE PROJECT 012
  • CAPSTONE PROJECT 013
  • CAPSTONE PROJECT 014
  • CAPSTONE PROJECT 015
  • CAPSTONE PROJECT 016
  • CAPSTONE PROJECT 017
  • CAPSTONE PROJECT 018
  • CAPSTONE PROJECT 019
  • CAPSTONE PROJECT 020

Project 30 - Canton Fair China (Huge Project)

  • Project setting up
  • Creating the Header
  • Header sidedrawer
  • Finishing the Header
  • Slider section
  • Adding a countdown
  • Finishing countdown
  • Venue NFO component
  • Highlight section
  • Button reusable component
  • Adding prices
  • Footer and Location section
  • Adding a Scroll To
  • Deployment to Surge

Project 31- Pakistan Super league (Huge Project)

  • Project setting up
  • Adding a Header
  • Finishing Header, adding Footer
  • Home: featured Animation
  • Home: Finishing featured Animation
  • Tags RC
  • Adding Firebase
  • Home: Adding the Match blocks component
  • Home: Finishing the Match blocks component
  • Home: Meet the players component
  • Home: Finishing player card
  • Home: Enroll reveal component
  • Home: Enroll, starting with form fields
  • Home: Finishing Enroll and form fields
  • Auth: Login component
  • Auth: Finishing Login
  • Auth: Creating a Dashboard
  • Auth: Private Routes
  • Auth: Public Routes
  • Admin: Matches endpoint
  • Admin: Edit Match - creating the form
  • Admin: Adding functions
  • Admin: Finishing Edit matches
  • Admin: Add Match
  • Admin: Players Endpoint
  • Admin: Add players - creating the form
  • Admin: Players fileuploader
  • Admin: Players fileuploader
  • Admin: Finshing add players
  • Admin: Edit player
  • Creating The Team component
  • The matches: Creating the component
  • The matches: Adding transitions
  • The matches: Filters
  • The matches: Finishing filters
  • Adding a 404 PAGE
  • Deploy to Production

Project 32 - Hollywood Hungama (Huge Project)

  • SERVER: initial setup
  • SERVER: .env and middleware
  • SERVER: User model
  • SERVER: Registering users
  • SERVER: Hashing passwords
  • SERVER: Login users and creating tokens
  • SERVER: Auth route
  • SERVER: Logout
  • SERVER: Brand model and routes
  • SERVER: Woods model and routes
  • SERVER:Adding products
  • SERVER: Getting products by ID
  • SERVER: Getting product by order.
  • CLIENT: Starting with the client
  • CLIENT: Header anf footer
  • CLIENT: Setting Redux up.
  • CLIENT: Adding a Register login component
  • CLIENT:Creating the login
  • CLIENT: Finishing the login
  • CLIENT: Creating the Register
  • CLIENT: Finishing register
  • CLIENT: Creating the dashoard
  • CLIENT: Preventing routes
  • CLIENT: Header links
  • CLIENT: Finishing Header links
  • CLIENT:Home slider promotions
  • CLIENT:Home cards
  • CLIENT: Finishing home cards
  • CLIENT: Startting the Shop component
  • CLIENT: Shop checkboxes
  • CLIENT: Finishing checkboxes
  • CLIENT: Adding Radio options
  • SERVER: Crating the shop route
  • SERVER: Finishing the shop route
  • CLIENT: Showing Shop cards
  • CLIENT: Shop loadmore button
  • CLIENT: Shop grids
  • ADMIN: Add products form
  • ADMIN: Finishing the Add products form

  • ADMIN: Manage Brands component
  • ADMIN: Finish Manage Brands.
  • CLIENT: Adding the Product Detail component
  • CLIENT: Product Info detail
  • CLIENT: Product detail, images section
  • CLIENT: Finishing the detail, adding Lightbox
  • CLIENT: Quick fix to Prod detail
  • CLIENT: Adding items to Cart
  • CLIENT: Finish the add to cart
  • ADMIN: Cart component
  • ADMIN: Creating the cart blocks.
  • ADMIN: Calculating the total.
  • ADMIN: Removing cart items.
  • ADMIN: Adding the Paypal btn
  • ADMIN: Finishing Paypal.
  • ADMIN: Creating the SUCCESS BUY route
  • ADMIN: Finishing the SUCCESS BUY route
  • ADMIN: Creating the Action and dispatching
  • ADMIN: User History
  • ADMIN: Updating personal info
  • ADMIN: Finishing Update personal info
  • ADMIN: Creating the Site Info
  • ADMIN: Getting the Site Info
  • ADMIN: Finishing Site info
  • GIT and GITHUB
  • Adding SSH keys - WINDOWS USERS
  • Adding Heroku to the mix
  • Deploying the project
  • EMAILS: Using Nodemailer
  • EMAILS: Sending a welcome Email
  • NOT FOUND: Adding not found route.
  • ORDER ID: Adding custom PO
  • ORDER ID: Sending email with PO
  • FILE UPLOAD: Uploading files
  • FILE DOWNLOAD: Downloading files
  • PASSWORD: Adding forgot password
  • PASSWORD: Finishing forgot password

Project 33 - Karachi Bazaar Project (Full Product)

  • The Long Road Ahead
  • Github + Project Repositories
  • Course Guideline + Github Links
  • E-commerce Homepage + SASS setup
  • Project Files + Modules
  • Project Component Architecture
  • CSS and SCSS files
  • Homepage and Directory Components
  • Styling Menu Items
  • Routing In Our Project
  • React Router Dom
  • withRouter()
  • Shopping Data
  • Shop Page
  • Collection Item
  • Header Component
  • Resources: Importing SVG In React
  • Sign In Component
  • Form Input Component
  • Custom Button Component
  • Adding a Project to Firebase
  • Note about Github
  • Google Sign In Authentication
  • Cloning From This Point On
  • Optional: How to fix 403: restricted_client error
  • Firebase Firestore
  • Storing User Data In Firebase
  • Storing User Data In Our App
  • Sign Up Component
  • Sign Up With Email and Password
  • Sign In With Email and Password
  • Firebase unsubscribe method
  • connect() and mapStateToProps
  • mapDispatchToProps
  • User Redirect and User Action Type
  • Cart Component
  • Card Dropdown Component
  • Implementing Redux In Cart
  • Add To Cart Styling
  • Cart Item Reducer
  • Adding Multiple Items To Cart
  • Cart Item Component
  • Selectors in Redux
  • Optional: Memoization
  • Reselect Library
  • User Selectors
  • Checkout Page
  • Extensible Code
  • Dispatch Action Shorthand
  • Checkout Item Component
  • Remove Items From Cart
  • Remove Items At Checkout
  • Local Storage and Session Storage
  • Redux Persist
  • Directory State Into Redux
  • Collection State Into Redux
  • Nested Routing in Shop Page
  • Improving Naming Of Component
  • Collection Routing and Selector
  • Optional: Currying
  • Data Normalization + Collection Page
  • Optional: Hash Tables vs Arrays
  • Data Flow In Our App
  • Thinking About Data Flow
  • Introduction To Stripe
  • Stripe Integration
  • Cloning From This Point On
  • Finishing Touches + Look Ahead
  • Deploying To Heroku
  • Resources: Buildpack
  • Linking Github to Heroku

  • Optimizing Production Build
  • CSS in JS
  • styled-components
  • styled-components In Our App
  • Thinking About Tradeoffs
  • Moving Our Shop Data To Firebase
  • Reviewing What We Have Done
  • Bringing Shop Data To Our App
  • Adding Shop Data To Redux
  • WithSpinner HOC
  • Observables + Observer Pattern
  • Promise Pattern
  • Redux Thunk
  • Container Pattern
  • Refactoring Is A Tradeoff
  • Correction about Saga flow
  • Generator Functions
  • redux-saga
  • Redux Thunk Into Saga
  • take(), takeEvery(), takeLatest()
  • Root Saga
  • Planning Ahead With Sagas
  • Google Sign In Into Sagas
  • Email Sign In Into Sagas
  • Reviewing Our Sagas
  • Recreating Persistence
  • Sign Out With Sagas
  • Clear Cart Saga
  • Converting Class Components With useState
  • useEffect In Our App
  • useEffect as ComponentWillUnmount()
  • useEffect Cheat Sheet
  • Custom Hooks
  • useReducer
  • useContext + useMemo + useCallback
  • Cloning From This Point On
  • Creating our Server Inside the Project
  • Backend Payment Route
  • Connecting Client To Server
  • Deploying To Production
  • Context Consumer + useContext Hook
  • Context Provider
  • Cart Context
  • Provider Context Pattern
  • Provider Context Pattern 2
  • GraphQL Playground
  • Backend Code
  • Apollo Container
  • Query With Variables
  • Adding Items With Apollo
  • CartItem Count With Apollo
  • React Lazy + Suspense
  • Error Boundaries
  • React.memo, PureComponent, shouldComponentUpdate
  • Performance In Our App
  • useCallback
  • useMemo
  • Gzipping and Compression
  • Progressive Web Apps
  • Converting Our App To PWA
  • Addendum to Server.js
  • Firebase Security Rules
  • Testing Libraries
  • Setting Up Jest
  • Asynchronous Tests
  • Mocks and Spies
  • Snapshot Testing
  • Snapshot Testing + Code Coverage
  • Testing Stateful Components

Project 34 - Murre Trip

  • Setup Files
  • Bootstrap Gatsby Application
  • Folder Structure
  • Creating Pages
  • Gatsby Link Component
  • Layout Component
  • Styling Intro
  • Inline CSS
  • Global CSS
  • Component CSS
  • CSS Module
  • Bootstrap
  • Gatsby Config and SASS
  • Project Global CSS
  • React-Icons and Constants
  • Navbar
  • Footer
  • CSS Fix
  • Styled Components Intro
  • Styled Components Basics
  • Props With Styled Components
  • Title Component
  • About Section
  • Services Section
  • GraphiQL Interface
  • siteMetadata
  • useStaticQuery Hook
  • Query Keyword
  • gatsby-source-filesystem
  • Arguments
  • gatsby-image plugin setup
  • gatsby-image Overview
  • Query Images with gatsby-image
  • Gatsby-Image Example
  • Gatsby-Image Fluid Details
  • About Image Fix
  • Background-Image-Plugin
  • Setup Home Page Background

  • StyledHero Component Details
  • Adding Background Images To All Pages
  • Transition Link Plugin
  • Contact Page
  • FormSpree Service
  • Additional Headless CMS Info
  • Contentful Intro
  • Contentful Interface
  • Content Model
  • Install Prisma's GraphQL
  • Featured Tours Component
  • Single Tour Page
  • Single Day Component
  • Blogs Intro
  • Blogs Contentful Setup
  • Posts Query
  • Posts Query Arguments
  • Blog Card Component
  • Setup Blog Pages
  • Single Blog Query
  • Blog Template Setup
  • Rich Text Setup
  • Render Images in Rich Text Field
  • Render Another Post in Rich Text Field
  • Pagination Setup
  • Blogs Template Setup
  • Create Pages
  • Blog List Template
  • Numbering
  • Prev and Next Links
  • SEO Setup
  • SEO Options
  • Query siteMetadata
  • Twitter Cards
  • Facebook Cards
  • Adding SEO To All Pages
  • sitemap and robots.txt
  • Shared Hosting

Project 35 - Dawn News

  • Setup Files
  • gatsby-plugin-mdx
  • gatsby-plugin-mdx
  • allMdx Query
  • Component Setup
  • Post Template Structure
  • Setup Strapi(Back-End)
  • Deploy Gotchas

Project 36 - Gloria Jeans

  • Setup Files and Future Resources
  • Bootstrap New Gatsby Application
  • Project Coffee Cup Icon
  • Adding React Icons
  • Netlify - Github - Pipeline Setup
  • Navbar Component
  • Background Image Component
  • Info Section and Title Component
  • Footer Component
  • About Page
  • Contentful Intro
  • Contentful Setup
  • Content Model Setup
  • Add Content Items
  • Connect Gatsby Application to Contentful
  • Creating Build Variables on Netlify
  • Resources Folder Details
  • Coffe Item GraphQL Query
  • Menu Component Initial Setup
  • Display Coffee Items
  • Filter Categories
  • Adding Product Content Model and Extra Category
  • Snipcart Intro
  • Connect Gatsby to Snipcart
  • Snipcart Setup
  • Testing Snipcart
  • Webhooks

Project 37 - Bandu Khan Restaurant

  • Setup
  • Install Gatsby
  • Gatsby Folder Structure
  • Deploy On Netlify
  • Project Spring Cleaning
  • Use CSS in Gatsby
  • Use Bootsrap in Gatsby
  • Use SASS in Gatsby
  • Use Styled-Components in Gatsby
  • Use React-Icons in Gatsby
  • Navbar Component
  • Navbar Component State and Methods
  • Navbar Header Component
  • Styled-Components Setup
  • Navbar Links Component
  • Navbar Links CSS
  • Navbar Links Screen Size
  • Navbar Icons Component
  • Pages Setup
  • Push To Github/Deploy on Netlify

  • Home Header Component
  • Page Header Component
  • Styled Components Extension
  • Banner Component
  • Banner Button
  • Section Button
  • Footer Component
  • Gatsby Image Plugin
  • Gallery Section Basics
  • Gallery Section StaticQuery
  • Gallery Section Request Multiple Images
  • Gallery Section CSS Grid
  • Gallery Section Request Multiple Images in one Query
  • Gallery Section Modified
  • Contenful Service Setup
  • Access Data
  • Environment Variables
  • Menu Component
  • Product Component and Netlify/Contentful Hooks

Project 38 - Harvard University (Huge Project)

  • Header & Footer
  • Convert Static HTML Template into WordPress
  • Interior Page Template
  • Parent & Children Pages
  • To Echo or Not To Echo
  • Menu of Child Page Links
  • Navigation Menus
  • Building the Blog Section
  • Blog Listing Page
  • Blog Archives (archive.php)
  • Custom Queries
  • Workflow and Automation
  • Note on Gulp
  • Preparing For Automation: What is a Command Line?
  • Events Post Type
  • Custom Post Types
  • Displaying Custom Post Types
  • Quick Timeout: Misc Updates
  • Custom Fields
  • Ordering (Sorting) Custom Queries
  • Manipulating Default URL Based Queries
  • Past Events Page (Custom Query Pagination)
  • Programs Post Type
  • Creating Relationships Between Content
  • Displaying Relationships (Front-End)
  • Professors Post Type
  • Featured Image (Post Thumbnail)
  • Featured Image Sizes & Cropping
  • Page Banner Dynamic Background Image
  • Reduce Duplicate Code Create Our Own Function
  • Using Our "pageBanner" Function
  • Reduce Duplication get_template_part()
  • Note About Google Maps JavaScript API
  • Campus Post Type
  • Campus Map on Front-End
  • Campuses Continued
  • Final Campus Details
  • Live Search (UI JavaScript)
  • Open and Close Search Overlay
  • Keyboard Events in JavaScript
  • Managing Time in JavaScript
  • Waiting / Loading Spinner Icon
  • WordPress REST API (AJAX)
  • Load WP Content with JS
  • Generate HTML Based on
  • Conditional Logic Within Template Literal
  • Customizing the REST API
  • REST API: Add New Custom Field
  • REST API: Add New Custom Route (URL)
  • Create Your Own Raw JSON Data
  • WP_Query and Keyword Searching
  • Working With Multiple Post Types
  • Combining Front-End & Back-End
  • 3 Column Layout for Search Overlay
  • Custom Layout & JSON based on Post Type
  • Search Logic That's Aware of Relationships
  • Search Logic That's Aware of Relationships (Part 2)
  • Completing Our Search Overlay
  • Non-JS Fallback Traditional Search
  • Traditional WordPress Searching
  • User Roles and Permissions
  • Open Registration
  • User Generated Content
  • "My Notes" Feature
  • "My Notes" Front-end
  • Delete Posts with the REST API
  • Edit / Update Posts with the REST API
  • Creating New Notes
  • Note Permissions and Security
  • Per-User Post Limit
  • Like or "Heart" Count for Professors
  • Creating Custom POST and DELETE Endpoints
  • Programmatically Create a Post
  • Enforce Limit of One Like Per User/Teacher Combo
  • Completing the LikeBox
  • Going Live: Deploying Our WordPress Site
  • (Advanced / Manually Moving a Site)
  • Database Config for Two Site Environments
  • Ignoring Certain Files with Git
  • Automatic Git Deployments to Web Host
  • A High Level Overview of Blocks
  • Important JavaScript Libraries that Ship with Gutenberg
  • Do Custom Blocks Belong in Plugins or Themes?
  • The Modern JS vs ES6/7+ Approach
  • Basic Block Architecture
  • Enqueuing Block JS and CSS
  • Working with registerBlockType
  • registerBlockType – Title Setting
  • registerBlockType – Category Setting
  • registerBlockType – Icon Setting
  • registerBlockType – Keywords Setting
  • registerBlockType – Supports Setting
  • registerBlockType – Attribute Settings
  • registerBlockType – Edit Setting
  • registerBlockType – Save Setting
  • Installing a Theme & Cloning the Gutenberg Repository
  • The Editor Interface
  • The Block Interface
  • Block Design - Best Practices & Guidelines
  • How Our Gutenberg Post is Saved in the Database
  • How the Visual Editor is Reconstructed From Plain HTML
  • A Brief Introduction to Redux in Gutenberg
  • The Post State Array in Action
  • Using Webpack to Process JavaScript & SASS Files
  • Writing a React Component Without JSX
  • Preparing Our Files for Webpack & NPM
  • Using Webpack to Bundle Our JS Files
  • Using Webpack Loaders to Transpile ES6 into ES5
  • Transpiling JSX with Webpack
  • React Babel Preset Development Mode
  • Exploring Source-mapping Options in Webpack
  • Compiling & Loading SASS Files with Webpack
  • Adding Autoprefixer to Our CSS
  • Moving the CSS Bundle into a Separate File Using Webpack Plugins
  • Minifying the CSS Bundle with Webpack
  • Creating Our First Block
  • Creating a Plugin & Registering a Block with ES5
  • Block Server Side Registration
  • Using React Properly in Gutenberg Blocks
  • Changing the Block Icons and Filtering Keywords
  • Applying Webpack to our WordPress Plugin
  • Enqueuing Our New Bundle & Refactoring PHP Registration
  • Registering a Block With ES6 & JSX
  • Styling Our Block in the Editor Page
  • Creating a New Webpack Bundle for Editor+Frontend Styles & Scripts
  • Understanding & Using the Webpack Externals Feature
  • Adding Gulp to the Workflow to Produce a Zipped version of the plugin
  • Integrating ESLint in Our Project
  • Running ESLint Before Creating a production Bundle
  • Adding Prettier to Our Project
  • Disabling ESLint Rules that Prettier Will Fix
  • Disabling ESLint Rules that Prettier Will Fix
  • Disabling ESLint Rules that Prettier Will Fix
  • Running Prettier Before Committing to Repository Using Husky Hooks
  • Adding Theme Support for Gutenberg Features

  • Adding align-wide & align-full support
  • Creating a Custom Colour Palette
  • Making Gutenberg's Embedded Content Responsive
  • Adding Editor Styles to Resemble Front-end
  • Exploring Block Features by Creating A Simple Block
  • The "wp.editor" & "wp.components" Modules
  • Using the RichText Component in the Editor
  • Using the RichText Component in the save() Function
  • Avoiding Saving Attributes in Block Delimiters and Parsing them from the HTML
  • Using the AlignmentToolbar Component
  • An Overview of the Inspector Controls Component
  • Using the PanelColorSettings Component
  • Adding Multiple Styles to our Block
  • Adding a Custom Category to the Block Library
  • Moving the Edit Component into a Separate File
  • Porting the Edit Function from a Functional to a Class Component
  • Introducing the withColors Higher Order Component
  • Using withColors HOC in the Editor
  • Using withColors HOC in the Front-end
  • Adding a Toggle Shadow Option in the Block Toolbar
  • Adding a Shadow Opacity Option Using RangeControl
  • Adding Deprecated Versions to your Block to Avoid Validation Errors
  • Migrating Old Attributes in Deprecations
  • Transforming Other Block Types into Our Block
  • Transforming Our Block Type into Other Block Types
  • Implementing the Edit Function for Editing the Title & the Bio
  • Adding the Save Function for the Team Member Block
  • Creating the Team Members Block Using InnerBlocks
  • Adding a Columns Attribute for the Parent Team Members Block
  • Styling the Columns in the Front-end
  • Styling the Columns in the Editor Page
  • Removing Unneeded Block Features
  • Introducing the MediaPlaceholder Component
  • Handling the Image Upload & Media Library Buttons
  • Handling Inserting an Image from a URL
  • Handling Image Upload Errors
  • Displaying a Responsive Image in the Front-end
  • Handling Blocks with Unfinished Image Uploads
  • Adding Edit Image & Remove Image Buttons and Functionality
  • Adding a Textarea in the Sidebar to Edit the Alt Text for the Image
  • Adding the Option to Change the Image Size
  • Populating the Image Sizes Dropdown from Redux Stores
  • Enabling "Align Wide" & "Align Full" in Our Team Members Block
  • Adding an Array Type Attribute for the Social Links and Icons
  • Adding a Selected Icon State Using React's Component State
  • Implementing the Save Function for the Team Member
  • Avoiding Saving the Social Array Attribute in the Block Delimiter
  • Adding the Markup for the Edit Social Link Form
  • Populating the Form and Updating the Social Attribute
  • Removing Items from the Social Attribute
  • Making the Social Icons Sortable Using react-sortable-hoc
  • Transforming Galleries and Images into Team Members
  • Setting Up Our Dynamic Block
  • Adding Attributes in a Dynamic Block
  • Fetching the Latest Posts Dynamically in the Render Callback Function
  • Fetching the Latest Posts in the JS Side using Redux
  • Mimicking the PHP Posts Loop Using JS in the Edit Function
  • Adding a Sidebar Option for the Number of Posts
  • Using withSelect & widthDispatch together using "wp.compose"
  • Let's Create a Redux Store and Use it in Multiple Components!
  • Setting Up Our Block and Redux Store Files
  • Important Note for Watching the Rest of this Section
  • Registering our Own Redux Store
  • Populating Our Redux Store using an External API
  • Improving our Resolver using Controls and Generator Functions
  • Displaying our To Dos from the Redux Store in the To Do List Component
  • Adding a new Control to Toggle the To Do Item
  • Updating the To Do Items After Getting a Response from the API
  • Creating a Second Block that Shares the Same Redux Data
  • Managing Metadata, Adding Templates & Sidebar Plugins
  • How is Metadata Managed by Default in Gutenberg?
  • How to Get and Set Metadata using Redux Selectors and Actions
  • Updating Metadata Using a Block
  • Using Templates to Pre-define blocks in the Editor Page
  • Registering a Gutenberg Plugin to Add a Sidebar
  • Using Our Plugin to Modify the Existing Gutenberg Sidebar
  • Managing Metadata in the New Sidebar
  • Gatsby setup
  • Rendering pages and querying data with GraphiQL & GraphQL
  • Common issues / errors and how to resolve them
  • Querying Wordpress data with the GraphiQL browser tool
  • Querying Wordpress data with GraphQL from within Gatsby
  • Generating Gatsby pages dynamically from Wordpress pages & posts
  • Fixing the 404 not-found on root URL
  • Recap of gatsby-node.js
  • Creating the Menu
  • Removing Wordpress frontend + create Wordpress menu
  • Recap gatsby-config.js + querying Wordpress menus with GraphiQL
  • Creating the Menu component in Gatsby
  • Refactoring the menus GraphQL query
  • Styling the Menu with React styled-components
  • Retrieving and rendering the Wordpress site title and tagline
  • Wordpress custom "Portfolio" post type
  • Registering custom "portfolio" post type in Wordpress
  • Adding example Portfolio items
  • Querying & rending custom portfolio post types in Gatsby
  • Query custom "portfolio" post type with GraphQL
  • Auto-generate portfolio pages in Gatsby
  • Fixing styling of portfolio items and portfolio pages
  • Create custom page template in Wordpress to render portfolio items
  • Retrieve and render the site logo and favicon
  • Advanced custom fields
  • Set ACF and add some example data to a Portfolio post
  • Query ACF from within Gatsby and render ACF data
  • UI updates and fixes
  • Course update message
  • UI fixes and cleanup (part 1)
  • UI fixes and cleanup (part 2)
  • Create a blog with pagination
  • Creating blog post data and building the graphql query
  • Calculating the number of pages
  • Creating and rendering the blog list & pagination
  • Add "Blog" to the main menu & improve pagination styling
  • Creating and linking to blog post pages
  • Creating a server on Digital Ocean & setting up subdomain
  • WordPress setup
  • Finishing WordPress migration
  • Deploying a Gatsby site on Netlify
  • Automatically re-build Gatsby site whenever Wordpress content changes

Asp.net Core 3 with Azure, Angular, Vue, React

  • 5 Products (Tinder, Facebook, Pinterest, Pizza Hut) 1 Assignment Prd.
  • Core 3 and VueJS mixes Angular + React!

  • API Service in ASP.NET Core WEB API
  • Build Entity Framework Code First Data Access Techniques
  • Implement Angular with TypeScript within our ASP NET Core Application
  • Implement drag and drop photo upload integrating into a cloud platform
  • Implement a private messaging system
  • Implement filtering, sorting and paging of data
  • Display notifications in Angular via AlertifyJS
  • Implement Authentication using JWT Authentication tokens
  • Handling errors in the API and the SPA
  • Persist data using Entity Framework Core
  • SQL Server on Azure ( DTU & EDTU), Azure Functions.
  • Azure storage (Blobs,Table,File and Queue), Azure Cosmos DB.
  • Microservices & Azure Fabric, Azure tables, Partition and Row keys.
  • Block blobs, Append blobs & Page blobs.

Communicate between ASPNET API and VueJS

  • .Net Core (v2.2), React (with Typescript) and Mobx
  • AutoMapper and MediatR packages in the .Net projects
  • .Net Core (v2.2), React (with Typescript) and Mobx
  • Azure Queues , visibility timeouts ,Peek & De-Queue.
  • Cloud services vs App service, WebJob and background processing.
  • Azure DevOps using Azure Pipeline, Microservices using Docker and Azure.
  • Azure Virtual Network(VNET) and Network Security Groups(NSG).

MobX as a state management library

  • ASPNET Core SignalR
  • Web API in .Net Core with Clean Architecture using the CQRS

Apollo Server 2 and Apollo Boost

  • session-based JWT authentication to GraphQL
  • GraphQL language on both the client and server

Apply state management to projects with Vuex

  • Apply lazy loading and code splitting
  • Vue.js in both Multi- and Single-Page-Applications

Product 1 - Tinder Dating Application (Huge Product)

  • Linux - Asp.Net Core Installation on Ubuntu
  • LInux - Install VS Code, Node.Js, Yeoman & Asp.Net Core Generator
  • Linux - Create Your First Console & Web Application
  • Windows - Create Your First Console Application Project .Net CLI
  • Windows - Create Your First Web Application Project VS 2019
  • File Stucture - Project.Json, Appsettings.Json & Global.Json
  • File Structure - Startup.CS
  • Client Side Package Managers Bower & Gulp
  • Client Side Package Management Bundleconfig.json
  • File Structure - wwwroot & MVC 6
  • Cheat Sheet - New .NET CLI Commands & Software Installation Guide
  • Configure Startup.cs File Dependenies
  • Create Appsettings.json Configuration File
  • MVC Folder Structure Setup
  • Configure LaunchSettings.json Profile
  • Install & Configure Bower & Gulp
  • Add Application Insights Telemetry Microsoft Azure
  • C# & C# 8.0 Object-oriented programming Introduction
  • C# Class Creation, Object Intialization & Constructors
  • C# Variables & Data Types
  • C# - Properties & Fields
  • C# Access Modifiers
  • C# Methods
  • C# Access Modifiers - Demo
  • C# Arrays
  • C# Interfaces
  • C# Conditional Branching & Looping
  • C# .Net History & C# 8.0 Learning Objectives
  • C# 8.0 Static Classes & Methods
  • C# 8.0 String Interpolation
  • C# 8.0 Initialization of Auto-Properties
  • C# 8.0 Null Conditional Operator
  • C# 8.0 Non-Nullable & Nullable Reference Types
  • C# 8.0 Default Interface Implementations
  • C# 8.0 Try-Catch-Finally Block Await Async
  • C# 8.0 Expression bodied Methods & Properties
  • MVC & MVC 6 Features & RC2 to 1.0 Migration
  • MVC - Conceptual Overview
  • MVC - Setup Project Structure
  • MVC Controllers - Conventional Routing
  • MVC Controllers - Attribute Routing
  • MVC Controllers - Action Results & Return Types
  • MVC Controllers - View Rendering Model Data
  • MVC Controllers - View Rendering List Model Data
  • MVC Models - Conceptual Overview
  • MVC Models - VIewModels
  • MVC Models - Data Annotation
  • MVC - Dependency Injection
  • MVC Views - Conceptual Overview
  • MVC Views - Layout File
  • MVC Views - _ViewStart File
  • MVC Views - _ViewImports File
  • MVC Views - TagHelpers
  • RC2 to .Net Core 1.0 Update Installation
  • RC2 vs .Net Core 1.0 Differences
  • MVC Views - PartialViews
  • MVC Views - ViewComponents
  • Build Our App - Login Page Layout
  • Build Our App - Logged In Page Layout
  • Build Our App - Login Form Creation
  • Build Our App - Form Post
  • EF Core - Conceptual Overview
  • EF Core - Sql Server & Command Tooling package installation (Project.Json)
  • EF Core - Dependency Injection Inject DBContext into Configure Services
  • EF Core - Create Entities for our Data Model
  • EF Core - Create DbContext
  • EF Core - First Migration in VS 2019
  • EF Core - .NET CLI EF Core Commands
  • EF Core - Exclude & Include Types, Data Annotations, Fluent Api
  • EF Core - Primary & Composite Keys
  • EF Core - Required & Maxlength Attributes
  • EF Core - Generated Property Values
  • EF Core - Concurrency Tokens
  • EF Core - Indexes
  • EF Core - Table Mappings
  • EF Core - Column Mappings & Data Types
  • EF Core - Computed Columns
  • Build Our App - Login & Register Model Entity Powerpoint
  • Build Our App - Create our Login & Register Entity Model & ViewModel
  • Build Our App - Register our DbContext
  • Build Our App - ResetPassword & ForgotPassword View Model
  • Build Our App - Create the Register, Forgot & Reset Password Views
  • Build Our App - Asp.Net Core Identity Core Introduction
  • Build Our App - Asp.Net Core Identity Core Installation
  • Build Our App - Create Our Identity Login & Register Controller
  • Build Our App - Create Our User & LogOff Method in Identity
  • Build Our App - Create Our ResetPassword & Forgot Password Method Logic
  • Create Microsoft Azure Account & SendGrid Email Cloud Service Account
  • Build Our App - Configure User Secrets for Send Grid Api Key & Email Send Class
  • Build Our App - Send Test Email using Send Grid Cloud Email Service
  • Build Our App - Register User,Reset Password, Forgot Password & Confirm Password
  • SMS Account Creation - Twilio
  • Build Our App - Create Sms Interface & Properties related to our Sid & Token
  • Build Our App - Send SMS Test Message using Twilio
  • Create Account - External Login Provider with OAuth2 Facebook
  • Build Our App - Configure Facebook User Secrets & Facebook Autho2 Credentials
  • Build Our App - Build Our External Login Provider To Facebook
  • Powerpoint - Entity Model Diagram for the Profile Context
  • Build Our App - EF Core Context Add Individual, Organization & Hobby Entities
  • Build Our App - Data Annotations & OnModelCreating Enhancements in our Context
  • Build Our App - Initialize Data into our Profile Context
  • Build Our App - Add a Foreign Key Constraint on our Entities
  • Build Our App - Dashboard ViewModel with our Entities
  • Build Our App - Build our IProfileRepository Class
  • Build Our App - Dashboard Index View
  • Build Our App - Build a JSON API Service
  • Build Our App Api - CRUD Operations - Create
  • Build Our App Api - CRUD Operations - Edit
  • Build Our App Api - CRUD Operations - Delete
  • Build Our App Api - CRUD Operations - Detail
  • Typescript - Installation
  • Typescript - Create your First Typescript File
  • Typescript - Tsconfig.json
  • Typescript - var vs let variable declarations
  • Typescript - Interfaces
  • Typescript - Classes
  • Typescript - Functions
  • Typescript - Enums
  • Typescript - Generics
  • Typescript - Modules
  • Typescript - Namespaces
  • Typescript - Iterators
  • Typescript - Modifiers
  • Typescript - Compile
  • Angular 2 - Definition & Architecture
  • Angular 2 - Angular-Cli Installation
  • Angular 2 - Angular-.NetCore Spa Generator
  • Angular 2 - Angular Module Definition
  • Angular 2 - File Structure & App.Modules.ts
  • Angular 2 - Angular Components Definition
  • Angular 2 - Angular Components & Class Implementation
  • Angular 2 - Angular Templates Definition
  • Angular 2 - Angular Templates Implementation
  • Angular 2 - Angular Data-Binding Definition
  • Angular 2 - Angular Data-Binding Demo
  • Angular 2 - Angular Input Definition
  • Angular 2 - User Input Onkey Demo
  • Angular 2 - Forms Definition
  • Angular 2 - Dependency Injection Definition
  • Angular 2 - Http Definition
  • Angular 2 - Promise VS Observable
  • Angular 2 - Http Observable map to Json Filse
  • .Net Core Upgrade - Migrate from the Project.json to the .Csprog File
  • .Net Core Upgrade - Upgrade our Project in VS 2019
  • .Net Core Upgrade - Why Microsoft left the project.json file?
  • .Net Core Upgrade - Upgrade our Project via the .Net CLI
  • .Net Core Upgrade - Project.json vs .Csproj
  • .Net Core Upgrade - Conclusion
  • Angular & .Net Core Integration
  • Angular & .Net Core - Package.json
  • Angular & .Net Core - Tsconfig
  • Angular & .Net Core - Typings
  • Angular & .Net Core - Gulp.js
  • Angular & .Net Core - Add Angular Core
  • Angular & .Net Core - Layout.cshtml
  • Angular & .Net Core - Typescript error suppression
  • Angular & .Net Core - Angular File & Folder Structure
  • Angular & .Net Core - Modify Folder Structure & Login Component
  • Angular & .Net Core - Login Api Service
  • Angular & .Net Core - Login Typescript Class
  • Angular & .Net Core - Injectable Login Authentication Service
  • Angular & .Net Core - App Module
  • Angular & .Net Core - App Component
  • Angular & .Net Core - Recap Login
  • Angular & .Net Core - Login Success
  • Microsoft Azure - Create Account
  • Microsoft Azure - Create paas web app service
  • Microsoft Azure - Azure Instance
  • Visual Studio Cloud Explorer
  • Microsoft Azure - Create Sql Server Database
  • Add Production Connection String to the Appsettings.json
  • Add Production Connection String to the Appsettings.json
  • Microsoft Azure - EF Migration to Azure Sql database
  • Microsoft Azure - Publish Website
  • Microsoft Azure - App Deployed

  • Microsoft Azure - Facebook Identifier
  • Microsoft Azure - Facebook URL
  • Microsoft Azure - Authentication Successful
  • Angular 4 + CRUD - Create Api Service
  • Angular 4 + CRUD - Dashboard Typescript class
  • Angular 4 + CRUD - Dashboard Service
  • Angular 4 + CRUD - Dashboard Component
  • Angular 4 + CRUD - Dashboard Model
  • Angular 4 + CRUD - Dashboard Html
  • Lab 1:- SQL Server on Azure ( DTU & EDTU)
  • Lab 2 :- Azure Functions.
  • Lab 3:- Azure storage (Blobs,Table,File and Queue).
  • Lab 4:- Azure Cosmos DB.
  • Lab 5: - Microservices & Azure Fabric in 90 Minutes.
  • Lab 6 :- Azure tables, Partition and Row keys.
  • Lab 7:- Block blobs, Append blobs & Page blobs.
  • Lab 8 :- Azure Queues , visibility timeouts ,Peek & De-Queue.
  • Lab 9 :- Cloud services vs App services.
  • Lab 10 :- WebJob and background processing.
  • Lab 11 :- Azure DevOps using Azure Pipeline.
  • Lab 12 :- Microservices using Docker and Azure.
  • Lab 13 :- Azure Virtual Network(VNET) and Network Security Groups(NSG)
  • Creating the DotNet Core WebAPI using the DotNetCLI
  • Project files in the DotNet Web API
  • Differences between a .Net Core 2.2 Web API template and .Net Core 3.0 template
  • Running the DotNet Core application
  • Environment settings and using dotnet watch
  • Creating the first Model and DataContext
  • Creating the Database using Entity Framework migrations
  • Retrieving data from the Database
  • Making our code asynchronous
  • Creating the Angular application using AngularCLI
  • The Angular bootstrapping and running the Angular app
  • Adding VS Code extensions used in this course
  • Making HTTP requests in Angular
  • Adding CORS support to the API
  • Displaying data from the API on the HTML page
  • Adding Bootstrap and Font-Awesome to our Angular app
  • Adding GIT for source control
  • Storing passwords in the Database
  • Creating the User model
  • The Repository pattern
  • Creating an Interface for the Repository
  • Creating the concrete Auth Repository and Register Method
  • Creating the Login repository method
  • Registering services in the Startup class
  • Creating the Register method in our Auth Controller
  • Using DTOs (Data Transfer Objects)
  • Validation in the API
  • Token Authentication
  • Creating the Login method in the API
  • Using the Authentication middleware
  • Safe storage of secrets
  • Client side login and register
  • Creating the Navigation and Login form
  • Introduction to Angular template forms
  • Introduction to Angular Services
  • Injecting the Angular services in our Components
  • Using *ngIf to conditionally display HTML Elements
  • Adding a component so users can Register to our site
  • Parent to Child Component communication using Input properties
  • Component Communication Child to Parent using Output properties
  • Adding the register method to the Auth Service
  • Handling exceptions in the API
  • Setting up the Global exception handler in the API
  • Handling errors in Angular
  • Wrapping 3rd party libraries as an Angular service
  • Using the Angular JWT library to improve token handling
  • Using the Angular JWT library to decode tokens
  • Adding Ngx Bootstrap to power our Bootstrap components
  • Bringing some color to our app with a theme from Bootswatch
  • Setting up routing in Angular
  • Setting up our links in the nav component
  • Using routing in our components
  • Protecting our routes with a route guard
  • Protecting multiple routes with a single route guard using dummy routes
  • Extending the API
  • Extending the User Model
  • Exploring Entity Framework migrations
  • Entity Framework Relationships
  • Seeding Data to the Database
  • Creating a new repository for our API
  • Creating the Users Controller
  • Shaping the data to return with DTOs
  • Using AutoMapper
  • Building a great looking User Interface
  • Adding Interfaces to our Typescript code
  • Creating another Angular service
  • Retrieving the Members into the Member List Component
  • Creating Member Cards to display on our Member list page
  • Giving our Members some style with CSS
  • Adding animated buttons to the member cards
  • Using Auth0 JwtModule to send up jwt tokens automatically
  • Creating the Member Detailed View component class
  • Designing the Member detailed view template - left hand side
  • Adding a tabbed panel for the right hand side of the Member detailed page
  • Using Route Resolvers to retrieve data
  • Adding a photo gallery to our application
  • Creating a Member Edit Component
  • Designing the template for the member profile edit page
  • Adding a CanDeactivate route guard
  • Persisting the Member updates
  • Finishing off the Member edit component
  • Adding Photo upload functionality to the application
  • Using Cloudinary as a photo storage solution
  • Creating the Photos controller
  • Testing the Photo upload with Postman
  • Creating the Photo upload component in Angular
  • Adding a 3rd Party File Uploader
  • Configuring the 3rd Party file uploader
  • Adding the Set Main photo functionality to the API
  • Adding the Set Main Photo functionality to the SPA
  • Using the array filter method to provide instant feedback in the SPA
  • Output properties revisited.
  • Adding the main photo to the Nav bar
  • Any to Any component communication in Angular
  • Using BehaviorSubject to add any to any communication to our app.
  • Adding the Delete photo function to the API
  • Adding the Delete Photo functionality to the SPA
  • Reactive Forms in Angular
  • Validation in Reactive forms
  • Custom Validators in Reactive forms
  • Providing Validation feedback to the user
  • Using the Reactive Forms Form Builder Service
  • Expanding the Registration form
  • Handling Dates in Forms
  • Updating the Register method in the API
  • Completing the Registration implementation
  • Fixing the Photos issue for newly registered users
  • Using a TimeAgo pipe for dates in Angular
  • Using Action Filters
  • Paging in ASP.NET Core Web API
  • Adding a PagedList class
  • Setting up the paging helper classes
  • Implementing pagination in the API
  • Setting up pagination in the SPA
  • Using nix-bootstrap pagination module
  • Filtering in the API
  • Adding additional filtering parameters to the API
  • Adding filtering functionality to the SPA
  • Sorting results in the API
  • Adding the Sorting functionality to the SPA
  • Adding the 'Likes' functionality from start to finish
  • Configuring the EF relationship so users can like each other
  • Creating the Like entity
  • Adding the Send Like functionality in the API
  • Retrieving the list of users liked and liked by user
  • Adding the Send like functionality to the SPA
  • Creating the Lists component
  • Add a private messaging system to the application
  • Creating the Message Entity and relationships
  • Adding the repository methods for the messages
  • Adding the Create Message method in the API
  • Adding the Repository methods for an Inbox, Outbox
  • Creating the Message Controller
  • Adding the Message thread methods to the API
  • Working with the message component in the SPA
  • Designing the Inbox and Outbox template
  • Getting the message thread in the component
  • Designing the message tab chat system
  • Adding Query params to an Angular route
  • Adding the send message functionality and a challenge
  • Resolving the issue with the photos
  • Adding the Delete message functionality to the API
  • Deleting messages in the SPA
  • Adding the Mark as Read functionality
  • Using NG Build and running the application from the Kestrel server
  • .Net Core 3.0 - Serving Static Files from the API
  • Angular CLI AOT Production build
  • Installing and setting up MySQL
  • Adding additional Database providers
  • Dealing with migrations and multiple Database providers
  • .Net Core 3.0 MySQL provider bug workaround
  • Adding Lazy loading for our related entities
  • Publishing to IIS
  • Setting up a Linux server for publishing
  • Publishing the app to Linux
  • HTTPS configuration for Apache
  • Setting up Azure to publish our app
  • Publishing our App to Azure

Product 2 - Facebook Application (Huge Product)

  • Creating the ASP.NET Core solutions and projects using the DotNet CLI
  • Creating a Domain entity
  • Creating the DbContext and service
  • Adding our first Entity Framework code first migration
  • Creating the database
  • Seeding data using Entity Framework fluent configuration
  • Using Dependancy Injection
  • Using create-react-app to create our React application
  • Reviewing the React project files
  • Using Typescript with React
  • Adding React dev tools
  • React Class Components
  • Using React State
  • Fetching data from the API
  • Adding CORS support to the API
  • Adding Semantic UI to our app
  • Clean up and saving our code to source control
  • Building a CRUD application in .Net Core using the CQRS + Mediator pattern
  • Adding the Activity entity
  • Seeding Activity data
  • Commands and Queries CQRS
  • Introduction to MediatR
  • Creating our first Query handler
  • Creating the Activities API Controller
  • Adding the Details Handler
  • Cancellation Tokens
  • Adding the Create handler
  • Dealing with boilerplate code in our handlers
  • Adding an Edit handler
  • Adding a Delete handler
  • Building a CRUD application in React
  • Working with React Hooks
  • Folder structure in React
  • Getting a list of activities from the API
  • Adding an Activity interface in Typescript
  • Refactoring our class component to use React Hooks
  • Adding the Navigation bar
  • Styling React components
  • Adding the Activity Dashboard
  • Creating the Activity List
  • Adding the Activity Details component
  • Adding the Activity Form component
  • Selecting an individual Activity
  • Adding an edit mode to display the form
  • Adding a create activity mode
  • Initialising the form with data
  • Controlled components in React
  • Handling form submission
  • Fixing issues with the dates in the form
  • Adding the delete functionality
  • Axios
  • Setting up the agent.ts file
  • Listing our activities
  • Updating an Activity
  • Adding a delay to our API methods
  • Adding a loading component
  • Adding a loading indicator for submitting data
  • Isolating the loading indicator on the delete button
  • Setting up a MobX store
  • Refactoring the activity list to use the store
  • Refactoring the select activity function
  • Using Async Await in our methods
  • Refactoring the create activity method
  • MobX computed properties
  • Using an Observable Map
  • Adding the edit activity action
  • Adding the delete activity action
  • Cleaning up our code
  • Enabling MobX strict mode
  • Adding MobX dev tools
  • React Router
  • Setting up React Router
  • Setting up our Routes
  • Adding Links and NavLinks
  • Adding the Details link
  • Getting an Activity from the API
  • Using Route params
  • Navigating via code
  • Routing to the edit form
  • Using a Fully Uncontrolled Component with a key to reset component state
  • Navigating after submission
  • Moving the home page outside of our navigation routes
  • Scrolling to the top of the page on navigation
  • More code clean up
  • Styling the activity list
  • Grouping activities by date
  • Styling the activity list items
  • Creating the Activity Details page
  • Styling the Activity Detailed Page Header
  • Styling the Activity Detailed Info
  • Styling the Activity Detailed Chat and Sidebar components
  • Styling the Activity Form
  • Styling the Home page
  • Error handling and validation
  • Validation in the API
  • Adding validation in the API using Data Annotations
  • Adding validation in the API using Fluent Validation
  • Error handling concepts in our application
  • Error handling strategy
  • Creating a derived Exception class for Rest exceptions
  • Adding Error handling middleware
  • Using our Error handling middleware
  • Using Axios interceptors to catch errors
  • Throwing errors in the client
  • Adding routing functionality to Axios
  • Handling an invalid GUID on a get request
  • Adding toast notifications
  • Setting up React Final Form
  • Creating a reusable Text input field
  • Refactoring the form to use React Final Form
  • Creating a reusable Text Area Input field
  • Creating a reusable Select input field
  • Setting up React Widgets
  • Creating a reusable Date Input field
  • Formatting the dates using Date-FNS
  • Creating separate Date and Time fields
  • Combining Date and Time inputs
  • Initialising the form with data
  • Submitting data to the server
  • Form error handling
  • Form validation
  • Adding the Identity User Entity
  • Configuring Identity in our startup class
  • Seeding users to the database
  • Adding a Login Handler
  • Adding a Base API controller
  • Adding a User API controller
  • Adding a User object
  • JSON Web Tokens introduction
  • Adding the Infrastructure project
  • Adding the JWT Generator interface and class
  • Generating a JWT Token

  • Returning the JWT Token on successful login
  • Securing our app with Authorization
  • Dotnet user secrets
  • Adding an authorisation policy
  • Adding a Register Handler
  • Testing user registration
  • Adding a Fluent Validator extension for password validation
  • Retrieving the Username from the token in the Http Context
  • Getting the currently logged in user
  • Client side login and register
  • Creating the Typescript interfaces and Axios methods
  • Creating a Mobx user store
  • Creating a MobX root store
  • Creating the Login form
  • Hooking up the Login form to the API
  • Dealing with submission errors
  • Adding home page and NavBar user information
  • Creating a MobX common store
  • Using Axios request interceptor to automatically send the JWT token
  • Persisting login on refresh
  • Adding Modals to our application
  • Adding better error messages to our form
  • Adding a Register form
  • Displaying server validation errors in our form
  • Adding a class to join our Users and Activities
  • Updating the Create Activity handler
  • Testing in Postman
  • Loading related data using Eager loading
  • Adding DTOs to shape our data
  • Adding AutoMapper
  • Adding AutoMapper profiles
  • Configuring AutoMapper mappings
  • Using Lazy Loading to load related data
  • Adding the Join activity feature
  • Adding the remove attendance feature
  • Creating a custom Auth policy
  • Updating our Seed data
  • Adding attendees to our list items
  • Adding attendees to the Detailed view sidebar
  • Adding the IsGoing and IsHost properties to the Activity interface
  • Conditionally rendering the activity detailed header buttons
  • Adding the cancel attendance function
  • Hooking it all up to the API
  • Loose ends
  • Cloudinary settings
  • Adding the interface and class for our Photo Accessor
  • Adding the AddPhoto handler
  • Adding the Domain Entity
  • Adding the Add Photo Handler
  • Adding the Photo API Controller
  • Adding User Profiles feature
  • Adding the Delete photo handler
  • Adding the set main photo functionality
  • Adding the Mapping Profile configuration for User images
  • Adding links and a profile page component
  • Adding the Profile Header component
  • Adding the Profile content component
  • Getting the profile data from the API
  • Displaying User images on the profile page
  • Conditionally rendering the Photo Upload Widget
  • Creating a Photo Upload Widget
  • React Dropzone
  • Styling our Dropzone
  • React Cropper
  • Adding the Photo Upload methods to the store
  • Adding the photo upload functionality to the Profile component
  • Adding the set main photo functionality
  • Isolating our loading indicators
  • Adding Delete photo functionality
  • Adding the Comment entity
  • Adding the Comment DTO and mapping
  • Adding the Create comment handler
  • Adding a SignalR hub
  • Configuring Auth for SignalR
  • Adding the SignalR hub connection to the client
  • Connecting to the SignalR hub from our client
  • Adding the Comment functionality to the client
  • Formatting Dates in words using Date-FNS
  • Using SignalR Groups in the API
  • Using SignalR Groups in the client
  • Adding the UserFollower Entity
  • Adding the Add Follower handler
  • Adding the Delete Following handler
  • Adding a Following API Controller
  • Adding a Profile reader helper class and interface
  • Getting a List of Followings for a user
  • Adding a Custom value resolver for AutoMapper
  • Adding the UI components to show followed users
  • Adding the Follow / Unfollow methods
  • Adding the Follow / Unfollow UI components
  • Getting a list of followings from the API
  • Using MobX reactions to get followers or followings on tab change
  • Paging, Sorting and Filtering
  • Paging our Activity list
  • Refactoring the Activity store list method for paging
  • Adding vertical paging to our activity dashboard
  • Adding infinite scrolling to our activity dashboard
  • Updating the dashboard with Filter component
  • Filtering our Activity List in the API
  • Adding the Filtering methods in the client
  • Updating the Activity Filters UI to allow filtering
  • Adding User Activities filter in the API
  • Adding User Activities filter in the client
  • Swapping our loading indicator for Placeholders
  • Adding a loading indicator to index.html
  • Adding private routes on the client
  • Adding logout for token expiry
  • Safari bug fix
  • Preparing the client application for publishing
  • Building a production version of the React app
  • Serving the production React app from the API server
  • Adding MySQL and configuring a user
  • Adding additional DB providers for Entity Framework
  • Swapping the DB for MySQL
  • Publishing the app to Linux - Part 1
  • Publishing the app to Linux - Part 2
  • Configuring Apache to use an HTTPS SSL certificate
  • Adding Security headers to our API
  • Adding Content Security Policy to our API
  • Getting an A rating from a SecurityHeaders site scan
  • Setting up Azure for publishing our app
  • Publishing our App to Azure
  • Tweaking the Azure deployment

Product 3 - Pinterest Application (Huge Product)

  • Understanding VueJS Templates
  • How the VueJS Template Syntax and Instance Work Together
  • Accessing Data in the Vue Instance
  • Binding to Attributes
  • Understanding and Using Directives
  • Disable Re-Rendering with v-once
  • How to Output Raw HTML
  • Getting Event Data from the Event Object
  • Passing your own Arguments with Events
  • Modifying an Event - with Event Modifiers
  • Listening to Keyboard Events
  • Using Two-Way-Binding
  • Reacting to Changes with Computed Properties
  • An Alternative to Computed Properties: Watching for Changes
  • Saving Time with Shorthands
  • Dynamic Styling with CSS Classes - Using Objects
  • Dynamic Styling with CSS Classes - Using Names
  • Setting Styles Dynamically (without CSS Classes)
  • Styling Elements with the Array Syntax
  • Using Conditionals and Rendering Lists
  • Conditional Rendering with v-if
  • v-else-if in Vue.js 2.1
  • Using an Alternative v-if Syntax
  • Don't Detach it with v-show
  • Rendering Lists with v-for
  • Getting the Current Index
  • Using an Alternative v-for Syntax
  • Looping through Objects
  • Looping through a List of Numbers
  • Keeping Track of Elements when using v-for
  • Setting up the Support Module 1
  • Creating the Vue Instance and Styling the Healthbars
  • Showing the Player Controls Conditionally
  • Implementing a "Start Game" Method
  • Implementing a "Attack" Method
  • Write better Code - Time for Refactoring!
  • Implementing a "Special Attack"
  • Implementing a "Heal" Method
  • Finishing the Action Buttons
  • Creating an Action Log
  • Printing the Log (v-for)
  • Finishing the Log
  • Styling the Log Conditionally
  • Wrap Up
  • Using Multiple Vue Instances
  • Accessing the Vue Instance from Outside
  • How VueJS manages your Data and Methods
  • A Closer Look at $el and $data
  • Placing $refs and Using them on your Templates
  • Where to learn more about the Vue API
  • Mounting a Template
  • Using Components
  • Limitations of some Templates
  • How VueJS Updates the DOM
  • The VueJS Instance Lifecycle
  • The VueJS Instance Lifecycle in Practice
  • Moving to a "Real" Development Workflow with Webpack and Vue CLI
  • Why do we need a Development Server?
  • What does "Development Workflow" mean?
  • Using the Vue CLI to create Projects
  • Installing the Vue CLI and Creating a new Project
  • An Overview over the Webpack Template Folder Structure
  • Understanding ".vue" Files
  • Understanding the Object in the Vue File
  • How to Build your App for Production
  • More about ".vue" Files and the CLI
  • Debugging VueJS Projects
  • Storing Data in Components with the Data Method
  • Registering Components Locally and Globally
  • The "Root Component" in the App.vue File
  • Creating a Component
  • Using Components
  • Moving to a Better Folder Structure
  • Alternative Folder Structures
  • How to Name your Component Tags (Selectors)
  • Scoping Component Styles
  • Module Wrap Up
  • Module Resources & Useful Links
  • Communicating between Components
  • Communication Problems
  • Using Props for Parent => Child Communication
  • Naming "props"
  • Using "props" in the Child Component
  • Validating "props"
  • Using Custom Events for Child => Parent Communication
  • Understanding Unidirectional Data Flow
  • Communicating with Callback Functions
  • Communication between Sibling Components
  • Using an Event Bus for Communication
  • Centralizing Code in an Event Bus
  • Advanced Component Usage
  • Setting up the Module Project
  • Passing Content - The Suboptimal Solution
  • Passing Content with Slots
  • How Slot Content gets Compiled and Styled
  • Changed Slot Styling Behavior
  • Using Multiple Slots (Named Slots)
  • Default Slots and Slot Defaults
  • Switching Multiple Components with Dynamic Components
  • Understanding Dynamic Component Behavior
  • Keeping Dynamic Components Alive
  • Dynamic Component Lifecycle Hooks
  • Setting up the Support Module 2
  • Initializing the Application
  • Creating the Application Components
  • Passing Data with Props and Slots
  • Allowing Users to Create Quotes with a NewQuote Component
  • Adding Quotes with Custom Events
  • Adding a Info Box
  • Allowing for Quote Deletion
  • Controlling Quotes with a Progress Bar
  • Finishing Touches and State Management
  • Module Resources
  • Handling User Input with Forms
  • Module Introduction
  • A Basic < input > Form Binding
  • Grouping Data and Pre-Populating Inputs
  • Modifying User Input with Input Modifiers
  • Binding < textarea > and Saving Line Breaks
  • Using Checkboxes and Saving Data in Arrays
  • Using Radio Buttons
  • Handling Dropdowns with < select > and < option >
  • What v-model does and How to Create a Custom Control
  • Creating a Custom Control (Input)
  • Submitting a Form
  • Understanding Directives
  • How Directives Work - Hook Functions
  • Creating a Simple Directive
  • Passing Values to Custom Directives
  • Passing Arguments to Custom Directives
  • Modifying a Custom Directive with Modifiers
  • Custom Directives - A Summary
  • Registering Directives Locally
  • Using Multiple Modifiers
  • Passing more Complex Values to Directives
  • Improving your App with Filters and Mixins
  • Creating a Local Filter
  • Global Filters and How to Chain Multiple Filters
  • An (often-times better) Alternative to Filters: Computed Properties
  • Understanding Mixins
  • Creating and Using Mixins
  • How Mixins get Merged
  • Creating a Global Mixin (Special Case!)
  • Mixins and Scope
  • Understanding Transitions
  • Preparing Code to use Transitions
  • Setting Up a Transition
  • Assigning CSS Classes for Transitions
  • Creating a "Fade" Transition with the CSS Transition Property
  • Creating a "Slide" Transition with the CSS Animation Property
  • Mixing Transition and Animation Properties
  • Animating v-if and v-show
  • Setting Up an Initial (on-load) Animation
  • Using Different CSS Class Names
  • Using Dynamic Names and Attributes
  • Transitioning between Multiple Elements
  • Listening to Transition Event Hooks
  • Understanding JavaScript Animations
  • Excluding CSS from your Animation
  • Creating an Animation in JavaScript

  • Animating Dynamic Components
  • Animating Lists with < transition-group >
  • Using < transition-group > - Preparations
  • Using < transition-group> to Animate a List
  • Understanding the App
  • Creating the App
  • Adding Animations
  • Setting up the Support Module 3
  • Connecting to Servers via Http - Using vue-resource
  • Accessing Http via vue-resource - Setup
  • Firebase & The Right Database
  • Creating an Application and Setting Up a Server (Firebase)
  • POSTing Data to a Server (Sending a POST Request)
  • GETting and Transforming Data (Sending a GET Request)
  • Configuring vue-resource Globally
  • Intercepting Requests
  • Intercepting Responses
  • Where the "resource" in vue-resource Comes From
  • Creating Custom Resources
  • Resources vs "Normal" Http Requests
  • Understanding Template URLs
  • Setting up the VueJS Router (vue-router)
  • Setting Up and Loading Routes
  • Understanding Routing Modes (Hash vs History)
  • Navigating with Router Links
  • Navigating from Code (Imperative Navigation)
  • Setting Up Route Parameters
  • Fetching and Using Route Parameters
  • Reacting to Changes in Route Parameters
  • vue-router 2.2: Extract Route Params via "props"
  • Setting Up Child Routes (Nested Routes)
  • Navigating to Nested Routes
  • Making Router Links more Dynamic
  • A Better Way of Creating Links - With Named Routes
  • Using Query Parameters
  • Multiple Router Views (Named Router Views)
  • Redirecting
  • Setting Up "Catch All" Routes / Wildcards
  • Animating Route Transitions
  • Passing the Hash Fragment
  • Controlling the Scroll Behavior
  • Protecting Routes with Guards
  • Using the "beforeEnter" Guard
  • Using the "beforeLeave" Guard
  • Loading Routes Lazily
  • Understanding "Centralized State"
  • Why a Centralized State Alone Won't Fix It
  • Understanding Getters
  • Mapping Getters to Properties
  • Understanding Mutations
  • Using Mutations
  • Why Mutations have to run Synchronously
  • How Actions improve Mutations
  • Using Actions
  • Mapping Actions to Methods
  • Two-Way-Binding (v-model) and Vuex
  • Modularizing the State Management
  • Using Namespaces to Avoid Naming Problems
  • Auto-namespacing with Vuex 2.1
  • Setting up the Support Module 4
  • Creating the First Components
  • Adding a Header and Navigation
  • Creating Stocks Components
  • Adding a "Buy" Button
  • Setting up the Vuex State Management
  • Adding a Portfolio Module to Vuex
  • Working on the Portfolio Stocks
  • Connecting the Portfolio with Vuex
  • Time to fix some Errors
  • Displaying the Funds
  • Adding some Order Checks
  • Making Funds Look Nicer with Filters
  • Ending the Day - Randomizing Stocks
  • Animating the Route Transitions
  • Saving & Fetching Data - Adding a Dropdown
  • Setting up vue-resource and Firebase
  • Saving Data (PUT Request)
  • Fetching Data (GET Request)
  • Testing and Bug Fixes
  • AWS S3 & Bucket Policies
  • CSS Pre-Processors
  • Environment Variables
  • Building the main Project
  • Instant Prototyping
  • Different Build Targets
  • Using the "Old" CLI Templates (vue init)
  • Using the Graphical User Interface (GUI)
  • Alternative Lazy Loading Syntax
  • Create MongoDB Atlas Database, Connect to GraphQL Server
  • Creating Mongoose Schemas
  • Creating typeDefs for Project
  • Write and Run signupUser Mutation
  • Write and Run addPost Mutation
  • Write and Run getPosts Query, Intro to populate
  • Create Vue Client with Vue CLI 3
  • Adding Plugins with Vue GUI and Concurrently Dev Script
  • Structuring our Vue App
  • Installing Vuetify Plugin and Generating a Theme
  • Coolors.co for Creating Great Color Schemes (Optional)
  • Horizontal Navbar and Mobile First Design
  • Add Side Navbar
  • Add Routing and Page Transitions
  • Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
  • Dive into Smart Queries in Vue Components
  • Executing Queries with the ApolloQuery Component
  • Add Carousel Component to Home Page
  • Integrate Vuex with ApolloClient
  • Firing getPosts Action with Vuex
  • Using Mutations and Getters
  • Add Loading Property, Loading Spinner and mapGetters
  • Create queries.js for Clientside Query / Mutation Definitions
  • Create Gravatar Avatar and Hash User Passwords on Signup
  • Write and Run signinUser Mutation
  • Sign Token and Return it Upon Signin/Signup
  • Using Variables in GraphQL, Signin / Signup Mutation Defs
  • Add Signin Form, Write and Run signinUser Action, Return JWT
  • Additional Config for ApolloClient, Send Token from LocalStorage
  • Verify JWT Token in server.js, Pass Result to currentUser in Context
  • Create getCurrentUser Query, Execute it from main.js
  • Redirect Home upon Signin with Watcher
  • Change Navbar for Signed-in User
  • Create Signout Action
  • Protected Routes and Clearing Malformed Tokens
  • Error Handling and Form Validation
  • Show AuthSnackbar on Signin / Signup
  • Handle Authentication Errors, Show Auth Error Snackbar
  • Create Signup Form and Signup User Action
  • Add Post / Infinite Scroll Components
  • Make Add Post Form
  • Create and Execute addPost Action / Mutation
  • Update and Optimistic Response for addPost Mutation
  • Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
  • Add Infinite Scroll Functionality on Client
  • Add Grid Layout / Cards for Each Post in Posts Component
  • Create Post Component and Route
  • Create and Execute getPost Query
  • Build out Post Card in Post Component
  • Add Messages Section to Post Component
  • Create addPostMessage Mutation
  • Perform addPostMessage in Post Component
  • Add Validation for Message Input, Clear on Submit
  • Create typeDefs / resolvers / queries for Like / Unlike
  • Firing Like / Unlike Post Mutations from Client
  • Add Logic for Toggling Like / Unlike Post
  • Add Like Notification in Profile Tab
  • Add typeDef / resolver / query for searchPosts
  • Fire searchPosts Action, Log Search Results
  • Add searchResults to State, Build Search Result Card
  • Finishing Search Results, Making them Functional
  • Add User Details Card / Favorites Cards
  • Write getUserPosts Query
  • Execute getUserPosts Query, Create and Populate User Cards
  • Add Edit Post Dialog for Updating User Posts
  • Create updateUserPost Mutation
  • Executing updateUserPost Mutation with Vuex Action
  • deleteUserRecipe Mutation - Backend Creation to Frontend Execution
  • RefetchQueries for Fresh Data upon Executing Mutations
  • Formatting Dates with moment
  • Minor Improvements/Fixes
  • Deployment with Heroku

Product 4 - Pizza Hut (Huge Product)

  • Project setup using the Vue-CLI
  • The header component
  • Home page component
  • Creating our menu and shopping basket
  • Creating the menu component
  • Looping through menu items
  • Pushing orders to an array
  • Adding the shopping basket
  • Making the shopping basket dynamic
  • Shopping basket methods
  • The admin section
  • Structuring the admin section
  • Listing current orders
  • Add new pizza component
  • Form input bindings
  • Setting up our Firebase database
  • Adding the login component
  • Enable Firebase authentication
  • Signing in and out
  • Final components
  • Vue Router
  • Router installation and setup
  • Creating our routes
  • Router link in more detail
  • Binding and dynamic routes
  • History and hash modes
  • Catch all routes and redirecting
  • Nested routes
  • Nested router view
  • Adding names to routes

  • Router navigation methods
  • Global navigation guards
  • Component guards
  • Guarding individual routes
  • Defining scroll behavior
  • Re-factoring our routes
  • Named router views
  • Stage Management With Vuex
  • Installation and file structure
  • Initial state and accessing the store
  • Improving store access with getters
  • Changing state with mutations
  • Setting the user with actions
  • Dispatching actions
  • Mapping getters
  • Splitting our store into separate files
  • Using modules
  • Binding Vuex to Firebase
  • Sync orders with Firebase
  • Displaying orders in the admin section
  • Moving add new pizza to the central store
  • Removing items from the database
  • Hiding the admin from unauthorised users
  • Calculating the basket total
  • Global currency filter
  • Lazy loading and code splitting
  • Lazy loading with the Vue router
  • Grouping components into the same chunk
  • Lazy loading with conditional rendering
  • Deployment to Netlify

React Native, Ionic, Xamarin, Quasar & Flutter

  • 33 Apps and 25 Assignments
  • React .net Core C# typeScript Angular Vuex Azure ES6 plus
  • build a Cross Platform, Single Codebase App for Web, iOS, Android, Mac, Windows
  • Azure Mobile App Services, Smart Watch apps, Windows Store, Google Store, Apple Store
  • React Native with Hooks, Context, and React Navigation, React Native apps with Expo, Complex Native Animations
  • Node REST API inside ionic 4 app, ionic 4 UI components, apis and native plugins, mongodb as database for storing data from ionic 4 app
  • WooCommerce REST API V3, Push Notifications and WORDPRESS with IONIC 4
  • Xamarin to build Windows Desktop, Windows Store, Mac, and smart watch apps, iOS and Android app
  • Quasar, Vue JS 2, Vuex & Firebase to build a Cross Platform
  • Flutter SDK & Flutter Framework for building native iOS and Android apps

App 1 - Restaurant Search App

  • Layout with React Native
  • Basics of Box Object Model
  • AlignItems with Flex
  • Flex Direction
  • Justify Content
  • Flex Values
  • Align Self on Children
  • The Position Property
  • Top, Bottom, Left, Right
  • Absolute Fill Objects
  • Applying Layout Systems
  • Yelp Signup
  • Yelp Walkthrough
  • React Navigation
  • React Navigation Fix
  • Assembling a Navigator
  • Architecture Approach
  • Starting the SearchBar
  • Displaying Icons
  • Search Bar Styling
  • A Touch More Styling
  • Managing State
  • Detecting Editing Completion
  • Using Outside API's
  • Configuring Axios
  • Making the Request
  • Error Handling
  • Running an Initial Search
  • Making Hooks Reusable
  • The UseEffect Hook
  • Extracting Hook Logic
  • Showing Search Results
  • Grouping Results
  • FlatList Rendering
  • Showing a Single Result
  • Showing Additional Info
  • A Few More Styling Issues
  • Hiding Scroll Bars
  • Constraining View Elements
  • Empty Elements
  • Spacing on the Search Bar
  • Reminder on Navigation
  • Navigating from a Child Component
  • The WithNavigation Helper
  • Communicating Between Screens
  • Fetching a Single Restaurant
  • Showing a List of Images
  • One Last Fix
  • Issues with Data
  • React Navigation Fix
  • Initial Setup
  • Wrapping the Navigator
  • Adding Context
  • Moving Data with Context
  • Rendering a List of Posts
  • Adding State in Context
  • Updating with UseReducer
  • Automating Context Creation
  • More Automatic Context Creation
  • A Bit of Styling
  • Deleting Posts
  • Updating the Reducer
  • Navigation on Tap
  • Retrieving Single Posts
  • Adding a Creation Screen
  • Header Navigation
  • Displaying a Form
  • Saving a New Post
  • Navigation on Save
  • The Edit Icon Link
  • Communicating Info to Edit
  • Initializing State from Context
  • Extracting Form Logic
  • Customizing OnSubmit
  • Initial Form Values
  • Default Props
  • Editing Action Function
  • Editing in a Reducer
  • Navigating Backwards
  • Outside Data API
  • Issues with Servers + React Native
  • JSON Server and Ngrok Setup
  • JSON Server REST Conventions
  • Making a Request
  • Remote Fetch of Posts
  • Creating Posts with Post Requests
  • Refetching on Navigate
  • Deleting a Post
  • Editing Posts
  • Building a Custom Express API
  • Dependencies Setup
  • The Basics of Express
  • MongoDB Setup
  • Connecting to MongoDB
  • Nodemon for Automatic Restarts
  • Understanding the Signup Process
  • Using Postman
  • Handling JSON Data
  • Defining a User Schema
  • Creating and Saving a User
  • Error Handling
  • JSON Web Tokens
  • Creating a JWT
  • Wiring Up JSON Web Tokens
  • Understanding Password Hashing
  • Salting and Hashing
  • The Signin Route
  • Testing Signup and Signin
  • Defining Tracks
  • Listing Tracks
  • Creating Tracks
  • In-App Authentication
  • Server Code
  • Server Setup
  • Navigation Design
  • React Navigation Fix
  • A LOT of Boilerplate
  • Navigator Hookup
  • Testing the Navigation Flow
  • React Native Elements
  • Helper Styling Components
  • Styling Odds and Ends
  • Input Props
  • The Auth Context
  • What's the Context Doing?
  • Axios Setup
  • Making an API Request
  • Handling Errored Requests
  • Async Storage
  • Storing the Token
  • Navigation From Outside of React
  • Oops, Typo
  • Navigation to Signin
  • Extracting Form Logic
  • Last Bit of Extractin
  • Creating a NavLink
  • Real Component Reuse!
  • Wiring Up Signin
  • Clearing Error Messages
  • Automatic Signin
  • Empty Screens While Resolving Auth
  • Signing Out a User
  • Safe Area Views
  • Working on Track Create
  • React Native Maps Fix
  • Showing a Map
  • Drawing a Series of Points
  • Notes on Location
  • Requesting Location Permissions
  • Resetting Permissions
  • How to Test Location?
  • Faking the Users Location
  • Reading a Location
  • Bugginess with Location
  • Location Architecture
  • Location Context
  • Live Location Updates
  • Drawing a Position Indicator
  • Extracting Logic to a Hook
  • Disabling Location Tracking
  • Automatic Disables
  • Building a Track Form
  • Updates to Location Context
  • Track Form Wire Up
  • Buggy UseEffects
  • Understanding Stale References
  • Kind of Fixed
  • The UseCallback Hook
  • Cleaning Up After Ourselves
  • Avoiding Stale References
  • Tracking While Recording
  • Bring Back the Polyline
  • What Manages Tracks
  • Coordination Between Contexts
  • Automatic Authentication
  • Form Reset and Navigation
  • Fetching Created Tracks
  • Listing All Tracks
  • Navigating to a Saved Track
  • Showing Track Details
  • Basic Animated and Animated.timing
  • Opacity
  • Opacity Explanation
  • Translate Position
  • Translate Position Explanation
  • Scale
  • Scale Explanation
  • Width/Height Values
  • Width/Height Values Explanation
  • Absolute Position
  • Absolute Position Explanation
  • Interpolation
  • Color/Background Color
  • Color/Background Color Explanation
  • Rotation
  • Rotation Explanation
  • Width/Height Percentage
  • Width/Height Percentage Explanation
  • Animated.Value Functions
  • Explanation
  • Easing
  • Easing Explanation
  • Animated Functions
  • Timing
  • Spring
  • Spring Explanation
  • Loop
  • Event
  • Event Explanation
  • Decay
  • Decay Explanation
  • Math
  • Add
  • Add Explanation

  • Divide
  • Divide Explanation
  • Multiply
  • Multiply Explanation
  • Modulo
  • Modulo Explanation
  • Formulas
  • Combining Animations
  • Parallel
  • Parallel Explanation
  • Sequence
  • Sequence Explanation
  • Stagger
  • Stagger Explanation
  • Delay
  • Delay Explanation
  • Combining Multiple Combined Animations
  • Interpolation
  • Numbers And Interpolates on Interpolates
  • Numbers And Interpolates on Interpolates Explanation
  • Color/Background Color
  • Color/Background Interpolate Explanation
  • Rotation
  • Rotation Explanation
  • Extrapolate
  • Extrapolate Explanation
  • Native Animations
  • Explanation
  • Gestures and Animations
  • Maintain Touchable Items with a Parent PanResponder in React Native
  • Understanding How Animated Works
  • Animated Internals
  • createAnimatedComponent
  • createAnimatedComponent Explanation
  • Using and Understanding setNativeProps
  • Using and Understanding setNativeProps Explanation
  • Using d3-interpolate with Animated
  • Using d3-interpolate with Animated Explanation
  • Using d3-interpolate-path and Animated to Animate Simple SVG Paths
  • Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation
  • Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths
  • Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation
  • Using Flubber and Animated for Better SVG Path Morphing
  • Using Flubber and Animated for Better SVG Path Morphing
  • Animated Techniques
  • Intro
  • .99 cliff
  • .99 Cliff Explanation
  • Animate Hidden
  • Animate Hidden Explanation
  • Interrupted Animation
  • Pointer Events
  • Pointer Events Explanation
  • 4 Corners Breakdown
  • 4 Corners
  • 4 Corners Explanation
  • Staggered Heads Breakdown
  • Staggered Heads
  • Staggered Heads Explanation
  • Kitten Cards Breakdown
  • Kitten Cards
  • Kitten Cards Explanation
  • Stagger Form Items Visibility on Mount Breakdown
  • Stagger Form Items Visibility on Mount
  • Stagger Form Items Visibility on Mount Explanation
  • Animated Progress Bar Button Breakdown
  • Animated Progress Bar Button
  • Animated Progress Bar Explanation
  • Dynamic Animated Notifications
  • Animated Questionnaire with Progress Bar Breakdown
  • Animated Questionnaire with Progress Bar
  • Animated Questionnaire Explanation
  • Photo Grid Shared Element Breakdown
  • Photo Grid Shared Element
  • Photo Grid Shared Element Explanation
  • Animated Color Picker Breakdown
  • Animated Color Picker
  • Animated Color Picker Explanation
  • Floating Action Button with Menu Breakdown
  • Floating Action Button with Menu
  • Floating Action Button with Menu Explanation
  • Application Intro Screen Breakdown
  • Application Intro Screen
  • Application Intro Screen Explanation
  • Evolving Write Button Breakdown
  • Evolving Write Button
  • Evolving Write Button Explanation
  • Create a Social Comment Modal with Animated Swipe Away
  • Create a Horizontal Parallax ScrollView
  • Tap to Show Love Floating Hearts
  • Bouncing Heart Shaped Like Button on Press
  • Exploding Heart Button
  • Expanding Notify Input wit
  • Writing Reusable Components
  • The DefaultProps System
  • Resetting Card Position
  • Advancing the Deck
  • Handling Empty Lists
  • Getting the Cards to Stack
  • Troubleshooting Flashing Images
  • Cascading Card List
  • Animating Advancing Cards
  • Resetting the Index
  • Deck Wrapup
  • Review of Common Auth Flows
  • The Details of One Time Passwords
  • Tech Stack with Google Cloud Functions
  • Traditional Servers vs Google Cloud Functions
  • Layout of Google Cloud Functions
  • Firebase Project Setup
  • Deploying a Firebase Project
  • Testing Deployed Functions
  • Project File Structure
  • The Request and Response Objects
  • Generating a Service Account
  • Sanitizing User Inputs
  • Creating New Users
  • Testing New User Creation
  • Texting from Twilio
  • Twilio Credentials
  • Accessing Saved Users
  • Sending Texts to Users
  • Generating Access Codes
  • Verifying One Time Passwords
  • Invalidating Used Codes
  • Generating JWT's
  • Client Side One Time Passwords
  • Transitioning to React Native
  • App Boilerplate
  • Defining Instance Properties
  • Invoking Cloud Functions
  • Refactoring with Async/Await
  • Debugging with Async/Await
  • Async/Await on User Signin
  • Capturing Tokens
  • Firebase Auth with a JWT
  • Breather and Review
  • Screen Walkthrough
  • More Screen Walkthroughs
  • Screens vs Components
  • React Native Navigation Options
  • React Navigation in Practice
  • Screen Boilerplate
  • Nesting Navigators
  • Wiring Up Stack Navigators
  • Class vs Instance Properties
  • Customization with Header Options
  • Programmatic Navigation
  • Styling the NavBar
  • The Welcome Screen
  • Styling the Welcome Screen
  • Even More Welcome Screen Styling!
  • Navigation from the Welcome Screen
  • More on Welcome Screen Navigation
  • Facebook Auth Flow
  • The Facebook Dev Console
  • Redux Setup
  • Using Async Storage
  • Crazy Async/Await Syntax
  • Logging in With Facebook
  • Testing Facebook's Login Flow
  • The Auth Reducer
  • Skipping the Auth Screen
  • Testing Auth Flow
  • Advancing the Welcome Screen
  • Resolving the Loading Screen
  • MapViews on React Native
  • Showing a Map
  • Interacting with the MapView
  • Working around MapView Issues
  • Indeed API Key
  • The Indeed Jobs API
  • Location API Mismatch
  • Converting LatLong to Zip Code
  • Fetching a List of Jobs
  • Issuing Action Creators from MapScreen
  • The Jobs Reducer
  • Navigating from Action Creators
  • The Deck Screen
  • Importing the Deck Component
  • Applying the Swipe Component
  • Styling Job Cards
  • Customizing MapViews
  • Android Compatibility
  • Dynamic Key Props
  • One More Swipe Deck Fix
  • Liking a Job
  • Considering Only Unique Jobs
  • The Review Screen
  • Rendering a List of Liked Jobs
  • Applying to Jobs
  • Mapping a Jobs Location
  • Styling the Job Card
  • Clearing Liked Jobs
  • Redirecting Back to the Map
  • Callback Gotcha
  • Tab Bar Icons
  • Tab Bar Config
  • Android Specific Fixes
  • Push Notifications and Data Persistence
  • Persisting Application State
  • Wiring Up Redux Persist
  • How Redux Persist Works
  • Redux Persist - Huge Gotcha!
  • Push Notifications
  • Push Notification Overview
  • Registering For Push Notifications
  • Generating Push Tokens
  • Testing Notifications

App 2 - Shopping cart Experience

  • Shopping cart top bar
  • Adding hero image
  • Adding Scrollable body with prop components
  • Overlay Text over images
  • Running project on Actual Android devices

App 3 - Customized photo gallery, Instagram style

  • Designing Header for Gallery
  • Styling Text elements of header
  • Mid section - subscribers
  • Scrollable gallery

App 4 - A youtube clone with dummy API data

  • Getting started with youtube logo
  • Getting the material icons
  • Having bottom bar of youtube
  • Designing body of video tiles
  • Debugging and running it on Android Devices

App 5 - Horizontal Card scroll with Native base and elements

  • Introduction to Native Base
  • Installing Native base with Expo Client
  • Fixing Android issue related to fonts
  • React Native Elements setup
  • Horizontal card view with ListView

App 6 - Drawer with Horizontal and vertical cards scroll

  • Setting up Native base for Drawer
  • Getting Instagram style cards
  • Getting a footer with badges
  • Creating sidebar component
  • Sidebar and scrollable card in both directions
  • Running it on Actual Android device

App 7 - Tinder cards with animations

  • Creating a project for Tinder cards
  • Custom header components
  • Tinder swipe cards components

App 8 - Chatlist view

  • Chatlist view setup
  • Having a Chatlist and assignment

App 9 - Dice Roller

  • Getting app assets
  • Design custom button
  • Getting a Random Number
  • getting Random images

App 10 - Currency Converter Ejecting from Expo

  • Handling Notches
  • Creating input and Result Views
  • Creating all the buttons
  • Adding working logic
  • Handling keyboards events in React native
  • Ejecting expo app to Android and iOS app

App 11 - TIC TAC TOE

  • Third party components
  • Exploring Native Base
  • Can you debug in React Native
  • Loading Custom Fonts and Resolve Errors
  • Adding TODOs and TIC TAC TOE
  • Flipping Cross and Zeros
  • Writing more functions
  • Writing winning logic for TIC TAC TOE
  • Design part of TIC TAC TOE

App 12 - Sound and Spanish number

  • Exploring Expo docs
  • Getting assets for playing sound
  • Understand the play method
  • Creating a button for sound
  • Finishing Audio app

App 13 - Scratch and win Game

  • Bug in default app and fix
  • Define the function for game
  • Getting functions for ready
  • Getting the design part and fixes
  • Dimensions and Assignment

App 14 - React navigation and camera centric

  • Info property list and manifest permission
  • Working on multiple screen React navigation
  • Creating your first screen and Navigation
  • create a follow screen
  • Take information to New screen
  • Using information on other screen
  • creating photoCliker app
  • Design home screen
  • Refractroing and Permission
  • Flashlight and camera flip
  • Designing View for camera and bugs
  • Thinking process behind debugging

App 15 - Local Storage - A Publishable contact

  • Reading docs for Flastlist and AsyncStorage
  • Create 4 screens and Navigate
  • Add a floating action button
  • Save Data in AsyncStorage
  • Design Add contact screen and challenge
  • Assignment solution for scroll
  • Get all contact
  • Using flatlist in Homescreen
  • Fetching info in flatlist
  • platform specific code
  • grab key and populate data
  • Open phone indent for iOS and Android
  • Calling SMS intent
  • Debug the app and design
  • Adding actions on Phone and SMS
  • Delete the contact
  • Working on edit screen
  • update contact with merge operation
  • Grande finale of contact app

App 16 - Employee App with Redux

  • Create app and create employee
  • Creating Reducers
  • Bug in redux app
  • Bug fix and design
  • Art of debugging

App 17 - Firebase - message board

  • Exploring firebase database
  • Setting up App and exercise files
  • Send and get from firebase database
  • Design part of message board
  • Rules of database in firebase

App 18 - Building a chat app

  • Getting all files for chat app
  • Overwriting initialization
  • Firebase Helper part 1
  • Firebase helper class part 2
  • Creating navigation screens
  • creating home screen
  • chat screen and debug

App 19 - Firebase - Complete Contact app with images

  • Download the start files
  • Understand the project
  • Working app js file
  • uuid and blobs
  • Upload and download images to firebase storage
  • Saving contact to firebase
  • Working on Homescreen for firebase
  • delete contact from firebase
  • work on view contact
  • editscreen selection of images
  • uploading new contact in existing key
  • lets debug

App 20 - Business Rating App

  • Install Node and Angular
  • Install Ionic and Cordova
  • Install MongoDB
  • Ionic 4 Project Setup
  • Install VS Code
  • Create Ionic Project
  • Create Node Project
  • VS Code Workspace
  • Create Home Page
  • Create Login Page
  • Style Login Page
  • Add Register Page Inputs
  • Signup and Login Authentication
  • Install Express
  • Start Mongodb Server
  • Create User Route
  • Create Register Provider
  • Install Cors
  • User Model
  • Passport Signup
  • Signup New User
  • Add Loading Controller
  • Add Alert Controller
  • Add Validations
  • Task Solution
  • Passport Login
  • Ionic Storage
  • Save Email in Storage
  • Company Section
  • Company Inputs
  • Automatic Login
  • Logout
  • Company Form
  • Sidemenu List
  • Add Create Company Link to Sidemenu
  • Company Schema
  • Company Route
  • Company Provider
  • Import Company Provider
  • Add Field to Company Schema
  • Add Home Route
  • Get User Data
  • Exclude Password
  • Add User Id to Create Company Method
  • Create Test Company
  • Validate Company Data
  • Use View Did Enter
  • Get All Companies
  • Display All Companies
  • Add Style to All Companies Page
  • Home Page Elements
  • Add Styles to Home Page
  • Reviews and Rating Section
  • Style Create Company Page
  • Add Reviews Page
  • Add Company Profile Page
  • Display Name on Review Page
  • Update Company Schema
  • Add Review Route
  • Add Review Method
  • Send Review and Ratings to Back-end
  • Update Company Document with Ratings and Review

  • Review Fields Validation
  • Add Toast Controller to Review's Page
  • Ionic Rating Component
  • Style Rating Stars
  • Create Average Method
  • Company Profile Page
  • Create Rating Sum Method
  • Custom Rating Component
  • View Company Reviews
  • Fix Review Typo Error
  • Display Average Rating
  • Display Sidemenu Icons
  • Sidemenu Elements
  • Sidemenu Styles
  • Use Moment Library
  • Use Substr Method
  • Employee Role Alert Box
  • Update User Company Schema
  • Send Employee Role
  • Add Toast Controller For Employee Role
  • Image Upload
  • Create Settings Page
  • Populate Company Array
  • Display Settings Elements
  • Display Companies
  • Cloudinary
  • Cloudinary Config
  • Provider Upload Image Method
  • Camera Options
  • Cloudinary Upload Method
  • Save Image Id
  • Display Profile Image
  • Upload Logo Method
  • Display Logo
  • Rounding Method
  • Search Page
  • Search Input
  • Search Route
  • Search Results
  • Show Search Results
  • Add Click Method to Result
  • Leaderboard
  • Display Name on Home Page
  • Get User Email Using Async/Await
  • Use Get User Email Method
  • Deployment Section
  • Install Helment and Compression Modules
  • Create Database on Mlab
  • Environment Variables
  • Git Push
  • Create Heroku App
  • Install pm2
  • Replace Localhost with Heroku App Url
  • Add Heroku Port
  • Try App on Browser
  • Add Gradient to Login Page
  • Install Android Studio and Try App on Emulator
  • Show Scroll
  • Github Link for Ionic 4 App

App 21 - Ecommerce App with Wrodpress

  • Create “webstore” app project from Ionic CLI
  • Create necessary Pages and Services from Ionic CLI
  • Show necessary pages to left menu
  • Prepare all routing and navigations throughout app
  • Install JWT authentication plugin to our WordPress Install
  • Configure our server and app for JWT authentication plugin
  • Dive Into WooCommerce API
  • Fetch all products of the store
  • Fetch single product / product details page
  • Fetch all product categories
  • Fetch products by specific product category
  • Fetch all product tags
  • Fetch products by specific product tag
  • Show product title on toolbar at single product page
  • Authentication with WordPress and WooCommerce
  • Create signup form with submit button
  • Setup form validation before submission
  • Implement Email Validation function
  • Create signup function
  • Complete new customer signup with specific success/error message using toast
  • Create login form with submit button, Implement form validation
  • Create login function
  • Now login with newly signed up credentials
  • Save current logged in user’s email and ID in local storage
  • Implement logout
  • Implement authorization using auth guard
  • Shopping Cart
  • How add to cart works
  • How to add an add to cart button at single product page
  • Add product to cart by clicking on the add to cart button
  • Show the number of items added to cart in cart icon
  • Live update cart item numbers

  • Go to cart page and list all products previously added to cart
  • Change quantity per product on cart page
  • Delete an item from cart
  • Calculate total amount for all added cart items
  • Checkout & Place Order
  • Navigate to checkout page
  • Fetch all available payment gateways
  • Show short order history
  • Explain “FORM” for billing/shipping information
  • Explain validation of billing/shipping form
  • Make “Place Order” button available once a Payment method is selected
  • Keep “Place Order” button disabled until whole checkout form is valid
  • Place order and verify it from WP Admin
  • Show success message on successful order
  • User Profile Management
  • Show user’s full name, username, user role and email
  • Show current user’s avatar
  • Show users billing and shipping info
  • Get order list for current user
  • Final Touch & Deployment to real devices
  • Renovation of homepage
  • Renovation of login register
  • Generate build for Android using Capacitor for our project
  • Generate build for iOS using Capacitor for our project
  • Run app and debug the project
  • Guideline to Play Store And App Store submission for our project

App 22 - Push Notification

  • Project Setup
  • Wordpress Setup in Cpanel
  • Wordpress Setup in Localhost
  • Wordpress as backend and Restful API
  • Costumizing REST API
  • Creating a new project on Ionic 4
  • Creating Wordpress Angular service and Application Pages
  • Creating side menu
  • UPDATE: Closing menu function
  • Getting posts from Wordpress to App with RESTful API
  • Enable CORS in Wordpress
  • Get single post data
  • Ion-refresh and Pagination
  • Category posts page
  • Styling the Application
  • iOS app, working on xCode
  • Running app on iPhone device
  • Andoid app, working on Android Studio
  • Setup push notification with OneSignal
  • Sending push webpush from OneSignal
  • Onesignal, IOS setup in Ionic
  • Setup FireBase account
  • Setup Onesignal Wordpress connection
  • Push Notifications setup for iOS
  • Publish the app on Play Store

App 23 - The travel record app

  • The Login Page
  • Creating a new Activity
  • Intents
  • Passing Values through Intents
  • The Login Page
  • Adding Constraints
  • New ViewController
  • The NavigationController
  • Segues
  • Creating another Azure App Service
  • Connecting to the App Service
  • Creating a Table and its Class
  • Inserting into a Table
  • Reading from a Table
  • Sharing code
  • The PCL
  • Reusing Login Functionality
  • Reusing Register Functionality
  • Read Tables
  • Intro to Generics
  • Inserting to any Table
  • Tabs in Android
  • Preparing Android Project to use Tab Layout
  • Using the TabLayout
  • Navigating between Fragments
  • Prevent Back Navigation
  • Toolbar Navigation
  • Inserting Deliveries
  • Tabs in iOS
  • The TabBarController
  • Adding One View Per Tab
  • Prevent Back Navigation
  • The BarButtonItem
  • Lists in Android
  • The ListFragment
  • The ListAdapter
  • Using a Custom Adapter
  • Lists in iOS
  • The TableViewController
  • The TableViewCell
  • Using a Custom Cell
  • Preparing the Project to use Maps
  • Obtaining the Google Maps API Key
  • Displaying Maps (Android)
  • Location and Pins
  • Running on Android Device
  • Maps in iOS
  • Displaying Maps (iOS)
  • Location and Pins in iOS
  • Getting the Center of the Map
  • The Delivery Person's App
  • The Layout for the new App
  • UI And Navigation Challenge
  • Updating Deliveries
  • DisplayingMaps and Getting Directions
  • Adding Platform Specific Functionality
  • Biometric Authentication - iOS
  • Biometric Authentication with FaceID
  • Biometric Authentication - Android
  • Haptic Feedback
  • App Shortcuts
  • Updating Android Projects to Oreo
  • Updating iOS Project to iOS 11
  • Publishing to the App Stores
  • Preparing the Android Project
  • Generating APK
  • Publishing your Android Application
  • Preparing the iOS Project
  • Generating IPA
  • Publishing your iOS Application
  • Sending Updates to the Stores
  • In-App Purchases
  • About In App Purchases
  • Creating the iOS In-App Purchases
  • Performing the Purchase on iOS
  • Performing the Purchase on Android

App 25 - Blood Donation App

  • Azure VM
  • Rest Api Jumpstart
  • Create a Web Api Project
  • HTTP Verbs
  • Create First Web Api with HTTP Methods
  • Status Codes
  • Validation Overview
  • Implement Validations in Web Api's
  • Implement Code First via Entity Framework
  • Implement Get Method
  • Implement Post Method
  • Implement Put Method
  • Implement Delete Method
  • Create Api via Authentication and Authorization
  • Post Method and Upload Image Files
  • Get Method with Searching and Sorting
  • Publish and Deploy Api on Microsoft Azure
  • Create Azure Account
  • Create Web App on Microsoft Azure
  • Create SQL Database on Microsoft Azure
  • Publish and Deploy Web Api to Microsoft Azure
  • Azure Important Note
  • Azure New Way to Create Web App and Sql Database
  • Test Api and Manage Azure Kudu
  • Create Xamarin Forms Project
  • Understand Xamarin Forms Project Architecture
  • Layouts in Xamarin Forms
  • Pages in Xamarin Forms
  • Create Application Tiers
  • Create Models
  • User Registration Method
  • User Login Method
  • Find Blood and Latest User Method

  • Register Donar Method
  • Sign In Page
  • Create Sign in Page UI
  • Implement Sign in Page Functionality
  • Create Sign Up Page UI
  • Implement Sign Up Page Functionality
  • Logout Functionality
  • Create Home Page UI
  • Implement Home Page Functionality
  • Find Blood Page
  • Create Find Blood Page UI
  • Implement Find Blood Page Functionality
  • List of Donars
  • Create DonarsList UI
  • Implement DonarsList Functionality
  • Create Donar Profile Page UI
  • Implement Donar Profile Page Functionality
  • Register Donar Page
  • Create Register Donar Page UI
  • Implement Register Donar Page Functionality
  • Create Latest Donars UI & Implement Functionality
  • Create Help Page
  • Make Application User Friendly
  • ListView Selection Issue
  • Create & Apply App icons
  • Apply Splash Screen Android Project
  • Splash Screen in IOS Project

App 26 - Movies App

  • Create Xamarin Forms Project
  • Architecture of Xamarin Forms Project
  • Bottom Tabbed Page in Xamarin Forms
  • Take a look at Application Backend
  • Understand Application Backend
  • Get Api Keys
  • Application Tiers
  • Create Model Classes
  • Service Layer : NowPlaying Method
  • Service Layer : Upcoming Movies Method
  • Service Layer : BookTicket Method
  • NowPlaying Movies Page
  • Create NowPlaying Movies Page UI
  • Data Binding in Now Playing Movies Page
  • NowPlaying Movies Page Code Behind
  • MovieDetail Page
  • Create MovieDetail Page UI
  • MovieDetail Page Code Behind
  • Embed Youtube Videos
  • Embed Youtube Videos in Xamarin Forms Application
  • BookTicket Page
  • Create BookTicket Page UI
  • BookTicket Page Code Behind
  • Upcoming Page
  • Create Upcoming Movies Page UI
  • Upcoming Movies Page Code Behind
  • Syncfusion Listview Selection
  • Get Lifetime Syncfusion License
  • How to get 100 percent free Synfusion License
  • Listview & Loader Issue
  • Create LatestMovies Page
  • Tabbed Bar Selection Color
  • Change Navigation Bar Color

App 27 - Accademy App

  • Explore Project Architecture
  • Debugging Xamarin Forms Application
  • Layouts
  • Pages in Xamarin Forms
  • Master Detail Page
  • Improve Master Detail Page Design
  • Code Behind Functionality of Master Page
  • Application Backend
  • Download The Github Code For Web Api
  • Configure Application Backend
  • Api Deployment to Azure
  • Create Azure Account
  • Create Azure Web App
  • Create Azure Database
  • Publish Web Api to Azure
  • Azure Important Note
  • Azure New Way to Create Web App and Sql Database
  • Api Documentation
  • Test Api & Resolve Kudos
  • Application Tiers
  • Create Model Classes
  • Create Service Layer : Register User Method
  • Create Service Layer : Get Token Method
  • Create Service Layer : Password Recovery Method
  • Create Service Layer : Change Password Method
  • Create Service Layer : Become An Instructor Method
  • Create Service Layer : Get All Instructors Method
  • Create Service Layer : Get Instructor Method
  • Create Service Layer : Search Instructors Method
  • Create Service Layer : Get Cities Method
  • Create Service Layer : Get Courses Method
  • Slight Modification in The Service Layer
  • Login Page
  • Create Login Page UI
  • Login Page Code Behind
  • Sign Up Page
  • Create Sign Up Page UI
  • Sign Up Page Code Behind
  • Store User Credentials and Access Token
  • Logout Functionality
  • Forgot Password Page
  • Create Forgot Password Page UI
  • Forgot Password Page Code Behind
  • Change Password Page
  • Create Change Password Page UI
  • Change Password Page Code Behind
  • Home Page
  • Create Home Page UI
  • Binding in Home Page
  • Home Page Code Behind
  • Instructor Profile Page
  • Listview Cell Repetition
  • Create Instructor Profile Page UI
  • Instructor Profile Page Code Behind
  • Xamarin Essentials : Call Message Email
  • Instructor Search Page
  • Find Instructor Page UI
  • Find Instructor Page Code Behind
  • Create Instructor Search Page
  • Become Instructor Page
  • Create Become Instructor Page UI
  • Become Instructor Page Code Behind
  • Change Navigation Bar Color
  • Translucent Effect in Android Status Bar
  • FF Image Loading
  • Integrate FF Image Loading Plugin
  • Implement FFImage Loading in Xamarin Forms

App 28 - Expresso

  • Explore Project Architecture
  • Debugging Xamarin Forms Application
  • Layouts
  • Pages
  • Tabbed Page in Xamarin Forms
  • Adding Children's in Tabbed Page
  • Bottom Tabbed Page
  • Application Back-end
  • Download The Github Code For Web Api
  • Create Azure Account
  • Create Azure Web App
  • Create Azure Database
  • Publish Web Api to Azure
  • Insert Data Via SQL Generated Script
  • Azure Important Note
  • Azure New Way to Create Web App and Sql Database
  • Application Tiers
  • Create Model Classes
  • Create Service Layer : Get Menu Method
  • Create Service Layer : Reserve Table Method
  • Create Menu Page UI
  • Menu Page Data Binding
  • Menu Page Code Behind
  • Create Sub Menu Page UI
  • Sub Menu Page Code Behind
  • Reservation Page
  • Create Reservation Page UI
  • Reservation Page Code Behind
  • Information Page
  • Create Information Page UI
  • Create Information Page Code Behind
  • Xamarin Essentials : Integrate Xamarin Essentials
  • Utilize Xamarin Essentials : Phone Dialer
  • Activity Indicator
  • Listview Selection
  • Styling Tabbed Page
  • Change Navigation Bar Color
  • Translucent Effect in Android Status Bar
  • FF Image Loading in Xamarin Forms
  • FFImage Loading
  • Integrate FF Image Loading Plugin
  • Implement FFImage Loading in Xamarin Forms
  • App 29 - Quiz App
  • Building an App From Scratch

  • Running the App on an Emulator
  • Class Constructors & Named Arguments
  • First Summary & Additional Syntax
  • Flutter App Basics
  • Building a Widget Tree
  • Visible (Input / Output) & Invisible (Layout / Control) Widgets
  • Adding Layout Widgets
  • Widget Basics
  • Connecting Functions & Buttons
  • Anonymous Functions
  • Updating Widget Data (Or: Using StatelessWidget Incorrectly)
  • Updating Correctly with Stateful Widgets
  • Stateful & Stateless Widgets
  • Using Private Properties
  • Creating a New, Custom Widget
  • First Styling & Layouting Steps
  • Enums & Multiple Constructors
  • Official Docs & The Widget Catalog
  • Passing Callback Functions Around
  • Introducing Maps
  • Mapping Lists to Widgets
  • Advanced Flutter & Dart Basics
  • Introducing "if" Statements
  • Outputting Widgets Conditionally
  • Splitting the App Into Widgets
  • Calculating a Total Score
  • Getters & "else-if"
  • Resetting the Quiz
  • Running Apps on Different Devices & Debugging Apps
  • Running the App on a Real Android Device
  • Running the App on an iOS Emulator
  • Running the App on a Real iOS Device
  • Working with the Emulators / Using the Emulators
  • Understanding Error Messages & Fixing Errors
  • Using the Debugger
  • Getting Started with the Dart DevTools
  • Understanding the Repaint Rainbow
  • Wrapping up the Dart DevTools

App 30 - Personal Expense App

  • An Overview of the Core Flutter Widgets
  • Planning the App
  • Combining Widgets
  • Understanding Column Alignment
  • Columns & Rows
  • Mapping Data Into Widgets
  • Building a Custom List Item
  • Styling a Container
  • Styling Text
  • Using String Interpolation
  • Installing External Packages & Formatting Dates
  • DateFormat Patterns
  • Adding Text Input Widgets (TextField)
  • Fetching User Input
  • Splitting the App Into Widgets
  • Connecting Widgets & Managing Data / State
  • Adding User Transactions to the List
  • Making the List Scrollable!
  • Working with ListViews
  • Lists, Scrolling & Text Input
  • Further Input & Output Styling and Configuration
  • Adding AppBar Buttons & Floating Action Buttons
  • Showing a Modal Bottom Sheet
  • Improving & Styling the Modal Bottom Sheet
  • Configuring & Using Themes
  • Custom Fonts & Working with Text Themes
  • Adding Images to the App
  • Planning the Chart Widget
  • Looping Through Lists
  • More on "for" Loops
  • Deriving Recent Transactions
  • Creating Bars for our Chart
  • Populating the Chart with Values
  • Finishing the Chart Bars
  • Flexible & Expanded: Deep Dive
  • Adding a ListTile Widget
  • Improving the Overall Chart
  • Showing a DatePicker
  • Adding Transactions with a Date
  • Deleting Transactions & Using IconButtons
  • Responsive & Adaptive User Interfaces and Apps

  • What does "Responsive" and "Adaptive" Mean?
  • Calculating Sizes Dynamically
  • Working with the "textScaleFactor"
  • Using the LayoutBuilder Widget
  • Controlling the Device Orientation
  • Rendering Alternative Landscape Content
  • Finishing Landscape Mode
  • Showing Different Content Based on Device Orientation
  • Respecting the Softkeyboard Insets
  • Using the Device Size in Conditions
  • Managing the MediaQuery Object
  • Checking the Device Platform
  • Using Cupertino (iOS) Widgets
  • Using the SafeArea
  • More Cupertino Styles
  • Using Cupertino Buttons
  • Creating Custom Adaptive Widgets
  • Adaptive Widgets
  • Widget & Flutter Internals - Deep Dive
  • Widget Tree & Element Tree - What, Why and How?
  • How Flutter Rebuilds & Repaints the Screen
  • How Flutter Executes build()
  • Using "const" Widgets & Constructors
  • Widgets, Elements, build()
  • Extracting Widgets
  • Using Builder Methods
  • Understanding the Widget Lifecycle
  • Calling super.initState() etc.
  • Understanding the App Lifecycle
  • Understanding Context
  • Using Keys
  • Keys, Lists, Stateful Widgets

App 31 - Meals App

  • Starting With The App - Adding Base Data
  • Creating a Grid & Working with Linear Gradients
  • Registering a Screen as the Main Screen
  • Styling & Theming
  • Navigating to a New Page
  • Passing Data via the Constructor
  • Using Named Routes & Passing Data With Named Routes
  • Screens & Navigation
  • Diving Deeper into Named Routes
  • Adding a Meal Model & Data
  • Selecting Meals for a Chosen Category
  • Displaying Recipe Items & Using Network Images
  • Finishing the Meal List Item
  • Navigating to the Meal Detail Page

  • onGenerateRoute & onUnknownRoute
  • Finishing the Meal Detail Page
  • Adding a TabBar to the Appbar
  • Adding a Bottom TabBar
  • Adding a Custom Drawer
  • Adding Links to the Drawer
  • Tabs & Drawers!
  • Replacing Pages (Instead of Pushing)
  • Popping Pages & Passing Data Back
  • Replacing, Popping & Data
  • Adding Filter Switches
  • Adding Filtering Logic
  • Adding a "Mark as Favorite" Feature

App 32 - Shop App

  • Defining a Data Model
  • Working on the "Products" Grid & Item Widgets
  • Styling & Theming the App
  • Adding Navigation to the App
  • Why State Management? And what is "State" and "State Management"?
  • Understanding the "Provider" Package & Approach
  • Using the Right Provider Package Version
  • Working with Providers & Listeners
  • Providing non-Objects
  • Listening in Different Places & Ways
  • State, State Management & The Provider Package/ Approach
  • Using Nested Models & Providers
  • Exploring Alternative Provider Syntaxes
  • Using "Consumer" instead of "Provider.of"
  • Local State vs App-wide State
  • Adding Shopping Cart Data
  • More on State Management & The Provider Package
  • Working with Multiple Providers
  • Connecting the Cart Provider
  • Working on the Shopping Cart & Displaying a Total
  • Displaying a List of Cart Items
  • Making Cart Items Dismissible
  • Adding Product Detail Data
  • Providing an Orders Object
  • Adding Orders
  • Adding an Orders Screen
  • Using a Side Drawer
  • Making Orders Expandable & Stateful Widgets vs Providers
  • Snackbars & Undoing "Add to Cart" Actions
  • Showing Alert Dialogs
  • Adding a "Manage Products" Page
  • "Edit Product" Screen & A Problem
  • Using Forms & Working with Form Inputs
  • ListView or Column
  • Managing Form Input Focus
  • Multiline Inputs & Disposing Objects
  • Image Input & Image Preview
  • Submitting Forms
  • Validating User Input
  • Adding Validation to All Inputs
  • Saving New Products
  • Time to Update Products!
  • Allowing Users to Delete Products
  • On-Device vs Web Storage
  • How to Connect Flutter to a Database
  • Preparing Our Backend
  • How To Send Http Requests
  • Sending POST Requests
  • Working with Futures in Dart
  • Http Requests & Futures
  • Working with "async" & "await"
  • Fetching Data, initState & "of(context)"
  • How to Transform Fetched Data
  • Implementing Pull-to-Refresh
  • Updating Data via PATCH Requests
  • Creating Custom Exceptions & More Error Handling
  • Updating the "Favorite" Status Optimistically
  • Storing Orders in the Web

  • Fetching Orders & Fixing an Issue
  • Using the "FutureBuilder" Widget & Improving the Code
  • How Authentication Works
  • Prepare Backend
  • Adding the Auth Screen
  • Adding User Signup
  • Allowing Users to Log In
  • Handling Authentication Errors
  • Managing the Auth Token Locally (in the App)
  • Avoiding Issues with Provider Package
  • Using the "ProxyProvider" and Attaching the Token to Outgoing Http Requests
  • Adding the Token to All Requests
  • Connecting the "Favorite" Status to Users
  • Attaching Products to Users & Filtering By Creator
  • Attaching Orders to Users
  • Adding a Logout Functionality
  • Automatically Logging Users Out (After Some Time)
  • Automatically Logging Users In
  • Animations From Scratch (Completely Manually Controlled)
  • Using the "AnimatedBuilder" Widget
  • Working with the "AnimatedContainer"
  • More Built-in Animation & Transition Widgets
  • Fading Loaded Images In (And Showing a Placeholder)
  • Adding a "Hero" Transition
  • Working with Slivers
  • Implementing Custom Route Transitions
  • PlaceList & Place Provider Setup
  • Adding the "Add Place" Screen & An Image Input
  • Using Image Picker & The Device Camera
  • Storing the Image on the Filesystem (on the Device)
  • Managing Data & Images via the Provider Package
  • Handling Errors
  • Testing on Real Devices
  • Preparing SQLite
  • Storing & Fetching Data with SQLite
  • Adding a Location Input & The "location" Package
  • Fetching the User Coordinates
  • Displaying a Static Map Snapshot
  • Rendering a Dynamic Map (via Google Maps)
  • Allowing Users to Pick a Location on the Map
  • Storing the Location in SQLite
  • Adding a "Place Detail" Screen & Opening the Map in "readonly" Mode
  • Sending a Method Call from Flutter
  • Running Android Code
  • Running iOS Code
  • Preparing the Code
  • Preparing the App Configuration
  • Preparing Third-Party Services
  • Adding Icons & Splash Screens
  • Publishing Android Apps
  • Publishing iOS Apps

App 33 - To Do App

  • Install Node.js and Quasar CLI
  • Create & launch a new Quasar Project in the Browser
  • Folder structure - Layouts, Pages, Routes & more
  • Start building the Awesome Todo app
  • Add Page Navigation to Sidebar (Drawer)
  • Tab Navigation for Mobile
  • Consolidating Navigation Data
  • Only show Drawer on Desktop, Tabs on Mobile
  • Adding some Style to the Layout
  • Add SCSS support
  • Customise Theme with Theme Builder
  • Display a List of Tasks
  • Add Due Date and Time
  • Add some Style to the List of Tasks
  • Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension
  • Create a Getter for the Tasks Data
  • Change Tasks Array into an Object Structure
  • Put Task into a Child Component
  • Set Completed Status in Vuex Store
  • Delete Task - Add Delete Button & Confirm Dialog
  • Delete Task - Delete the Task from the State
  • Add Task - Forms, Fields & Validation
  • Vuex - Add Task when Form Submitted
  • Edit Task - Add the Button & Show the Modal
  • Edit Task - Customise & Setup the Modal
  • Create Getters for Todo and Completed Tasks
  • Display Todo and Completed Tasks in Separate Lists
  • Add Headings to the Task Lists
  • Make the Heading Background Color Adjustable
  • Conditionally Show & Hide the Task Lists
  • Add a "No tasks to do today!" Banner
  • Use Global Event Bus to fix the "No tasks" Banner Button

  • Add a Search Bar
  • Add the Search Bar Markup
  • Connect Search Bar to Vuex State with mapState
  • Use a Computed Property Setter to set the Vuex search value
  • Display “No search results” & Hide the “No tasks today” Banner
  • Add Sorting Getter to Vuex Store
  • Add a Sort Dropdown Component to the Page
  • Sort Dropdown - Configure the Options
  • Link the Sort Dropdown to the Vuex Store State
  • Custom Directive - Select All Text in Input when Clicked
  • Custom Directive - Make it Global!
  • Clear the Search Field when Esc pressed
  • Click and Hold a Task to Edit with v-touch-hold Directive
  • Filter - Format the Date Nicely
  • Filter - Highlight the Search Query on Matching Tasks
  • Mixin - Combine Duplicated Code on Add / Edit Task into Mixin
  • Transitions - Animate the Showing & Hiding of Components
  • Add a Scroll Area
  • Add a "Show 12 hour time format" Setting
  • Vuex - Create a Settings Store
  • Format the Time with a Computed Property
  • Add a "Show tasks in one list" Setting
  • Make the Settings Persistent using LocalStorage Plugin
  • Get & Apply the LocalStorage Settings on App Load
  • Add a "More" Section and a Help Page
  • Create a Login & Register Page
  • Firebase - Authentication
  • Firebase - Setup the Data Structure
  • Firebase - Reading Data
  • Firebase - Writing Data
  • Firebase - Improve The Loading Experience
  • Firebase - Multiple Users & Database Rules
  • Firebase - Handle Errors & Show Notifications
  • Download all Icons and Splashscreens
  • Add the Mac Platform
  • Electron Main Process file & Tidying Up
  • Platforms - Windows (Electron)
  • Platforms - iOS (Cordova)
  • Platforms - Android (Cordova)
  • Build the App for Production

Our Mission

Our mission is provisioning of tools and resources to our students to learn new IT techniques and help the IT industry of Pakistan to reach new highs, For augmenting their technical capabilities that lead to significant ascend in their performance in career place all backed by Contemporary Teaching Methodologies, Competitive Pricing, and highest grades of Customer Service!

Blank Slate Principle

As an IT institute BlankSlate Wants to contribute for the IT industry of Pakistan. And involved in the development of current and future IT Experts. We declare our willingness to progress in the implementation, within our institution, of the following Principles, starting with those that are more relevant to our capacities and mission.

Key of Success

Training and education. Quality data and reporting. Management commitment, customer satisfaction. Staff Orientation. Role of the quality department. Communication to improve quality, and. Continuous improvement.