Ionic 3 Toolkit Firebase Pro Edition

Overview

Ionic Toolkit Firebase comes with a mobile app and an admin panel integrated with Firebase enabling full access and control over the data stored in your Firebase project and used in your mobile app.
The mobile app includes a set of reusable user interfaces and views that a big variety of mobile apps would use to interact with their users. Also, this toolkit demonstrates various data structures for different scenarios with the use of Firebase as a database to build real-time applications. Common services of Firebase are implemented such as authentication with different providers, chat and data synchronisation across all connected clients.
The admin panel provides an easy and user-friendly way to manage your Firebase data. It a multi user application so you can invite other users and let them help you with the maintenance of the content. It supports Google and Firebase Email/Password sign-in.
Best practices, proven techniques and experienced software architecture are packed with a well-crafted design.

mark-check-small@2x.pngIn a nutshell

Ionic Toolkit Firebase allows you to quickly integrate your mobile app with Firebase and have access to real-time data and other common services such as authentication, chat and data management and synchronisation. It requires minimal setup enabling even non-developers to use and maintain it.

mark-q-small@2x.pngWhy choose Ionic Toolkit Firebase

  • Ideal to get familiar with Firebase and get the most of it
  • Easily maintainable data, via the powerful Admin Panel for Firebase
  • Clean and user-friendly interface
  • Highly customizable structure, with modular architecture
  • Easy installation, detailed quick start guide
  • Free updates: new features added constantly
  • One codebase compatible with Android and iOS
  • Quick and efficient Support

Feature request

Help us improve this app in a way that absolutely makes sense. Suggest the next feature you would like to see implemented. We are taking suggestions very seriously.

Demo

Admin panel

Live demo

To log in use the following credentials:

Mobile app

Live demo

Android .APK

Preview on iOS and Android – Ionic View

  • Download the Ionic View app (https://ionicframework.com/pro/view)
  • Use the App ID 06f05b1e

Note: Some features are not fully functional for preview on Ionic View. Especially, those that need to launch another application of the device such as “Get directions” which launches device’s Maps application.
user-guide-click-button.png

Features:

Activity feed

The Activity Feed displays posts in a list. Each post opens a new screen showing the post title, text, date, posted by properties and pictures.
Once logged in, users can send their own post in real time visible to every connected device.

News

A master-detail pattern is used to display all articles in a list and the details of each article to another screen. Articles are represented by a photo, title, text and the date they were posted.

Products

All products are displayed as cards, each one navigating the user to another screen with the details of that item. Pictures, some text, a price and a URL constitute the product structure.

Catalog items

Catalog items are displayed in cards with a title and a thumbnail.
The detail screen provides additional information for each product including its description, a slideshow of images, an “Open in browser” link, and an “Open PDF” link. The “Open in browser” link points to the product web page where the user is able to read more information or proceed with the purchase. The “Open PDF’’ points to an online pdf.

Menu items

Menu items are presented with a title, a thumbnail and a price.
A detailed screen of each menu item provides additional information including:

  • Price and size options
  • Description
  • A slideshow of images
  • Basic ingredient options with no extra cost
  • Ingredient options with extra cost

User profiles

User profiles collect personal data associated with specific users. An avatar is automatically generated from the user name initials when no avatar image is provided by the user.
A details screen includes more information such as biography, address and email. One tap actions enable easier contact and access to social profiles:

  • Phone: It will make the device start a phone call to the phone number you have defined.
  • Email: The email client will open with an email address already set, so that the user won’t need to type it.
  • Linkedin: Opens the user profile on LinkedIn in the device browser.
  • Webpage: Opens the personal webpage of the user in the device browser.

Real estate

Offers an overview of the real estate market and available properties. Each listing is presented by images, its category, size, price, amenities etc. Also, one tap actions allow easier contact and access to even more details:

  • Phone: It will make the device start a phone call to a pre-defined phone number.
  • Email: The email client will open with an email address already set, so that the user won’t need to type it.
  • Webpage: Opens a webpage in the device browser for viewing more details about a listing.
  • Map: Opens a map with a pin where the listing is located.

Galleries

A minimalistic and clean interface for viewing photo galleries. Galleries are shown in a list with a title and a small description.
Tapping on a gallery transfers the user to a full screen slider to view all the images of that gallery.

Chat

Once logged in, the user is able to chat with all the other connected users in different chat rooms.

Authentication

Users can either log in or access the mobile app anonymously with restricted actions such as not being allowed to send a message in chat rooms or a post in the app’s activity feed. Except for the basic Firebase authentication, login with multiple providers (GitHub, Facebook, Google, Twitter) is allowed as well. Also, users can initiate password reset from the app itself. A password reset email is sent to the user’s email address to reset the password.

Firebase Admin Panel

fr-adminpanel.png Manage all the data of the mobile app like never before! The Admin Panel is a separate Angular Application connected with your Firebase data designed with non-technical users in mind.

Real time data

Data updates are reflected on the mobile app immediately which is synchronised without refreshing or making a request to Firebase again.

Ionic design

This mobile app is based on the UI elements that the Ionic Framework provides. Ionic Framework comes with a detailed and impressive CSS components for layout styling. Moreover, Ionic comes with its own icon library built in which contains almost everything you should need. Use Ionic’s UI components and they will give you a fully customised and functional UI.

AppSeed

This is a product of AppSeed. Find out more by visiting our website http://appseed.io/ or contact us via our support center https://appseed.desk.com/customer/portal/emails/new.

Change log

Ionic Toolkit Firebase Admin Panel

 1.0 - May 31, 2018 - Initial release  

Ionic Toolkit Firebase Mobile App

 1.1 - Jun 01, 2018 - Improved style of home screen - Minor fixes  1.0 - Sep 22, 2017 - Initial Release  

Related