It's difficult to implement best practices and connect functionality based on simple tutorials.
Learn to build a real world app using Ionic, Capacitor and Firebase with this practical, step-by-step guide.
Building a successful Ionic application depends on the combination of multiple technologies and skills. Tutorials alone won't help you solve these complex scenarios.
If you want to deliver value with a real application, you need to know the details about Ionic components, how to route and secure your app, how to implement features like social authentication or push notifications and how to build your unique app features based on all of this.
Use the full power of Ionic, tweak components with CSS variables and make everything run smooth with Angular.
Tap into native device functionalities while maintaining the ability to run on the web - get the best out of using Capacitor.
Create a powerful backend with user authentication, data and file storage and push notifications without any backend skills needed.
"I wanna thank you for everything you share. You gave me an opportunity to earn money for doing what I like most for almost 2 years now."
“Simon, there will be a statue of you built somewhere some day. Your videos are simply the best.”
“I found it just before I was going to throw my pc out of the window and leave behind this developer life and go to live in a forest!”
"I have greatly improved my knowledge and today I can develop more complex applications."
Integrate social providers like Google and Apple to provide OAuth sign up flow for your users convenience.
Learn to work with collections and documents from your Firestore database.
Create your own cloud functions running in Firebase to transform your database and react to triggers.
Make your app & backend secure by using guards and rules that protect private user data.
Implement file upload with Angular and store your documents in the cloud.
Send out automatic push notifications and implement the correct handling with Capacitor.
Implement advanced routing concepts used in real world applications.
Use RxJS to transform your data, add dynamic styling with Angular and work with custom components.
Add real search capabilities using Algolia in combination with Firebase functions.
Simon Grimm has been teaching Ionic tutorials over 5 years since version 1. He's now an Ionic Community Expert, teaching thousands of people through the Ionic Academy, writes on his blog Devdactic and built a YouTube channel with 30.000 subscribers.
With more than 50 video courses Simon knows about the nuts & bolts of using the Ionic Framework and all of its components.
Connect your app with Firebase and learn to work with complex connected data inside a real world app. We'll go far beyond hello world and create useful cards application with collaboration between users!
File upload, Capacitor usage, nested lists or modal navigation - we will integrate all the small but important components inside one app. Each step is covered in detail with code snippets and additional information you need for future apps.
We don't want to simply use Ionic components, we want to understand how to fine tune them and make them work for us! We'll go into details about different components, use CSS variables and inputs to build a beautiful app together.
Want to know all about the book?
We'll start with a blank app and integrate Firebase into our app. We craft a beautiful introduction screen, from which users can sign in or sign up. Additionally, we will use some cool modal navigation to make the flow feel natural!
If you add any social sign in to your app, Apple requires you to add the Sign-In with Apple as well. Therefore, we will not only include Google sign in but also Apple, and handle all of this with native Capacitor plugins to make the process as smooth as possible. And of course we'll go through the configuration of each of these step by step!
Since the app has a protected area, we need a powerful routing that gives enough flexibility for changes later, but also secures the routes from unauthorised access.
We want to upload documents, and the Storage of Firebase is the easiest way to host and show your files. All of this will be done using Capacitor, so we can even test out our app right inside the browser.
To retrieve specific data, you need advanced knowledge about RxJS. Just one collection of Firebase isn't always enough, so we will integrate powerful queries and learn about the benefits of reactive programming.
We want to use the full power of Firebase and add our own Cloud Functions, which will be used in combination with Algolia to create a search index that we can use right from our app for real full text search.
Did you know there's a drag and drop component in Ionic? Or did you know that you can zoom in and out of slides? We will dive into the usage of different Ionic components and get the most out of them!
The classic lesson, but for us it's not enough to simply add push notifications - we will even trigger the through cloud functions so users can get automatic notifications!
We have security concepts in our app, but the real security always happens on the backend side, which is Firebase in our case. With complex rules and data from multiple documents we are able to build out powerful rules to make sure all data of our app is protected.
We'll wrap up the book with native builds for both iOS and Android using the tooling of each platform, since this is exactly the philosophy of Capacitor. Finally we will make sure that we are able to upload our app to the app store by going through signing and bundle builds with the given tools.
I've got you covered with some epic additional material to speed up your development of real world applications.
You can select from 3 different packages: Essential, Advanced and Ultimate.
All higher packages contain the material from the previous package plus more!
With the advanced package you get an app template to show you the implementation of a roles authentication concept inside your Ionic app with Firebase. The package makes use of guards and a custom directive to show/hide certain elements of your app based on specific roles and permissions of a user - ready to use as the base for your next project.
The ultimate package comes with a full blown chat application template based on Firebase. Create users, create groups and chat with other users in real time using the Firestore database. You can even attach images inside the chat group using Capacitor (form a device and inside the browser!)
Feel free to use the whole code in your own apps!
Enjoy these bonus guides for in depth knowledge on related topics
Advanced & Ultimate
Did you know Firebase has blocks of code that you can easily add to your app? Learn to use extensions to save valuable time on default functions!
Learn to write your own cloud API by using callable functions of Firebase, a construct to create standard endpoints inside your app.
Advanced & Ultimate
If you want full control, you need to know how to build your own Capacitor plugin in case you need specifc device functionalities.
Speed up your local development by using a local emulator of Firebase with functions and database support to test things inside your own environment.
AppstoreKit Free Export
I've developed a tool to help you create beautiful app store preview images, and with the purchase of the advanced & ultimate package you can use it for free!
With the purchase of the Advanced package, you get 1 free export of your screenshot designs (value $10) from the AppstoreKit.
With the Ultimate package you receive 3 free exports of the AppstoreKit (value $30).
Kickoff Ionic Discount
Kickoff Ionic helps to bootstrap your whole Ionic app faster. Define data models, add powerful snippets or pre made designs for your app and kickstart your app development.
With the Ultimate package you receive a $30 discount on the annual Kickoff Ionic subscription!
Select from three packages to set you up for success.
All future updates included. 14 day refund policy.
Here you can find the most frequent asked questions.
No, not at the moment. You receive a package with a PDF, epub and MOBI version of the Practical Ionic book.
Yes, 100%! You can use all code from the apps like it is your own.
If you are unhappy about your purchase, you can get back your money within the first 14 days.
The book uses Ionic version 5.
No, this book only uses Angular and was not created for React or Vue.