What you'll learnBuild 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
RequirementsOne 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.
Without programming experience also, you will learn all you need to know to work with full stack development
DescriptionBuilding 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! :)
OverviewSection 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 6+ vs Ionic 5 vs Ionic 4 vs Ionic 3
Lecture 13 Ionic App - Compiled or Hybrid
Lecture 14 Capacitor vs Cordova
Section 3: Setting up the Environment
Lecture 15 Module Introduction
Lecture 16 Install Nodejs
Lecture 17 Creating your first project
Lecture 18 Create & understand NgModule & Standalone Projects
Lecture 19 Important News
Lecture 20 Setup Visual Studio Code Editor & Understand Ionic Project Structure
Section 4: Building Native Apps with Capacitor
Lecture 21 Module Introduction
Lecture 22 Creating an Android App & Running in Emulator & Real Android Device
Lecture 23 How to fix Android Emulator Error (also fix JAVA_HOME issue) during Live reload
Lecture 24 Creating an iOS App & Running in Simulator & Real iOS Device
Lecture 25 Fix problems in M1 MacBook Pro (with cocoapods installation)
Section 5: Ionic Basics
Lecture 26 Module Introduction
Lecture 27 Ionic Starter Templates
Lecture 28 Ionic Routing & Navigations
Lecture 29 Ionic Navigation using NavController
Lecture 30 Ionic + Angular Page Lifecycle
Lecture 31 How to use Services in Ionic
Lecture 32 How to use Shared Components in Ionic
Lecture 33 Use of Promise async await try catch
Lecture 34 Spread Operators
Lecture 35 constructor vs ngOnInit
Lecture 36 Model vs Interface
Section 6: Working with HTTP Requests
Lecture 37 Module Introduction
Lecture 38 What is REST API
Lecture 39 Fetch all Data & Display in App
Lecture 40 Fetch Single Data & Display in App
Lecture 41 How to use HTTP POST, PUT Methods
Lecture 42 How to Deal with CORS Issue
Section 7: Debugging Ionic Apps
Lecture 43 Module Introduction
Lecture 44 Debugging Ionic App using console.log()
Lecture 45 Debugging using Browser DevTools & Breakpoints
Lecture 46 Debugging the App UI & Performance
Lecture 47 Debugging Android Apps in Real Device or Emulator
Lecture 48 Debugging IOS Apps in Real Device or Simulator
Section 8: Styling & Theming Ionic Apps
Lecture 49 Module Introduction
Lecture 50 Starting with CSS Utilities
Lecture 51 Setting Global Theme Variables
Lecture 52 Setting all Theme Colors at once
Lecture 53 Creating a New Theme Color
Lecture 54 Setting Global Styles
Lecture 55 Setting Platform-Specific Styles
Lecture 56 Styling Core Components with Variables
Lecture 57 Component-Specific CSS Variables & Custom Rules
Lecture 58 Using Dark Mode
Section 9: Using Some Native Device Features
Lecture 59 Module Introduction
Lecture 60 Network & Toast
Lecture 61 Share
Lecture 62 Camera - take picture, get from photos & share image via email
Lecture 63 Resolve image display issue using webPath
Lecture 64 Contacts - access phone contacts
Lecture 65 Call Number & Test on iOS
Lecture 66 Local Notifications
Lecture 67 Attached Source Code
Section 10: Ionic Components Overview
Lecture 68 Module Introduction
Lecture 69 2.Attributes, Property & Slots
Lecture 70 3.Ionic Grid (ion-grid)
Lecture 71 4.Grid Column (ion-col) Sizes & Responsiveness
Lecture 72 5.Grid Row & Column Alignments
Lecture 73 7.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 6.ion-grid vs ion-list
Lecture 80 Adding a Spinner (ion-spinner)
Lecture 81 Using the Loading Controller
Lecture 82 Using the ActionSheet Controller
Lecture 83 16.ion-refresher
Lecture 84 ion-slides (deprecated)
Lecture 85 ion-popover
Lecture 86 Attached Source Code
Section 11: Integrating PWA Elements
Lecture 87 Module Introduction
Lecture 88 Adding PWA Elements
Lecture 89 Implementing PWA Elements for Camera and Toast
Lecture 90 Attached Source Code
Section 12: Inline Components
Lecture 91 Module Introduction
Lecture 92 ion-actionsheet
Lecture 93 ion-accordion
Lecture 94 ion-alert
Lecture 95 ion-breadcrumbs
Lecture 96 ion-popover
Lecture 97 ion-loading
Lecture 98 What's new in ion-input, textarea, select
Lecture 99 ion-modal
Lecture 100 ion-toast
Lecture 101 Some explanation and tips
Lecture 102 Attached Source Code
Section 13: Getting Started with Food Delivery App
Lecture 103 Module Introduction
Lecture 104 Creating a Blank Project for Food Delivery App
Lecture 105 Setting up Tabs Layout & apply Theming in a Blank Project
Lecture 106 Design Banners using Swiperjs (Landing Screen)
Lecture 107 Designing App Landing Screen (Home Page)
Lecture 108 Remove unnecessary css if found
Lecture 109 Refractor Code for Home Screen (with shared components & skeleton loading)
Lecture 110 Designing Search Screen
Lecture 111 Refractoring Code for Search Screen (also Creating Empty-Screen Component)
Lecture 112 Design Restaurant Menu Screen (Items Page)
Lecture 113 Add Items To Cart
Lecture 114 Refractor Code for Items Page
Lecture 115 Design Cart Screen
Lecture 116 Making Cart Functional
Lecture 117 Refractor Code for Cart Screen
Lecture 118 Design Account Screen
Lecture 119 Refractor Code for Account Screen
Lecture 120 Designing All Addresses Screen
Lecture 121 Refractor Code for Address Screen
Lecture 122 Attached Source Code
Section 14: State Management
Lecture 123 Module Introduction
Lecture 124 Using Common Services
Lecture 125 Using RxJS Subjects & Subscriptions for State Management
Lecture 126 Using Service for Cart & Storage
Lecture 127 Reorder Functionality
Lecture 128 Attached Source Code
Section 15: Structuring data using Models
Lecture 129 Module Introduction
Lecture 130 Address Model
Lecture 131 Restaurant Model
Lecture 132 Category Model
Lecture 133 Item Model
Lecture 134 Cart Model
Lecture 135 Order Model
Lecture 136 Attached Source Code
Section 16: Working with Google Maps
Lecture 137 Module Introduction
Lecture 138 API Setup & Integration in App
Lecture 139 Design Add Address Screen
Lecture 140 Adding the Google Maps SDK
Lecture 141 Adding Marker & Integrating Native Capacitor Geolocation
Lecture 142 Using Geocoding API & adding Address
Lecture 143 Update Address
Lecture 144 Refractor Code
Lecture 145 Attached Source Code
Section 17: Implementing Modals
Lecture 146 Module Introduction
Lecture 147 Opening a Modal
Lecture 148 Search location modal using Places API
Lecture 149 How to Search Places from different Country or whole World
Lecture 150 Updating Marker position
Lecture 151 Bug fixes
Lecture 152 Change Marker using Geolocation
Lecture 153 Integrating Modal in Cart Page
Lecture 154 Integrating Modal in Home Page
Lecture 155 Fixing Bugs in Search-location Modal
Lecture 156 Using Modal for Editing Profile
Lecture 157 Finishing Touches
Lecture 158 Attached Source Code
Section 18: Introduction to Nodejs, expressjs & mongoDB
Lecture 159 Module Introduction
Lecture 160 What is Nodejs
Lecture 161 Nodejs Architecture
Lecture 162 How Node Works
Lecture 163 What is Expressjs
Lecture 164 What is MongoDB
Lecture 165 Install Nodejs & MongoDB
Lecture 166 Understanding different request types in a server
Section 19: Setup Nodejs project & deep dive into its basics
Lecture 167 Module Introduction
Lecture 168 Creating new Nodejs Project & Setting it up (for Typescript)
Lecture 169 Understanding Routing Basics
Lecture 170 Understanding Middleware Basics
Lecture 171 Connecting to MongoDB
Lecture 172 Handling Environment Variables
Lecture 173 Structuring Nodejs Project
Lecture 174 Error Handling
Lecture 175 Accessing Request Variables
Lecture 176 Basics of Schema (Models)
Lecture 177 Implementing Request Validation & Overview of Http Error Status Code
Lecture 178 Attached Source Code
Section 20: User Authentication with Nodejs
Lecture 179 Module introduction
Lecture 180 Design Sign-in Screen
Lecture 181 Create Auth Service
Lecture 182 Design Sign-up Screen
Lecture 183 Create Forgot Password Screen
Lecture 184 Creating a User & understand CORS with Solution
Lecture 185 Refractor code
Lecture 186 Preparing for User Email Verification
Lecture 187 Send Verification Email using SendGrid & Gmail and Check for Unique Email A/c
Lecture 188 Resend Verification Email
Lecture 189 Encrypting password using bcrypt
Lecture 190 Design Email Verification (OTP) Screen
Lecture 191 What is JWT & how it works
Lecture 192 Implementing JWT for User Authentication
Lecture 193 Store Token & Setup Http Token Interceptor in Ionic App
Lecture 194 Setup Auth Middleware for Backend APIs
Lecture 195 Adding an Auth Guard in Ionic App
Lecture 196 Connecting OTP Screen with Backend APIs
Lecture 197 Design Reset password in Ionic App
Lecture 198 Creating Backend APIs & Connecting with Reset Password functionality in Frontend
Lecture 199 Optimising Code
Lecture 200 Logging out a User in Ionic App
Lecture 201 Fetch & Update Profile in Account page
Lecture 202 Using OTP Screen also as Component everywhere - Part 1
Lecture 203 Using OTP Screen also as Component everywhere - Part 2
Lecture 204 Attached Source Code
Section 21: Working with Admin Panel in same Ionic app for Live Data Seeding using Nodejs
Lecture 205 Module Introduction
Lecture 206 Setup Admin Panel with Role based Auth Routing
Lecture 207 Protecting OTP Screen Route and fixing some minor bugs
Lecture 208 Upload Banner Images and Display in App
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 4. 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 7 Standalone (from NgModule)
Lecture 318 Module Introduction
Lecture 319 What's new in Ionic 7
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 Upgrade to Ionic 7 using 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 using Firebase
Lecture 326 Implementing Push Notificaitions in Android
Lecture 327 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.
Buy Premium Account From My Download Links & Get Fastest Speed.