Ionic 5 Full Starter App - PRO version



Ionic 5 Full Starter App is a collection of common features and use cases, UI screens and ionic components that you can use as a whole like a starter template or cherry pick the specific features and components you want to add to your existing Ionic project. Either way, it will enable you to jump right into feature development and save valuable time.

Built around modularity and following Ionic best practices, you can be confident and trust the quality of the code.

This template is built 100% with Angular to ensure no bloated dependencies.

Choose your version:

Choose between the different versions of this starter template. You can upgrade at any time and if they don't satisfy your needs, get your money back.

Basic

I’ve a particular set os skills

59 +100 screens & components

Includes:
  • Beautiful screens hand crafted by Professionals
  • Ionic 5 and Angular 9
  • PWA Ready
  • Services for Data Access
  • 100% Flexible and Customizable
  • Skeleton Screens / App Shell
  • Forms & Validations
  • Detailed Documentation
  • Features Showcase
  • Capacitor
  • Free updates
Show more

Pro

I've backend integrations and more features

69 +125 screens & components

All basic features plus:
  • Firebase Integration
  • Firebase Authentication
  • Facebook Sign In
  • Twitter Sign In
  • Google Sign In
  • Email/Password Sign In
  • Profile route guard
  • Firebase CRUD
  • AngularFire
  • Firebase advanced queries
  • Google Maps
  • Geolocation
  • Capacitor Plugins
  • Social Sharing
  • Multi Language
  • Video Playlist
Show more

PRO version

This app is the PRO version of Ionic 5 Full Starter App. If you are one of those who always goes for the best, you should consider getting the PRO version. It includes all the features from the BASIC version PLUS:

  • More screens!
  • Firebase Integration
  • [NEW] Firebase Authentication
  • Firestore Database with CRUD
  • Firebase Filters and data relations
  • Multi Language / Internationalization
  • Video Playlist
  • Ionic Capacitor
  • Capacitor Plugins
  • Google Maps
  • Geolocation
  • Social Sharing

We commit to constantly pursue greatness with our products, so you can focus on what really matters: meeting the deadline.

Money back guarantee. We are so confident that Ionic 5 Full Starter App will help you with your project, that we offer a full refund if it doesn't satisfy your needs.

Main Features and Pages

This complete Ionic Starter template includes a wide list of the components you might need when building your project.

Walkthrough

This component helps you demonstrate or explain your app to new users. It's the first thing your users see about your app, use it like a tutorial to showcase the value proposition and main features.

Getting Started

The aim of this section is to personalize the experience of the user within the app by asking some questions about their interests.

Authentication

We included a complete authentication flow in this Ionic 5 starter app, featuring Sign Up, Log In, Forgot Password, terms & conditions and privacy policy modals.

All authentication forms include extra UX features like input validations with error messages, and a nifty show-hide password component to enhance usability on mobile screens.

Social Authentication is implemented with Firebase. Check the Firebase Authentication documentation for more details

Categories

We hope this starter template helps you save time and money while working on your project.

In essence, most of the UI scenarios you can think of translate to listing views showcasing: products, offers, places, recipes, friends, hotels, real estate, etc.

That's why we included a wide variety ofListings and Detail views with different layouts, structures and components to display data in a beautiful and organized way while fitting many use cases.

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

Some of the components you will find in each category include:

  • Cards
  • Lists
  • Text skeleton placeholders
  • Image skeleton placeholders
  • Sliders
  • Custom Icons
  • Maps
  • Alerts
  • Modals
  • Tags
  • Grids
  • Progress Bars
  • Buttons

Travel listing and details view

Fashion listing and details view

Food listing and details view

Deals listing and details view

Real Estate listing and details view

You can try the live preview of this Ionic 5 template from your desktop or mobile device to see how it works.

Profile

Profile section includes two pages: User Details page and Friends List page.

Forms and Validations

Forms are the pillar of many business applications. You can use forms to perform countless data-entry tasks such as: register users, place an order, book a flight, etc.

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 5 theme we included different types of form validations with Ionic and Angular such as:

  • Password default and confirmation validations
  • International phone validation
  • Email format validation
  • Username validation

Besides these examples, we wrote extensively about how to use Angular custom validators and how to use Angular Reactive Forms to create your own validators.

Filters

Some applications need input controls to filter data. That's why we created a specific section with some of the most popular and required data filtering options.

In this section you will find various types of filters such as:

  • Ranges
  • Tags
  • Toggles
  • Various radio groups with different styles and layouts
  • Various checkboxes with different styles and layouts
  • Custom Ionic component to add and subtract numbers
  • Custom ionic component for rating
  • Custom ionic component to select a color

If you feel that there is an important filter that is missing just drop us a line.

App Shell

The main goal of the app shell is to improve our app's perceived performance. Learn how you can improve the UX of your Ionic app using Skeleton Loading Screens.

We included the app shell pattern in this ionic starter 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.

Different types of Navigations in Ionic

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.

Ionic navigation functionality using the Angular Router 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, handling 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 an Ionic app such as:

  • Tabs
  • Side Menu
  • Lazy Loading
  • Angular Route Resolvers
  • Angular Route Guards

Showcase

We added a Showcase section to guide developers on how to use all the custom components included in the template. By isolating the examples some concepts get easier to grasp.

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 starter app is built using Capacitor and also shows how to use some of the APIs it provides.

Not ready to use Capacitor? In the documentation we explain how to remove Capacitor and add Cordova into your project.

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 5 Starter App 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.

Firebase Authentication

Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. This integration supports authentication using email/password and social providers such as Google, Facebook and Twitter.

Other Integrations

The PRO version of Ionic 5 Full starter app includes some advanced integrations that enhance the extensive collection of screens and components with functionality intended to help you ship even faster.

Internationalization

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

Video Playlist

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.

Google Maps & Geolocation

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

You can try the live preview of this Ionic 5 template from your desktop or mobile device to see how it works.

Great Deal

On average we have dedicated over 2000 hours of coding, designing, researching, and fixing bugs while crafting every major feature your project may require. Time and experience packed in a ready to go solution.

Let's do some quick math: 2000 hours * U$S 60/h = U$S 120.000

You can save that much hours of developers and designers and still deliver a great product your client will love.

Is it for you?

Ionic 5 Full Starter App goes beyond the regular UI kit or template you can find elsewhere.

Think of it like a tool or swiss knife that will help you succeed in your project, whether you have a tight schedule or budget.

Leverage

Considering reinventing the wheel? Don't, you know it's gonna take much longer than you think.

Time is money! Start building your project leveraging countless hours of top designers and engineers spent crafting Ionic 5 Full Starter template. Multiple pages, components and features ready to fit diverse use cases and speed up your Ionic Framework project.

Versatility

This template is pure Ionic and Angular, no bloated JavaScript libraries or custom build tools.

You can either use it as a starter for your project or cherry pick some features, components or modules and merge them in your ongoing Ionic Angular project.

We are here to help you

Many programmers, both experts and beginners, buy templates from IonicThemes because they want to save valuable time instead.

There are many repetitive tasks that can be streamlined by using starter app templates.

When you buy a template you get all the source code and documentation needed to start building your Ionic App.


Testimonial

product review
The Ionic starter app is exactly what I've been seeking. After a few years away from mobile development I was finding the re-acclimation process to be very difficult. Also, I operate on a tight budget for small businesses and have gone through dozens of starter apps and templates and every one up to now has been missing something crucial that ultimately halted progress. The people at Ionic Themes team put together a rock-solid starter app including clean code and easy to undestand documentation... not to mention unmatched customer support/communication. The Ionic starter app has opened dozens of new possibilities and I am excited to finish my current project now that I can finally see the 'light at the end of the tunnel!' Thank you!
Jeff Sininger - Lead Developer at Sinergy Media

By following Ionic best practices while building Ionic 5 Full Starter app, we ensure working and extending it will be seamless.

Ensure the code meets your quality standards or get your money back.

Customer Support

Support is delivered by the same engineers that crafted the template in a timely manner.

We are here to help you succeed

Just to be clear, our products DO need some technical knowledge, however we will do our best to point you in the right direction if you are new to Ionic or Angular or don't know how to integrate some feature or component from this template to your existing @ionic/angular project. Please note that this does not include by any means support related to custom features or adjustments.

What we mean by Support:

  • Guidance on how to start using the product
  • Guidance on how to add your custom features to the template
  • Guidance on how to follow Ionic and Angular best practices
  • Bug fixing

What we don't mean by Support:

  • Custom features
  • Custom adjustments
  • Custom jobs
  • Anything that doesn't fit into the previous definitions

Features you will love

PWA Ready

Ionic is at the forefront in terms of features that enable building Progressive Web Apps. Learn more about PWA with Angular and Ionic.

Progressive Web Apps enable a huge distribution channel: the web. Being able to target both iOS, Android, Desktop (Electron) apps and the web makes Ionic an incredible complete and robust framework for current market needs.

This cutting edge Ionic 5 Full Starter template addresses all of the 10 principles any web app should comply to be categorized as a PWA:

PWA Principle How Ion5FullApp handles it
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Ionic Framework uses many cutting edge web standards and APIs. Despite the fact that some of those don't have full support across browsers, Ionic still works. In that sense, this Ionic template app is considered to be progressive.
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Ionic 5 UI components are known for its flexibility. You can easily build a responsive UI with Ionic.
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. Ion5FullApp defines a service workers to make the app work offline.
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model. Ionic framework is mobile first, all of Ionic components even adapt to the different platforms (ios, material design). Also, Ion5FullApp is built on the App Shell model.
Fresh - Always up-to-date thanks to the service worker update process. Using different caching strategies inside our service workers we can control the freshness of our cached resources.
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. We can achieve safety for our content by using a hosting provider that has HTTPS support. Because this is a template, it's not hosted anywhere, however, once you finish your coding, you should publish it somewhere (in the case you want to serve the app as a PWA).
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. The changes in how the router works in Ionic made discoverability for our Ionic app easy to achieve.
Re-engageable - Makes re-engagement easy through features like push notifications. Ionic 5 plays really nice with other libraries and packages that enable us to setup push notifications in a breeze. Learn how to add Push notifications to an Ionic app.
Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store. Ionic Framework makes easy to achieve all the principles that enable our app to be installed (web app manifest, HTTPS, registered service worker).
Linkable - Easily share via URL, does not require complex installation. With the new Ionic router, we don't have to rely on deep-links anymore to link to the different parts of our web app.

High Quality

We have teamed up with an extraordinary team of designers and engineers to assure top quality in our products.

Pure Ionic and Angular

Don't waste time stripping bloated JavaScript libraries and custom build tools. We use the essential third party tools to provide great features and stick to Angular and Ionic build tools and best practices.

Within the ecosystem

The toolbelt. The Ionic Command Line Interface (CLI) is a powerful tool to initialize, develop, scaffold and maintain Ionic applications by drastically easing the development workflow. The Ionic CLI makes developing Ionic projects a breeze.

The magic wand. We rely on the standardization provided by Ionic CSS grid and utilities to remove complexity out of the styling universe.

The toolbox. Ionic components with Angular support are the cornerstone to shape your app project.

Ionic + Angular Extensively

We included examples of every major feature you can achieve using @ionic/angular, and the less common or more specific ones are on our collaborative roadmap:

  • Angular Routing
  • Angular Service Worker
  • Lazy Loading
  • Reactive Forms
  • Form Validations
  • Custom Form Controls

Chime in and give your voice in the future of Ionic 5 Full Starter App.

Note: We tried to keep the project as developer-friendly as possible, but without sacrificing all the useful tools for developing an advanced @ionic/angular app. This means you may need some time to grasp the implementation of some of the most advanced features of the template. Don't worry, in the documentation you will find plenty of guidance and if that's not enough, our Support Team will be ready for your questions.

Advanced Styling

Leveraging Web Components, this Ionic 5 Full Starter template makes it easy to isolate and customize components styles using:

  • CSS 4 variables
  • Sass integration
  • Responsive media mixins
  • Theme mixins

Up to date

We are committed to keeping this template up to date with newer versions of Ionic and the small set of third party libraries we rely on. However, if breaking changes arrive in future versions of the libraries, we will always prioritize existing customers.

Let's get nerdy

Code Structure

Every feature is encapsulated in its own module to make it easy to extract it and re-use in your existing Ionic project.

Maintainability

Based on Javascript modules, TypeScript, routing, state management, web components, and more, Angular has all the building blocks in place for you to rely on and build really complex and scalable projects. @ionic/angular inherits all these goodies.

MVC Ready

Easily feed your UI with data. Keep your code clean and maintainable by following best practices.

Fully themeable

By combining Sass and CSS 4 our starter apps provide an extensible theming architecture to easily adapt the template to your brand colors and styles.

You can try the live preview of this Ionic 5 template from your desktop or mobile device to see how it works.

Angular FTW

Planning on adding an admin dashboard or a companion site to your Mobile app? We got your back, both Fully and Angular Site Template offer a collection of high quality mobile and web UI components and features to speed up the development of your next project.

Deluxe - Angular Bundle

All of our products are built by the same team of designers and engineers following Angular best practices to ensure maximum compatibility and coherence between code bases.

This way you will be familiar when working with any of our products.

Ensure the code meets your quality standards or get your money back.


Try before you buy

Try how this Ionic App looks and feels in your device.

Android
ionic pwa

Frameworks we love

angular
Ionic framework
Cordova
Sass
Ionic Documentation
Quality Documentation:

Easy to follow instructions will make the customization process for this amazing ionic framework starter app simple to comprehend.

ionic template improvement
Ongoing improvement

Feedback is always welcome and appreciated, drop us a line and help us grow and create the ionic template that you need and desire.

ionic tutorials
Free & Updated Ionic Tutorials:

Add extra functionalities to your ionic app with our detailed ionic tutorials: Ionic Facebook Authentication, Firebase Integration, Tips for Beginners, among others.

ionic template requirements
Technical requirements:

In order to modify this ionic template you need to have knowledge in web technologies such as javascript, html5 and css3.


YEAH, BUT ...

Does it really save me time?

You know how TV chefs already have the ingredients pre-chopped for them, and all they have to do is the actual cooking?

We prepped the ingredients for you… the beautiful screens, different types of navigations, functional integrations and all of the usual components that you may need in every ionic framework app. In no time you will be able to customize the styles of the ionic template to match your brand and start building your Ionic app.

$69 seems expensive

If you’re a developer billing $100/hr, paying $69 for having all the boilerplate and functionalities of your ionic app seems like a no brainer. We’re just trying to save you time.

I’m not that great with Ionic Framework

That’s okay! Our Ionic templates are super easy to customize and include an extensive and detailed documentation. It’s simple enough for beginners, and flexible enough for experts. It doesn’t matter if you’re a solo freelancer or an enterprise developer team.


More than just a pretty face

Our Ionic Framework Starters are 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.


Our aim is to help people of different skill levels - designers or developers - get the most out of Ionic Framework by saving their expensive time and providing great resources for them to learn ionic framework faster and better. In IonicThemes you will find premium Ionic Templates and Ionic Framework tutorials, tips and tricks.

SUPPORT