Ionic 6+ With Nodejs - Complete Beginner To Pro Course 2022

Build Native iOS, Android Apps also PWA with Ionic 6+ Angular, Capacitor 4 & Nodejs (Typescript) as Backend with MongoDB

What you'll learn
Build Native apps for iOS & Android using Angular and the powerful features that Ionic offers along with Capacitor
Learn Nodejs (Typescript) with MongoDB from Basics to Advanced with proper & optimised coding file structure
Build Food Delivery App like Swiggy / Zomato / Uber-Eats (includes Customer App & Admin Panel in the Same App) with Ionic Angular & Capacitor, Nodejs (backend)
Learn to build Native Apps & Progressive Web Apps (PWAs) using Ionic Capacitor with Nodejs
Using Redis for Blacklisting RefreshTokens
Send Mails using SendGrid and Gmail
Integrate Payment Gateways like Razorpay
Learn the Basic Fundamentals of Ionic & Nodejs coupled with Advanced Features
Learn to use different Capacitor Plugins (also with Cordova) & Resolve all encountered issues in it
Test iOS & Android Apps on Real Devices (including Emulators & Simulators) and Publish those Apps to their respective stores (App Store & Google Play Store)
Learn to Deploy Nodejs to Heroku
Clean Coding Best Approaches
Support Chat App using Web Sockets - Coming Soon
Requirements
One should be little familiar with modern web development: HTML, CSS, JavaScript
A brief understanding of Angular and Typescript would be beneficial, but not ultimately required.
Without programming experience also, you will learn all you need to know to work with full stack development
Description
Building Full-Stack Applications (i.e. frontend + backend) with the MEAN stack is very popular - in this course, you will learn it from scratch at the example of a complete project!MEAN stands for MongoDB, Express.js, Angular (Ionic Framework using Angular) and Node.js - and combined, these four technologies allow you to build amazing web & mobile applications.Ionic is one of the most exciting & evolving technologies you should learn at the moment. It empowers you to build leading cross-platform mobile apps (native mobile apps) for iOS and Android, and also Progressive Web Apps (PWAs) using one codebase (written in HTML, JS and CSS)This course will introduce you to Ionic step by step and gradually adding more and more Ionic components. It teaches you the latest version of Ionic from scratch with no prior knowledge needed about it.Angular allows you to create awesome web applications powered by TypeScript / JavaScript. We will use it to build web applications that can be compiled into native mobile apps, running on any iOS or Android device, also teach you to build progressive web apps with same codebase simultaneously.The Ionic framework allows you to build Native Mobile Apps using your existing Angular, HTML, JS and CSS knowledge. Ionic provides a lot of beautiful components (which you'll learn about in this course) that can be used to create Native-like User Interfaces (UI).Capacitor (a tool provided by the Ionic team) will be used to then build a native mobile app for iOS/ Android based on your code. This allows you to publish your application on all possible devices (desktop and mobile) without having to learn lots of different languages! So with Ionic, you can use one codebase to create 3 different apps (iOS, Android, web).Node.js is probably THE most popular and modern server-side programming language you can dive into these days!Node.js developers are in high demand. Not to mention its applications in build workflows for projects of all sizes.No wonder that hybrid frameworks like Ionic are extremely popular and getting into high demand day by day and connecting it with one of the best backend technologies i.e., NodeJs & MongoDB as the database makes it a complete full stack course!.This course will teach you all of that! From scratch with zero prior knowledge assumed. Though if you do bring some knowledge, you'll of course be able to quickly jump into the course modules that are most interesting to you.My name is Nikhil Agarwal and I'm a professional web & app developer. I love creating awesome applications that are challenging & amazing.This course takes you from being a newbie(zero) to expert (advanced level) in Full Stack Development, taking a very practice-orientated route. At first you will gain all the basics knowledge along with that you’ll build an app to use main Capacitor plugins & some basics concepts about Ionic. In the basics of Ionic you’ll learn about its rich component library, how to fetch and handle user input, how to store data and access native device features and much more! After bagging all the basics, you'll build a realistic app (similar to Swiggy / Zomato / Uber-Eats) in this course.You'll dive into all important Ionic components & concepts such as navigation, user input, native device features (e.g. camera, geolocation, call, contacts, local notifications, share etc.), storage, http, authentication! Along with that You'll dive into  basics of NodeJs, creating simple-complex APIs with optimise Coding Approaches and easy to understand file structure.Since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator/simulator or on real device!Here’s a quick rundown of what you are going to learn in this course?- How to set up environment for Ionic projects in Windows & MAC & - How to run native apps in Emulator, Simulator & real devices for both iOS & Android. Also, testing app in browser, with all debugging tools- The basics about Ionic - How navigation works, how your project is structured and you use its rich component library- How to use the many beautiful components Ionic provides- How to use modals, alerts, toasts and many, many more useful UI components- How to fetch and handle user input through inputs, text-fields, dropdowns, dialogs etc.- How to authenticate users and access web servers to store & load data- How to work with different Capacitor plugins for PWAs & Native Mobile Apps (using Capacitor )- Clean Coding Practice along with App Styling & theming- NodeJs with Typescript as Backend with proper coding approaches & file structure- Handling middlewares, errors, authentication, security measures etc.- Using Redis for blacklisting refreshtokens, sending mail using Sendgrid and Gmail- & many moreFinally, you'll learn how to configure your app and publish App to the App Store or Google Play Store (or as a progressive web app) & even deploy NodeJs Backend to HerokuDoes this sound great?I can't wait to welcome you in this course! :)

Overview

Section 1: Course Introduction & How to get my Support

Lecture 1 Welcome to this Course

Lecture 2 Course Outline

Lecture 0 How to get the Most out of this Course

Lecture 0 How to Reach Out to Me through other medium?

Lecture 0 Join our Discord Community

Lecture 0 Learn more from my Youtube Channel

Section 2: Introduction to Ionic Framework

Lecture 3 Module Introduction

Lecture 0 What is Ionic?

Lecture 0 What is Angular?

Lecture 0 Understanding Ionic Ecosystem & How it Works

Lecture 0 Evolution of Ionic

Lecture 0 Ionic 6+ vs Ionic 5 vs Ionic 4 vs Ionic 3

Lecture 0 Ionic App - Compiled or Hybrid

Lecture 4 Capacitor vs Cordova

Section 3: Setting up the Environment

Lecture 5 Module Introduction

Lecture 6 Install Nodejs

Lecture 7 Creating your first project

Lecture 8 Setup Visual Studio Code Editor & Understand Ionic Project Structure

Section 4: Building Native Apps with Capacitor

Lecture 9 Module Introduction

Lecture 10 Creating an Android App & Running in Emulator & Real Android Device

Lecture 11 Creating an iOS App & Running in Simulator & Real iOS Device

Lecture 0 How to fix problems with cocoapods installation in M1 MacBook Pro

Section 5: Ionic Basics

Lecture 12 Module Introduction

Lecture 13 Ionic Starter Templates

Lecture 0 Ionic Routing & Navigations

Lecture 14 Ionic Navigation using NavController

Lecture 15 Ionic + Angular Page Lifecycle

Lecture 0 How to use Services in Ionic

Lecture 16 How to use Shared Components in Ionic

Lecture 0 Use of Promise async await try catch

Lecture 17 Spread Operators

Lecture 18 constructor vs ngOnInit

Lecture 19 Model vs Interface

Section 6: Working with HTTP Requests

Lecture 20 Module Introduction

Lecture 21 What is REST API

Lecture 22 Fetch all Data & Display in App

Lecture 23 Fetch Single Data & Display in App

Lecture 24 How to use HTTP POST, PUT Methods

Lecture 25 How to Deal with CORS Issue

Section 7: Debugging Ionic Apps

Lecture 26 Module Introduction

Lecture 27 Debugging Ionic App using console.log()

Lecture 28 Debugging using Browser DevTools & Breakpoints

Lecture 29 Debugging the App UI & Performance

Lecture 30 Debugging Android Apps in Real Device or Emulator

Lecture 0 Debugging IOS Apps in Real Device or Simulator

Section 8: Styling & Theming Ionic Apps

Lecture 0 Module Introduction

Lecture 31 Starting with CSS Utilities

Lecture 0 Setting Global Theme Variables

Lecture 0 Setting all Theme Colors at once

Lecture 0 Creating a New Theme Color

Lecture 0 Setting Global Styles

Lecture 0 Setting Platform-Specific Styles

Lecture 0 Styling Core Components with Variables

Lecture 0 Component-Specific CSS Variables & Custom Rules

Lecture 0 Using Dark Mode

Lecture 0 Module Introduction

Lecture 0 Network & Toast

Lecture 0 Share

Lecture 0 Camera - take picture, get from photos & share image via email

Lecture 0 Contacts - access phone contacts

Lecture 0 Call Number

Lecture 0 Local Notifications

Lecture 0 Implementing the native features on iOS using Capacitor v3

Lecture 0 Module Introduction

Lecture 0 2.Attributes, Property & Slots

Lecture 0 3.Ionic Grid (ion-grid)

Lecture 0 4.Grid Column (ion-col) Sizes & Responsiveness

Lecture 0 5.Grid Row & Column Alignments

Lecture 0 6.ion-grid vs ion-list

Lecture 0 7.ion-item, ion-label & ion-text

Lecture 0 Media Items (Image Elements) & Swipable List Items

Lecture 0 Understanding Virtual Scrolling

Lecture 0 Implementing Virtual Scrolling (ion-virtual-scroll)

Lecture 0 Implementing Infinite Scrolling (ion-infinite-scroll)

Lecture 0 Segmented Buttons

Lecture 0 Adding a Spinner (ion-spinner)

Lecture 0 Using the Loading Controller

Lecture 0 Using the ActionSheet Controller

Lecture 0 16.ion-refresher

Lecture 0 ion-slides (deprecated)

Lecture 0 ion-popover

Lecture 0 Module Introduction

Lecture 0 Adding PWA Elements

Lecture 0 Implementing PWA Elements for Camera and Toast

Section 9: Getting Started with Food Delivery App

Lecture 0 Module Introduction

Lecture 0 Creating a Blank Project for Food Delivery App

Lecture 0 Setting up Tabs Layout & apply Theming in a Blank Project

Lecture 0 4.Designing App Landing Screen (Home Page)

Lecture 0 5.Refractor Code for Home Screen (with shared components & skeleton loading)

Lecture 0 6.Designing Search Screen

Lecture 0 7.Refractoring Code for Search Screen (also Creating Empty-Screen Component)

Lecture 0 Design Restaurant Menu Screen (Items Page)

Lecture 0 Add Items To Cart

Lecture 0 Refractor Code for Items Page

Lecture 0 Design Cart Screen

Lecture 0 Making Cart Functional

Lecture 0 Refractor Code for Cart Screen

Lecture 0 Design Account Screen

Lecture 0 Refractor Code for Account Screen

Lecture 0 Designing All Addresses Screen

Lecture 0 Refractor Code for Address Screen

Lecture 32 Attached Source Code

Section 10: State Management

Lecture 0 Module Introduction

Lecture 0 Using Common Services

Lecture 0 Using RxJS Subjects & Subscriptions for State Management

Lecture 0 Using Service for Cart & Storage

Lecture 0 Reorder Functionality

Lecture 33 Attached Source Code

Section 11: Structuring data using Models

Lecture 0 Module Introduction

Lecture 0 Address Model

Lecture 0 Restaurant Model

Lecture 0 Category Model

Lecture 0 Item Model

Lecture 0 Cart Model

Lecture 0 Order Model

Lecture 34 Attached Source Code

Section 12: Working with Google Maps

Lecture 0 Module Introduction

Lecture 0 API Setup & Integration in App

Lecture 0 Design Add Address Screen

Lecture 0 Adding the Google Maps SDK

Lecture 0 Adding Marker & Integrating Native Capacitor Geolocation

Lecture 0 Using Geocoding API & adding Address

Lecture 0 Update Address

Lecture 0 Refractor Code

Lecture 35 Attached Source Code

Section 13: Implementing Modals

Lecture 0 Module Introduction

Lecture 0 Opening a Modal

Lecture 0 Search location modal using Places API

Lecture 0 How to Search Places from different Country or whole World

Lecture 0 Updating Marker position

Lecture 0 Bug fixes

Lecture 0 Change Marker using Geolocation

Lecture 0 Integrating Modal in Cart Page

Lecture 0 Integrating Modal in Home Page

Lecture 0 Fixing Bugs in Search-location Modal

Lecture 0 Using Modal for Editing Profile

Lecture 0 Finishing Touches

Lecture 36 Attached Source Code

Section 14: 16.Introduction to Nodejs, expressjs & mongoDB

Lecture 0 Module Introduction

Lecture 0 What is Nodejs

Lecture 0 Nodejs Architecture

Lecture 0 How Node Works

Lecture 37 What is Expressjs

Lecture 0 What is MongoDB

Lecture 0 Install Nodejs & MongoDB

Lecture 0 Understanding different request types in a server

Section 15: Setup Nodejs project & deep dive into its basics

Lecture 0 Module Introduction

Lecture 0 Creating new Nodejs Project & Setting it up (for Typescript)

Lecture 0 Understanding Routing Basics

Lecture 0 Understanding Middleware Basics

Lecture 0 Connecting to MongoDB

Lecture 0 Handling Environment Variables

Lecture 0 Structuring Nodejs Project

Lecture 0 Error Handling

Lecture 0 Accessing Request Variables

Lecture 0 Basics of Schema (Models)

Lecture 0 Implementing Request Validation & Overview of Http Error Status Code

Lecture 38 Attached Source Code

Section 16: User Authentication with Nodejs

Lecture 0 Module introduction

Lecture 0 Design Sign-in Screen

Lecture 0 Create Auth Service

Lecture 0 Design Sign-up Screen

Lecture 0 Create Forgot Password Screen

Lecture 0 Creating a User & understand CORS with Solution

Lecture 0 Refractor code

Lecture 0 Preparing for User Email Verification

Lecture 0 Send Verification Email using SendGrid & Gmail and Check for Unique Email A/c

Lecture 0 Resend Verification Email

Lecture 0 Encrypting password using bcrypt

Lecture 0 Design Email Verification (OTP) Screen

Lecture 0 What is JWT & how it works

Lecture 0 Implementing JWT for User Authentication

Lecture 0 Store Token & Setup Http Token Interceptor in Ionic App

Lecture 0 Setup Auth Middleware for Backend APIs

Lecture 0 Adding an Auth Guard in Ionic App

Lecture 0 Connecting OTP Screen with Backend APIs

Lecture 0 Design Reset password in Ionic App

Lecture 0 Creating Backend APIs & Connecting with Reset Password functionality in Frontend

Lecture 0 Optimising Code

Lecture 0 Logging out a User in Ionic App

Lecture 0 Fetch & Update Profile in Account page

Lecture 0 Using OTP Screen also as Component everywhere - Part 1

Lecture 0 Using OTP Screen also as Component everywhere - Part 2

Lecture 39 Attached Source Code

Section 17: Working with Admin Panel in same Ionic app for Live Data Seeding using Nodejs

Lecture 0 Module Introduction

Lecture 0 Setup Admin Panel with Role based Auth Routing

Lecture 0 Protecting OTP Screen Route and fixing some minor bugs

Lecture 0 Upload Banner Images and Display in App

Lecture 0 Refractor code

Lecture 0 Insert Cities in Mongodb Database

Lecture 0 Design Add Restaurant Screen

Lecture 0 Inserting Restaurant, Category documents in MongoDB using Nodejs - Part 1

Lecture 0 Inserting Restaurant, Category documents in MongoDB using Nodejs - Part 2

Lecture 0 Fetch Neaby Restaurants in Home & Search Screen using Geospatial Queries - Part1

Lecture 0 Fetch Neaby Restaurants in Home & Search Screen using Geospatial Queries - Part2

Lecture 0 Add Restaurant Menu Items (also learning mongodb populate & projection) - Part 1

Lecture 0 Add Restaurant Menu Items (also learning mongodb populate & projection) - Part 2

Lecture 0 Fetch Restaurant Menu Items (also optimise few designs)

Lecture 0 Perform CRUD Operations for User Addresses

Lecture 0 Fix Bugs in Cart, place order & fetch user orders

Lecture 40 Attached Source Code

Section 18: Implementing few Optimizations in Our App

Lecture 0 Module Introduction

Lecture 0 Using Auto-Login Guard in Ionic App

Lecture 0 Using ENUM in our Ionic app

Lecture 0 4. Confirm Alert message for Logout

Lecture 0 Optimise Login, Signup error message design & change dotstyle in Cart Screen

Lecture 0 Fix location model bug in Home page & optimise edit address code

Lecture 0 Converting Cart Model into an Interface

Lecture 0 Refractoring all Services

Lecture 0 Fix Cart Service check distance bug & refractor Cart page code

Lecture 0 Fixing Menu Screen items auto-scrolling bug

Lecture 0 Optimising Login & Signup Screen Designs

Lecture 0 Create City Interface & Optimising Add Restaurant Screen Design

Lecture 0 Converting Modals in Cart, Account & Edit-Address Screens into Sheet Modal

Lecture 0 Make Banner Clickable in Ionic App

Lecture 0 Implementing Dotenv file in our Nodejs App

Lecture 41 Attached Source Code

Section 19: Adding Pagination feature in Ionic App using Nodejs

Lecture 0 Module Introduction

Lecture 0 Implementing Pagination in Address Screen

Lecture 0 Implementing Pagination in Orders list in Account Screen

Lecture 0 Pagination in Restaurants list in Home & Search Screen

Lecture 42 Attached Source Code

Section 20: Implementing Refresh Token for Strong JWT Authentication

Lecture 0 Module Introduction

Lecture 0 Creating Refresh Token & Sending in Ionic App, also generate random secret keys

Lecture 0 Auto-generate new Access & Refresh Tokens when Access token expires

Lecture 43 Attached Source Code

Section 21: Blacklisting Refresh Tokens using Redis & applying few optimisations

Lecture 0 Module Introduction

Lecture 0 Understanding why blacklist RefreshTokens needed & Setting up Redis in MacOS

Lecture 0 Setting up Redis in Windows

Lecture 0 Setup Redis with Nodejs & Connect it with Local Server in your System

Lecture 0 Connecting to Redis Enterprise (Server) for free with Nodejs

Lecture 0 Optimise UserController in Nodejs to send only required User fields in frontend

Lecture 0 Blacklist RefreshToken in Nodejs using Redis & Optimise Token Interceptor

Lecture 0 Clear User Refresh Token from Redis database on Logout

Lecture 0 Brief on how to manage RefreshToken in Redis if same account in multiple device

Lecture 44 Attached Source Code

Section 22: Integrate COD & RAZORPAY Payment Options and test in Android & iOS

Lecture 0 Module Introduction

Lecture 0 Design Payment Option Screen & Prepare for Ordering

Lecture 0 Place Order via COD

Lecture 0 Fixing Current Date Timezone & Port Number issue in Nodejs

Lecture 0 Fixing Address Change Detection in Cart

Lecture 0 Add Android & iOS platforms with permissions & Integrate RAZORPAY in test mode

Lecture 0 Integrate Razorpay payment gateway in Live Mode

Lecture 0 Test App in Android & iOS using LiveReload

Lecture 45 Attached Source Code

Section 23: Fixing error messages for no records available in Nodejs

Lecture 0 Module Introduction

Lecture 0 Optimising Restaurant Controller for no records found

Lecture 0 Optimising OrderController for no records found

Lecture 0 Optimising AddressController for no records found

Lecture 46 Attached Source Code

Section 24: Indexing in MongoDB

Lecture 0 Module Introduction

Lecture 0 What is MongoDB Indexing

Lecture 0 Understanding types of Indexing & a brief about various operators

Lecture 0 Using geoNear(for distance), nearSphere & geoWithin in Restaurant controller w

Lecture 47 Attached Source Code

Section 25: Fix some Security Loopholes & optimise apps

Lecture 0 Module Introduction

Lecture 0 Applying Strict Role based Restrictions

Lecture 0 Restrict entry in Payment option page if email unverified

Lecture 0 Optimise catch() code

Lecture 0 Some final optimisation touches to our apps

Lecture 0 Implementing Edit Profile picture feature in App - Part 1

Lecture 0 Implementing Edit Profile picture feature in App - Part 2

Lecture 48 Attached Source Code

Section 26: Deploy Nodejs App for production to Heroku

Lecture 0 Module Introduction

Lecture 0 Horizontal vs Vertical Scaling

Lecture 0 Understanding MongoDB Replication

Lecture 0 Deploying Nodejs App to Heroku

Lecture 0 Checking Files in Heroku & Understanding about Heroku filesystem problem

Lecture 0 How to do Load Testing?

Lecture 49 Attached Source Code

Section 27: Preparing Ionic App for Production

Lecture 0 Module Introduction

Lecture 0 Customise StatusBar & install SplashScreen plugin in Ionic App

Lecture 0 Preparing Android App Configurations & Understanding Hardware BackButton

Lecture 0 Preparing iOS App Configurations

Lecture 0 Generate Custom Icons & SplashScreens for Android & iOS

Lecture 0 Preparing environment.prod.ts file

Lecture 50 Attached Source Code

Section 28: Publishing Ionic App to Play Store & App Store

Lecture 0 Module Introduction

Lecture 0 Publishing iOS App on App Store

Lecture 0 Publishing Android App on Play Store

Lecture 0 Useful Links & Tips

Lecture 51 Attached Source Code

This course is for everyone (whether beginner or already a Developer) who wants to become an Advanced-level full stack Developer with popular technologies like Ionic Angular & Nodejs.,This course is for everyone interested in diving into the development of native mobile apps for iOS and Android using one codebase.,This course is also for everyone interested in learning Nodejs as Backend and become a full stack developer.,It is useful for Web developers as well as App developers.,Anyone with little knowledge of HTML, CSS, JS can easily enrol in this course but that's not mandatory.