ebook

Built with Ionic

Learn to build amazing Ionic UI experiences through real world examples.

Build with confidenceBuilding Ionic apps is easy - building a unique UI isn’t.

"All Ionic apps look the same" - a popular complaint, and you’ve probably had your own share of struggles with Ionic components and how to customize them for your own needs in the past.

But just because Ionic components come with a certain styling out of the box, it doesn’t mean it’s the only way to use them!

In Built with Ionic I’ll show you what’s possible with Ionic by replicating some of the worlds best app interfaces:

  • Netflix
  • WhatsApp
  • Deliveroo

We will not only focus on the page architecture and overall app composition, but really dive into the details about small micro animations and gestures we all take for granted in these native apps.

Design & Build anything that you want

To build a unique interface we’ll have to write quite a bit of CSS, learn to use flex box and customize Ionic components with CSS variables and shadow parts.

Why do you sometimes have to use CSS to style content as opposed to just the --color variable?

To achieve all of this we start with a refresher on CSS basics and a detailed description of how to style every piece of Ionic components.

Through our app examples you’ll learn how to apply gestures and Ionic animations, or combine them to build powerful features.

Dark Mode & Responsive

Besides our real world examples you will also learn to build a responsive shop with Ionic that looks great on mobile devices and as a traditional website.

Having problems with dark mode?

You'll learn to create a dark mode switch, create your own dark theme and even completely re-brand a white label app with Ionic.

You decide

You can follow Built with Ionic from start to end or just pick the app chapters you are most interested in - all four apps are unique and start, as always in my tutorials, with a blank Ionic application.

High quality PDF, ePub and mobi book version.

After going through the examples you will be able to build your own unique app interfaces and spice them up with advanced animations and gestures - you’ll become a master of the Ionic UI.

You’ll be surprised what’s possible in apps Built with Ionic 🔥

Note: This eBook is using Angular - React and Vue might follow in the future. All projects come with dummy JSON data and no real backend, which would be nearly impossible to recreate for these apps!

What's inside?

Take a look at the different apps & real world examples that you will build along the book.

Pizza Shop

Build a fully responsive UI within this dummy pizza shop app. Understand how to theme your Ionic application for light and dark or completely re-theme a white label application. Use accordions & dropdowns to embrace the underlying platform patterns.

Responsive

Learn to use the Ionic Grid, customize for different breakpoints and apply media queries for a completely responsive UI.

Theming

Understand how to build a dark mode including user toggle and theme your application in no time for different brands.

Netflix

Replicate one of the most popular entertainment apps including introduction with beautiful swipe transitions, login and inside pages. We'll make sure our app looks and feels like the real app, and put a lot of love into styling the various internal pages.

Swiper

Implement Swiper and build powerful page transitions that you never thought were possible.

Modal

Create a stylish modal and build a powerful enter and leave transition.

Styling

Use CSS variables and parts to customize Ionic components or build flex layouts - you'll learn a ton about styling in this app.

WhatsApp

Rebuild one of the most used apps of all time with Ionic and create stunning gestures and animations to flash your users.

Camera Preview

Learn to use the native Camera preview with Capacitor and build a custom overlay just like inside the official app.

Gestures & Animations

Learn to combine gestures with animations to build features like a swipe to reply with native keyboard transition.

Custom Component

Learn to build a custom component with powerful gestures and styling including event handling,

Deliveroo

Food ordering apps are all across the app store and differ from country to country, but the universal principle stays the same: Get a beautiful representation of restaurants, their food and a checkout process!

Directives

Learn to add directives to create stunning header effects with fading or sticky elements or a smooth parallax scroll.

Filtering

Learn to filter you list data with segments or modals and use skeleton views to improve your perceived performance.

Modals & Popover

Learn to use different modal versions like the Ionic 6 bottom sheet and customize every part of your overlays.

Get more

The Premium Package

The basic package of Built with Ionic contains the eBook and source code of all 4 apps, but you can get even more value with the premium package:

  • On top of the examples in the book you'll receive an additional 14 minute video guide about building a Tinder like swipe gesture including source code of the project.
  • Additionally you get one complete Ionic app template which is a rebuild of the Twitter application including a side menu and styled feed!
  • If you are not yet part of the Ionic Academy, you can use a $10 discount on the first month of your membership!

You will receive all assets after your purchase including all future updates for free.

Get the most

The Ultimate Package

The package for those who want to build outstanding apps and learn from the best.

  • You will receive two additional app templates: A basic Spotify clone and a simple Gmail clone including gestures and directives!
  • Learn to replicate part of the AirBnB app with a full blown 2 hour video course.
  • Get a 26 minute video guide that shows how to implement a powerful swipe to delete gesture like in the Gmail app, including all code.
  • Receive a $30 discount when you sign up for the Kickoff Ionic bootstrapping tool.

Of course you get all goodies from the Basic and Premium package as well, including future updates for free.

Animations & Gestures

Built with Ionic in action

Make fields more engaging by using Ionic animations.

Make screens more exciting with small transitions.

Build powerful gestures for a real native like UI.

Everything you need

Feel more confident about every future Ionic app you want to build

Latest versions

All apps use at least Angular 12 and Ionic 6 so you benefit from performance improvements and new components.

Animations

Use the Ionic Animation API, Angular animations or CSS transitions - you'll learn all of them.

Gestures

Understand how to create and apply gestures to add powerful functionality to your apps that looks totally native.

Styling

With CSS variables, slots, parts or pseudo selectors you'll be able to customize Ionic components exactly to your needs.

Directives

If it's static, it's boring! Change your header or parts of your content with powerful directives.

Custom Components

Create and style custom components and include them with event handling to reuse your code.

Custom Overlays

You'll work with modals and popovers, and we won't accept the default styling.

App Templates

Reuse the code and snippets of all 4 apps in Built with Ionic for your own projects!

Pricing

Pick your book package

Get only the book or additional guides, courses and app templates with the Premium and Ultimate package.

Basic

$ 49
  • eBook in 3 formats (PDF ~400 pages, epub, mobi)

  • Source code (Ionic Angular) from all 4 app examples of the book

  • All future updates for free

Most popular

Ultimate

$ 129
  • Everything from Premium

  • Video Course AirBnB Design (2 hours of video + code, $50 value)

  • Video Guide Gmail Swipe Gesture (26 min video + code)

  • App Template Spotify UI

  • App Template Gmail UI

  • $30 Kickoff Ionic discount

Premium

$ 89
  • Everything from Basic

  • Video Guide Tinder Swipe Gesture (14 min video + code)

  • App Template Twitter UI

  • $10 Ionic Academy discount

14 day refund guarantee if you are unhappy with your purchase.

About the author

Worked with Ionic since v1 through all the ups and downs. Created books, video courses and a dedicated online school for Ionic developer.

  • Simon Grimm

    Ionic Insider & Course instructor

    Hey I'm Simon, perhaps you've seen me on YouTube, my main blog Devdactic or inside my Ionic Academy before.

    After years of creating tutorials around every possible Ionic feature, one of the main problems I see remains:
    Building epic interfaces.

    To show that only the sky is the limit with Ionic, I'm covering the best interfaces from apps you already know in one book, all #builtwithionic 🎉

Want a preview chapter?

Enter your best email and get a free preview!

Frequently asked questions

Is there a React or Vue version available?
No, this book only uses Angular and was not created for React or Vue.
If I buy a lower package, can I upgrade later?
Yes. You pay the difference from what you paid for the lower package to the price of the Premium or Ultimate package at the time you upgrade. Just contact me and I'll create an according discount for you.
Is this a physical book?
At the moment Built with Ionic is only available as eBook in PDF, mobi and epub format.
Can I use the templates for my own apps?
Yes, 100%! You can use all code from the apps like it is your own, only the assets captured from native applications like Netflix are under the copyright of the according company.
Can I contact you when I am stuck?
Of course! Feel free to ping me on Twitter at any time.
What if I don't like the book?
If you are unhappy about your purchase, you can get back your money within the first 14 days.

Become a master of Ionic UIs & components.

Learn through step by step examples of the worlds most popular apps how to built truly awesome Ionic interfaces.

Get the book