Ionic 7+ & Nodejs: Beginner To Pro-Build Food Delivery App
Last updated 7/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 73.77 GB | Duration: 83h 36m

Build Food Delivery App & many more with Ionic 7+ Angular, Capacitor 5 & 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

Learn to Send Mails using SendGrid

Integrate Payment Gateways like Razorpay & STRIPE

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

Upload Images to Cloudinary

Upgrade to Ionic 7 Modular & Standalone

Support Chat App using Web Sockets - Coming Soon

Requirements

One should be little familiar with modern web development: HTML, CSS, jаvascript

A brief understanding of Angular and Typescript would be beneficial, but not ultimately required.

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 / jаvascript. 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 3 How to get the Most out of this Course

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

Lecture 5 Join our Discord Community

Lecture 6 Learn more from my Youtube Channel

Section 2: Introduction to Ionic Framework

Lecture 7 Module Introduction

Lecture 8 What is Ionic?

Lecture 9 What is Angular?

Lecture 10 Understanding Ionic Ecosystem & How it Works

Lecture 11 Evolution of Ionic

Lecture 12 Ionic App - Compiled or Hybrid

Lecture 13 Capacitor vs Cordova

Section 3: Setting up the Environment

Lecture 14 Module Introduction

Lecture 15 Install Nodejs

Lecture 16 Creating your first project

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

Lecture 18 Important News

Lecture 19 Create & understand NgModule & Standalone Projects

Section 4: Building Native Apps with Capacitor

Lecture 20 Module Introduction

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

Lecture 22 How to fix Android Emulator Error (also fix JAVA_HOME issue) during Live reload

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

Lecture 24 Fix problems in M1 MacBook Pro (with cocoapods installation)

Section 5: Ionic Basics

Lecture 25 Module Introduction

Lecture 26 Ionic Starter Templates

Lecture 27 Ionic Routing & Navigations

Lecture 28 Ionic Navigation using NavController

Lecture 29 Ionic + Angular Page Lifecycle

Lecture 30 How to use Services in Ionic

Lecture 31 How to use Shared Components in Ionic

Lecture 32 Use of Promise async await try catch

Lecture 33 Spread Operators

Lecture 34 constructor vs ngOnInit

Lecture 35 Model vs Interface

Section 6: Working with HTTP Requests

Lecture 36 Module Introduction

Lecture 37 What is REST API

Lecture 38 Fetch all Data & Display in App

Lecture 39 Fetch Single Data & Display in App

Lecture 40 How to use HTTP POST, PUT Methods

Lecture 41 How to Deal with CORS Issue

Section 7: Debugging Ionic Apps

Lecture 42 Module Introduction

Lecture 43 Debugging Ionic App using console.log()

Lecture 44 Debugging using Browser DevTools & Breakpoints

Lecture 45 Debugging the App UI & Performance

Lecture 46 Debugging Android Apps in Real Device or Emulator

Lecture 47 Debugging IOS Apps in Real Device or Simulator

Section 8: Styling & Theming Ionic Apps

Lecture 48 Module Introduction

Lecture 49 Starting with CSS Utilities

Lecture 50 Setting Global Theme Variables

Lecture 51 Setting all Theme Colors at once

Lecture 52 Creating a New Theme Color

Lecture 53 Setting Global Styles

Lecture 54 Setting Platform-Specific Styles

Lecture 55 Styling Core Components with Variables

Lecture 56 Component-Specific CSS Variables & Custom Rules

Lecture 57 Using Dark Mode

Section 9: Using Some Native Device Features

Lecture 58 Module Introduction

Lecture 59 Network & Toast

Lecture 60 Share

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

Lecture 62 Resolve image display issue using webPath

Lecture 63 Contacts - access phone contacts

Lecture 64 Call Number & Test on iOS

Lecture 65 Local Notifications

Lecture 66 Attached Source Code

Section 10: Ionic Components Overview

Lecture 67 Module Introduction

Lecture 68 Attributes, Property & Slots

Lecture 69 Ionic Grid (ion-grid)

Lecture 70 Grid Column (ion-col) Sizes & Responsiveness

Lecture 71 Grid Row & Column Alignments

Lecture 72 ion-grid vs ion-list

Lecture 73 ion-item, ion-label & ion-text

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

Lecture 75 Understanding Virtual Scrolling

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

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

Lecture 78 Segmented Buttons

Lecture 79 Adding a Spinner (ion-spinner)

Lecture 80 Using the Loading Controller

Lecture 81 Using the ActionSheet Controller

Lecture 82 ion-refresher

Lecture 83 ion-slides (deprecated)

Lecture 84 ion-popover

Lecture 85 Attached Source Code

Section 11: Integrating PWA Elements

Lecture 86 Module Introduction

Lecture 87 Adding PWA Elements

Lecture 88 Implementing PWA Elements for Camera and Toast

Lecture 89 Attached Source Code

Section 12: Inline Components

Lecture 90 Module Introduction

Lecture 91 ion-actionsheet

Lecture 92 ion-accordion

Lecture 93 ion-alert

Lecture 94 ion-breadcrumbs

Lecture 95 ion-popover

Lecture 96 ion-loading

Lecture 97 What's new in ion-input, textarea, select

Lecture 98 ion-modal

Lecture 99 ion-toast

Lecture 100 Some explanation and tips

Lecture 101 Attached Source Code

Section 13: Getting Started with Food Delivery App

Lecture 102 Module Introduction

Lecture 103 Creating a Blank Project for Food Delivery App

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

Lecture 105 Design Banners using Swiperjs (Landing Screen)

Lecture 106 Designing App Landing Screen (Home Page)

Lecture 107 Remove unnecessary css if found

Lecture 108 Refractor Code for Home Screen (with shared components & skeleton loading)

Lecture 109 Designing Search Screen

Lecture 110 Refractoring Code for Search Screen (also Creating Empty-Screen Component)

Lecture 111 Design Restaurant Menu Screen (Items Page)

Lecture 112 Add Items To Cart

Lecture 113 Refractor Code for Items Page

Lecture 114 Design Cart Screen

Lecture 115 Making Cart Functional

Lecture 116 Refractor Code for Cart Screen

Lecture 117 Design Account Screen

Lecture 118 Refractor Code for Account Screen

Lecture 119 Designing All Addresses Screen

Lecture 120 Refractor Code for Address Screen

Lecture 121 Attached Source Code

Section 14: State Management

Lecture 122 Module Introduction

Lecture 123 Using Common Services

Lecture 124 Using RxJS Subjects & Subscriptions for State Management

Lecture 125 Using Service for Cart & Storage

Lecture 126 Reorder Functionality

Lecture 127 Attached Source Code

Section 15: Structuring data using Models

Lecture 128 Module Introduction

Lecture 129 Address Model

Lecture 130 Restaurant Model

Lecture 131 Category Model

Lecture 132 Item Model

Lecture 133 Cart Model

Lecture 134 Order Model

Lecture 135 Attached Source Code

Section 16: Working with Google Maps

Lecture 136 Module Introduction

Lecture 137 API Setup & Integration in App

Lecture 138 Design Add Address Screen

Lecture 139 Adding the Google Maps SDK

Lecture 140 Adding Marker & Integrating Native Capacitor Geolocation

Lecture 141 Using Geocoding API & adding Address

Lecture 142 Update Address

Lecture 143 Refractor Code

Lecture 144 Attached Source Code

Section 17: Implementing Modals

Lecture 145 Module Introduction

Lecture 146 Opening a Modal

Lecture 147 Search location modal using Places API

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

Lecture 149 Updating Marker position

Lecture 150 Bug fixes

Lecture 151 Change Marker using Geolocation

Lecture 152 Integrating Modal in Cart Page

Lecture 153 Integrating Modal in Home Page

Lecture 154 Fixing Bugs in Search-location Modal

Lecture 155 Using Modal for Editing Profile

Lecture 156 Finishing Touches

Lecture 157 Attached Source Code

Section 18: Introduction to Nodejs, expressjs & mongoDB

Lecture 158 Module Introduction

Lecture 159 What is Nodejs

Lecture 160 Nodejs Architecture

Lecture 161 How Node Works

Lecture 162 What is Expressjs

Lecture 163 What is MongoDB

Lecture 164 Install Nodejs & MongoDB

Lecture 165 Understanding different request types in a server

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

Lecture 166 Module Introduction

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

Lecture 168 Understanding Routing Basics

Lecture 169 Understanding Middleware Basics

Lecture 170 Connecting to MongoDB

Lecture 171 Handling Environment Variables

Lecture 172 Structuring Nodejs Project

Lecture 173 Error Handling

Lecture 174 Accessing Request Variables

Lecture 175 Basics of Schema (Models)

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

Lecture 177 Attached Source Code

Section 20: User Authentication with Nodejs

Lecture 178 Module introduction

Lecture 179 Design Sign-in Screen

Lecture 180 Create Auth Service

Lecture 181 Design Sign-up Screen

Lecture 182 Create Forgot Password Screen

Lecture 183 Creating a User & understand CORS with Solution

Lecture 184 Refractor code

Lecture 185 Preparing for User Email Verification

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

Lecture 187 Resend Verification Email

Lecture 188 Encrypting password using bcrypt

Lecture 189 Design Email Verification (OTP) Screen

Lecture 190 What is JWT & how it works

Lecture 191 Implementing JWT for User Authentication

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

Lecture 193 Setup Auth Middleware for Backend APIs

Lecture 194 Adding an Auth Guard in Ionic App

Lecture 195 Connecting OTP Screen with Backend APIs

Lecture 196 Design Reset password in Ionic App

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

Lecture 198 Optimising Code

Lecture 199 Logging out a User in Ionic App

Lecture 200 Fetch & Update Profile in Account page

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

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

Lecture 203 Attached Source Code

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

Lecture 204 Module Introduction

Lecture 205 Setup Admin Panel with Role based Auth Routing

Lecture 206 Protecting OTP Screen Route and fixing some minor bugs

Lecture 207 Upload Banner Images and Display in App

Lecture 208 Important News about Swiper JS

Lecture 209 Refractor code

Lecture 210 Insert Cities in Mongodb Database

Lecture 211 Design Add Restaurant Screen

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

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

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

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

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

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

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

Lecture 219 Perform CRUD Operations for User Addresses

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

Lecture 221 Attached Source Code

Section 22: Implementing few Optimizations in Our App

Lecture 222 Module Introduction

Lecture 223 Using Auto-Login Guard in Ionic App

Lecture 224 Using ENUM in our Ionic app

Lecture 225 Confirm Alert message for Logout

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

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

Lecture 228 Converting Cart Model into an Interface

Lecture 229 Refractoring all Services

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

Lecture 231 Fixing Menu Screen items auto-scrolling bug

Lecture 232 Optimising Login & Signup Screen Designs

Lecture 233 Create City Interface & Optimising Add Restaurant Screen Design

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

Lecture 235 Make Banner Clickable in Ionic App

Lecture 236 Implementing Dotenv file in our Nodejs App

Lecture 237 Attached Source Code

Section 23: Adding Pagination feature in Ionic App using Nodejs

Lecture 238 Module Introduction

Lecture 239 Implementing Pagination in Address Screen

Lecture 240 Implementing Pagination in Orders list in Account Screen

Lecture 241 Pagination in Restaurants list in Home & Search Screen

Lecture 242 Attached Source Code

Section 24: Implementing Refresh Token for Strong JWT Authentication

Lecture 243 Module Introduction

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

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

Lecture 246 Attached Source Code

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

Lecture 247 Module Introduction

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

Lecture 249 Setting up Redis in Windows

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

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

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

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

Lecture 254 Clear User Refresh Token from Redis database on Logout

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

Lecture 256 Attached Source Code

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

Lecture 257 Module Introduction

Lecture 258 Design Payment Option Screen & Prepare for Ordering

Lecture 259 Place Order via COD

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

Lecture 261 Fixing Address Change Detection in Cart

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

Lecture 263 Integrate Razorpay payment gateway in Live Mode

Lecture 264 Test App in Android & iOS using LiveReload

Lecture 265 Attached Source Code

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

Lecture 266 Module Introduction

Lecture 267 Optimising Restaurant Controller for no records found

Lecture 268 Optimising OrderController for no records found

Lecture 269 Optimising AddressController for no records found

Lecture 270 Attached Source Code

Section 28: Indexing in MongoDB

Lecture 271 Module Introduction

Lecture 272 What is MongoDB Indexing

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

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

Lecture 275 Attached Source Code

Section 29: Fix some Security Loopholes & optimise apps

Lecture 276 Module Introduction

Lecture 277 Applying Strict Role based Restrictions

Lecture 278 Restrict entry in Payment option page if email unverified

Lecture 279 Optimise catch() code

Lecture 280 Some final optimisation touches to our apps

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

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

Lecture 283 Attached Source Code

Section 30: Deploy Nodejs App for production to Heroku

Lecture 284 Module Introduction

Lecture 285 Horizontal vs Vertical Scaling

Lecture 286 Understanding MongoDB Replication

Lecture 287 Deploying Nodejs App to Heroku

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

Lecture 289 How to do Load Testing?

Lecture 290 Attached Source Code

Section 31: Preparing Ionic App for Production

Lecture 291 Module Introduction

Lecture 292 Customise StatusBar & install SplashScreen plugin in Ionic App

Lecture 293 Preparing Android App Configurations & Understanding Hardware BackButton

Lecture 294 Preparing iOS App Configurations

Lecture 295 Generate Custom Icons & SplashScreens for Android & iOS

Lecture 296 Preparing environment.prod.ts file

Lecture 297 Attached Source Code

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

Lecture 298 Module Introduction

Lecture 299 Publishing iOS App on App Store

Lecture 300 Publishing Android App on Play Store

Lecture 301 Useful Links & Tips

Lecture 302 Attached Source Code

Section 33: Upload Images in Cloudinary using Nodejs & learn to exclude REDIS

Lecture 303 Module Introduction

Lecture 304 Setup & Integrate Cloudinary API in NodeJS

Lecture 305 Testing File Upload in Cloudinary using NodeJS

Lecture 306 Shifting Banner Images to Cloudinary & Modify Add Banner

Lecture 307 Shifting Restaurant Images to Cloudinary & Modify Add Restaurant

Lecture 308 Shifting Menu Images to Cloudinary & Modify Add Menu

Lecture 309 Upload Profile Image to Cloudinary & learn to exclude Redis from NodeJS

Lecture 310 Attached Source Code

Section 34: Integrate Stripe Payment Gateway & Optimise App with latest RxJS changes

Lecture 311 Module Introduction

Lecture 312 Optimise Ionic App with new RxJS changes

Lecture 313 Integrate STRIPE API

Lecture 314 Install Stripe Plugin & prepare functionality in Ionic App

Lecture 315 Prepare Nodejs App with Stripe plugin

Lecture 316 Test Stripe in Android & iOS (Test & Live Mode)

Lecture 317 Attached Source Code

Section 35: Converting to Ionic Standalone (from NgModule)

Lecture 318 Module Introduction

Lecture 319 What's new in Ionic

Lecture 320 Creating Ionic 7 Project & Understanding File Structure

Lecture 321 Upgrade Ionic 6 project to Ionic 7 (Modular Approach like Ionic 6)

Lecture 322 Convert to Ionic Standalone Approach

Lecture 323 Replace HttpClientModule with provideHttpClient() - with interceptors

Lecture 324 Update Ionic Components with latest features

Lecture 325 Attached Source Code

Section 36: Push Notifications

Lecture 326 Implementing Push Notifications using Firebase

Lecture 327 Implementing Push Notifications using OneSignal

Section 37: Bonus videos

Lecture 328 Ionic Angular - Profile screen UI (universal)

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.