Ionic 6 Full Starter App - ELITE version

Ionic 6 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 between the different versions of this starter template. You can upgrade at any time and if the template doesn't satisfy your needs, you can get your money back.

This template is the ELITE version of Ionic 6 Full Starter App. It's built on top of the PRO version, with even more features, components, and screens.

The ELITE version is our most versatile template, and provides you with code samples of even more mobile use cases.

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

BUY NOW

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

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

CRM Dashboard

The main purpose of visualizations is to help display data in a visual, lively, sexy and summarized way.

We felt these types of components were missing from our template, so we added a new screen featuring a dashboard use case including different visualizations such as line charts, doughnut charts, progress bars and animated values.

We are also building other e-commerce dashboard, custom charts and data table examples to cover even more use cases. Stay tuned to upcoming updates of the ELITE version of this template and also check the upcoming section down below for more information.

WordPress Integration

WordPress is one of the most used tools to share information on the web. Also, it has been one of the most requested features in our polls.

We included a simple but complete integration with the WordPress API. It showcases how to retrieve posts from WordPress using their API, how to filter them by category, and how to get information about a specific post including all the comments associated with that post.

Both for the posts listing and the comments list are great use cases to showcase the Ionic infinite scroll functionality.

Activity page

This screen shows Ionic/Angular techniques that can be used to build many advanced use cases.

In particular, we focus on explaining how to build dynamic components using <ng-template> and how to build an advanced two-way communication between the main page and a modal with filters made with form controls.

This is the base functionality to build any advanced filtering use case.

This page also works as a good example on how to structure data to support a complex UI/UX scenario.

Contacts page

Similar to the Activity page, this screen shows Ionic/Angular techniques that can be used to build many advanced use cases.

This screen features the building blocks needed to create dynamic and polymorphic components.

In particular we show how you can use different <ng-template> components to present different aspects of the same data. In this case, depending on the filter you select, the contacts are going to be sorted, filtered and rendered with different visual representations (birthday, name, location).

This page also works as a good example on how to structure data to support a complex UI/UX scenario.

New Components

We are starting to move towards having lots of components showcasing different use cases so you can copy, and adjust them to fit your needs.

By having smaller components rather than complete screens, we allow for more versatility by enabling building custom use cases and features in a more tailored way.

Agenda

This screen features different components that can be used to present information about meetings, tasks, and team members.

Sliding Tabs

Similar to Ionic segments, this component allows you to present different sets of items or lists. It’s an important building block that allows you to build many use cases.

Upcoming Features and Components

Just as we did with PRO version in the past, we decided to launch an early bird of the ELITE version of this template and continue building upon that with regular FREE updates.

Each update will include new components and features based on customer votes. This way we ensure building a product that's more aligned with your needs.

Some features and components we already have half baked waiting for your feedback are:

• E-commerce Dashboard
• Visualizations
• Line chart
• Sparkline chart
• Bar chart
• Pie chart
• Radar chart
• Scatter plot
• Use cases based on common components
• Breadcrumbs
• Accordion
• App Shell
• Toasts
• Popover
• Card Modal
• Sheet Modal

Firebase Integration

Firebase is a popular tool that helps you build apps fast, without managing infrastructure using its 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.

Other Integrations

The PRO version of Ionic 6 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.

Server Side Rendering

There are mainly three main reasons to add SSR to your app.

• Better SEO rankings (facilitate web crawlers)
• Improve performance (specially on mobile and low-powered devices)
• Preview cards on social media

SSR is very important as it improves the perceived performance of your application and also provides a reliable, flexible and efficient way to ensure that all search engines can access your content. Learn more about the benefit of using SSR.

SEO Service to support dynamic meta tags

Google, Bing, Facebook, Twitter, and all social media sites rely on web crawlers to index your application content and make that content searchable on the web. Angular Universal generates a static version of your app that is easily searchable, linkable, and navigable without JavaScript. Universal also makes a site preview available since each URL returns a fully rendered page.

This template provides a SeoService to allow you to change your SEO meta tags dynamically on each route.

App Shell or Skeleton components

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 template because we believe it's 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 explain how to do it in the template's documentation.

Features 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.

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 of Listings 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 components you will find in each category include:

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

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 to avoid frustrating users.

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 in Ionic apps.

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.

Navigation in Ionic framework

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 (two of the principles of a PWA).

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. Learn everything about Ionic Angular navigation.

This Ionic 5 starter app template features many examples of navigation within an Ionic app such as:

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

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? On the documentation we explain how to remove Capacitor and add Cordova into your project.

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 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.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. You can learn more in Firebase authentication tutorial for Ionic Framework apps.

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 iOS, Android, Desktop and the web, Ionic framework is an incredibly comprehensive and robust framework for the today's market needs.

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

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

Try the demo

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

Leverage

Considering reinventing the wheel? Don't! You know it's going to take much longer than you think.

Start building your project leveraging countless hours of top designers and engineers spent crafting this Ionic Starter. Multiple pages, components and features ready to fit diverse use cases and speed up your Ionic 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.

Documentation

Includes an extensive documentation with easy to follow instructions. We are constantly improving it with frequent questions and new examples.

Customer Support

Support is delivered by the same developers that created the template.

We are here to help you succeed

Just to be clear, our products DO need some technical knowledge, however, 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, we will do our best to point you in the right direction.

Please note that this does not include support related to custom features or adjustments.

Learn more about the support policy.

High Quality

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

Just Ionic & 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 tool belt. 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

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 variables
• Sass integration
• Responsive media mixins
• Theme mixins

Up to date

We are committed to keep this template up to date with newer versions of Ionic and the small set of third party libraries we rely on.

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.

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.

MVC Ready

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

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.

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.

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

Get the bundle

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