Best Ionic Template — Build an outstanding Ionic Framework 5 App

Dayana Jabif
Learn Ionic Framework
8 min readJul 14, 2019

At IonicThemes we strongly believe in the power of templates. Our templates are designed as modular starter apps to help you build your own app. They can be easily customized to create a unique Ionic app in record time, allowing you to focus on the uniqueness of your app and avoiding to be bogged down with time consuming repetitive coding.

“IonicThemes helps you get a real app up and running fast by handling all the boilerplate and design that normally takes weeks. Any Ionic developer should consider getting one and getting to work that much more quickly!“

Max Lynch — CEO at Ionic Framework

We strive to create the best Ionic templates in the market, both in terms of code and design. We dedicate hundreds of design and development hours creating and testing them.

Thousands of developers have used our templates with different purposes. Some of them are:

  • To improve their Ionic skills
  • To learn Ionic Framework by example (by seeing how we solved common problems)
  • To save time and be able to meet the deadline
  • To get beautifully designed screens
  • To get ready-made ionic features and components

Our latest and most complete Ionic 5 Template is Ionic 5 Full Starter App and recently we released the PRO version, with more screens and functionalities.

Ionic 5 Full Starter App — BASIC version

This template is built to guide you in the development process, exposing difficult knowledge through practical examples. Created with performance and ease of development in mind, this Ionic starter app is something you will love. It includes all the components that you might need inside an ionic framework project and a detailed documentation on how to get started.

Try Ionic 5 Full Starter App

You can try how this Ionic App looks and feels in your device.

Save time with these ready-made Ionic features

All in with Ionic 5 and Angular 9

This Ionic Template includes lots of Ionic components coded the angular way and features that you will love.

100% Flexible and Customizable

The starter includes lots of pages, features and components but you are free to use just what you need and delete the code you don't. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables for the win

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Detailed documentation and Showcase

The template includes a super detailed documentation as well as an online showcase to help developers use the custom component the template offers.

PWA ready

Ionic Framework is a step forward for Progressive Web Apps, that's why we are building this new ionic template with 100% support for PWA. Learn more about PWA with Angular and Ionic.

You will be able to use this Ionic 5 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?

For a web app to be considered a PWA, it needs to comply with 10 principles. You can see how this Ionic Framework 5 app addresses each of them.

ionic template

App Shell

An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native apps.

The shell is the minimal CSS, HTML and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users.

The main goal of the app shell is to improve our app’s perceived performance.

We created a complete post explaining the benefits of using app shell in ionic apps.

We included the app shell pattern in this ionic template because we believe it is a step forward in terms of user experience. However, if you don’t want to use it, you are free to remove it from your app. We will explain how to do it in the template documentation.

ionic app shell

Forms and Validations

Forms are the pillar of many business applications. You can use forms to perform countless data-entry tasks such as: login, submit a request, place an order, book a flight or create an account.

The main purpose of forms is data collection so we need to provide a good experience so the user doesn’t get frustrated.

In this Ionic theme we included different types of form validations with Ionic and Angular such as: password and confirm password validation, international phone validation, email format validation and username validator. You will learn how to use Angular custom validators and how to use Angular Reactive Forms to create your own validators.

ionic forms and validations

Different types of Navigations

Navigation is one of the most important parts of an app. Solid navigation patterns help us achieve great user experience while a great router implementation will ease the development process and at the same time will make our apps discoverable and linkable.

As the new Ionic framework position itself as the best tool to build Progressive Web Apps, and the Discoverable and Linkable principles are fundamental to PWAs, it is clear why the new Ionic Navigation relies on the Angular Router.

The Angular Router is a solid, URL based navigation library that eases the development process dramatically and at the same time enables you to build complex navigation structures. In addition, the Angular Router is also capable of Lazy Loading modules, handle data through route with Route Resolvers, and handling Route Guards to fine tune access to certain parts of your app.

This Ionic 5 starter app template features many different examples of navigation within a mobile app such as: Tabs, Side Menu, Lazy Loading and Angular Resolvers.

Firebase Integration

Firebase is a popular tool that helps you build apps fast, without managing infrastructure and includes a powerful Database as a Service solution. We built a Firebase Integration for this Ionic Template that will show you how to build an advanced CRUD with Firestore as well as how to query your collections. It includes advanced examples with nested relations.

Also, we recently added Firebase Authentication with different providers such as facebook, twitter and google.

ionic firebase

Other Integrations

Sometimes our apps need more features that why we added the most required ones to this PRO version.

Translating your ionic app into your desired language and creating a fully multi language app is now possible with this version of the template.

Videos are very important in current apps that’s why we added a video playlist that you can use to play your own videos into an ionic app.

Also, we added a customizable Google Map and Geolocation using Capacitor Geolocation API.

ionic multi language, ionic maps and ionic video playlist

Ionic Capacitor

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.

It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them.

This Ionic 5 template is built using Capacitor and also shows how to use some of the APIs it provides.

Different Categories

We carefully designed and coded 5 different and complete categories: Travel, Food, Fashion, Deals and Real State.

Each category has a Listing view and a Details view. Each of these pages is different and has different and unique components that you can reuse within your Ionic framework app.

Some of the components you will find in this section are: Cards, Lists, Sliders, Maps, Tags, Text Blocks, Images, Grids, Progress Bar, Buttons, Custom Icons, Buttons, Modal, Alerts, Different types of layouts to display your data in a beautiful and organized way, Lots of beautiful App Shells and more!.

Travel Category
Fashion Category
Food Category
Deals Category
Real State Category

Some Testimonials

“The Ionic 5 starter app is exactly what I’ve been seeking.
The people at Ionic Themes team put together a rock-solid starter app including clean code and easy to understand documentation … not to mention unmatched customer support/communication.” —
Jeff — Lead Developer

“Being a solo developer, I wouldn’t have been able to deliver my client’s app on time without this template. With continuous updates and enhancements you are not wasting your money buying this template.” — Saud — Software Developer

“I am very happy with IonicThemes, specially with the customer service they provide and their quickness in resolving issues.
Will definitely purchase again in the future. Looking forward to new products”. —
Jas — Tech Guy

--

--

Dayana Jabif
Learn Ionic Framework

Driven by living a free & happy life. I create #angular & #ionic resources to help devs build better apps faster 🚀. Founder of @ionicthemes & @ng_templates