Ionic 7+ & Nodejs Beginner To Pro–Build Food Delivery App

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.
Homepage

https://www.udemy.com/course/ionic-6-with-nodejs-the-complete-beginner-to-pro-course/