Ionic 5 Grocery Shopping— User, Delivery, and Admin Apps

Starter with back-end and Payment Integrated

In the time of COVID pandemic lockdowns, a huge number of online apps have found a greater use. Grocery shopping is one of the top apps which have found tons of new users in pandemic time. This post elaborates on the features of Ionic Grocery Shopping Platform — An app starter by Enappd, which you can purchase and start your own grocery shopping platform with.

Grocery Shopping complete platform is a high-quality app starter package for ordering/delivering/managing Grocery Items, built-in Ionic 5 framework with great UI design. This starter contains three important apps, which are essential to create a complete Grocery Shopping Platform:

• Grocery Buyer or User App — For Ordering Items
• Grocery Delivery App — For Delivery of ordered Items
• Grocery Admin App — For monitoring both users and delivery boy’s Activities

Why Ionic 5

Ionic 5 has come out in the market with great improvements over the previous versions. This Grocery Application Ionic template is built using Angular 8 and Ionic Framework v5 and has everything you need to jump-start your Grocery Shopping app development!

Ionic 5 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.

Benefits with Grocery Shopping complete Platform

• Clients: Get your next app built by developers using Grocery Shopping complete platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
• Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
• Designers: Customization of layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Grocery Shopping Application complete platform and enjoy lots of carefully designed pages with the most required functionalities!

Let’s check out some great features of the platform

• Back-end integrated
  The platform comes with an integrated Firebase back-end used for authentication, database management and much more. You can add tons of features to any of these 3 apps based on Firebase (Push notification, analytics, phone auth, payment gateways). You can find tutorials regarding these features in our blog section here.
• Payment Gateway
  This platform comes integrated with Stripe payment gateway. It is already configured with all the apps, and is well tested
• UI with latest Ionic
  This Ionic 5 starter includes lots of Ionic 5 components coded the angular way and features that you will love. Ionic is a super modular framework where you can easily edit these UI features as well. Angular front-end framework gives a robust base to the whole platform. Learn more about Ionic features in our Ionic focussed blogs here. 
• 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 need. The code structure is modularized so you will find it easy to modify the code to fit your needs.
• Easy theming
  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! Read more in our blog — Awesome theme switcher for Ionic apps

Let’s dive into the screens and features of all the 3 apps of the platform

The Grocery Buyer or User App

This part of the app contain screens with the help of which you can quickly make User/Customer App for your Grocery Ordering service.

Let’s go through all the pages of Grocery buyer application

Login/Sign up along with social logins

This page will check the authentication of user from Firebase‌. A firebase based email login is already implemented in this screen. 

You can further setup social login using the same Firebase setup. To learn how to setup social logins, check our blogs for Ionic 5 Facebook Login, Ionic 5 Twitter Login and Ionic 5 Google Login.

Home Page

Home Page is all about showcasing your products in our virtual shop. In this part we have also created a category and subcategory logic, so you can put product under category or a subcategory.

Side Menu Options

The side menu is the main navigation system of Application, where we can go from one page to other page and it helps user to check their profile details as well.

Categories

This page shows products by categories. We can navigate here from home page, and then explore products in different categories

New Arrivals

Very similar to a Category products page, this page can be accessed from Home page, and shows the products added in the ‘New Arrival’ section

Product Details Page

This page gives the details of a product including multiple images, prices, ratings and enables you to add product in your cart and later buy and pay for the product.

My Account Page

This page has 3 tabs 

• Profile — Name, profile picture, Phone number and many more. These details later will be used to contact the user at the time of delivery of the product.
• My Cards — Add and manage payment details. Payment cards added here will show up in payment flow
• My Addresses — Add and manage addresses. Addresses added here will show up in payment flow

Cart Page

This is the one of the most important part of our User Application as it comprises of all of cost calculation of selected Items by the customer. It also have a checkout part that takes us to the payment and address selection part.

Add Address Page

Adding address is one of the main steps for the grocery delivery app as the delivery person would need an address where the product is to be delivered. In the delivery payment flow, you can select from the addresses added earlier in My Account page, or you can add new address here, which will get added to My Addresses automatically.

Add Payment Card Page

This is one of the new feature in this version of the Grocery user application, In the delivery payment flow, you can select from the cards added earlier in My Account page, or you can add new card here, which will get added to My Cards automatically. To save cards we have used the Stripe payment gateway. You can also read our blog for Stripe payment integration in Ionic apps.

My Orders

In this page you can see your present and past orders, along with limited details like total of the order, delivery date, address etc.

Help Page

Here you can put your FAQ or other general help related content for the convenience of your customer.

Offer Page

This is a page made to accommodate offers from the admin. You can select if there is any offer available.

The Grocery Delivery Person App

This application is being categorized into three tabs — 

• Today’s orders
• History orders and 
• Profile of Delivery Boy.

We will go through every screen and feature in this delivery boy application.

Login and Signup screen

This page will check the authentication of delivery boy from Firebase.‌ We have applied the email login of firebase.

Today’s order Page

This page contains the orders that are assigned to the particular delivery person on that day. The assignment of orders is decided by the Admin app.

History or past orders Page

This page shows orders that are already delivered today or the orders (either delivered or not) that have been delivered before today. 

Order details Page

This page shows the details of a particular order delivery with the order subtotal, number of items, details of items and the delivery address and customer name.

Map View Page

This pages shows the Map view in which the path is being highlighted from source to destination, delivery person can follow it and reach the desired destination.

Delivery details

The delivery detail modal (popup) stays on top of Delivery map view to give quick details of the delivery i.e. Total of the delivery , address in text, customer details etc.

Confirm Delivery Screen

Once the delivery boy has reached the destination using the Map View, he/she can click on confirm delivery and it will ask for the points for delivery confirmation. Delivery person can choose appropriate status and confirm that the order is delivered.

Profile Page

This page shows the information about the delivery boy like name, email address, total delivering time served and many more.

The Grocery Admin App

This part of the Grocery platform contains bunch of features that handles the User application and the Delivery boy application.

Home Page

This page provides the complete stats for the user app activities like number of users, Total number of categories, total orders and from this page you can also switch the themes like purple theme, dark theme and more.

Product Upload Tab

As the name suggest, in this tab we can upload the details and photos of the product which we want to sell. And this will be added in the user application.

Category upload Tab

As we have told earlier, we have a logic for uploading a product under a particular category. So in this part we will first add the category details and then will add a product under any of the existing category.

Collections upload Tab

This section is almost same as the category section. In this we can add a collection (like New Arrivals, Best Sellers) and then in that collection we can add products.

Orders Tab

This section of the app shows all information about ordered product by the user. In this we have added the filters for the pending orders, Completed orders and the all orders which will help us assigning the orders to the delivery persons.

Offers Tab

In this part we can simply add an offer for the products. We have to specify the offer name, promo code and photo for the offers.

Users Tab

This tab helps the admin to keep track of users and the delivery boy registered in the application with their complete information like name, email address, and many more info.

Payments Tab

This tab shows the payment details of the ordered products by the customer with complete information like payment amount, order ID, username and the transaction ID.

Banners Tab

Banners tab helps us to add offers banner or product banners in our users application which is shown under the collections (products).

Things to keep in mind

This app starter is surely saving thousands of dollars off your Grocery Platform development. Having said that, as any other app starter, there are a few things to keep in mind with this starter.

This app starter is a developer friendly way to start your own Grocery ordering platform. It is not a 100% out-of-the-box set of apps, which you can start using right after purchase. You will need a little programming experience to : 

• Edit the code as you need — UI or logic
• Compile the apps into mobile or web-apps
• Deploy the apps on Android/iOS stores and/or on web
• Figure out configuration of Firebase project and Stripe payment gateway, where you’ll need your own account which you can attach to this app platform

For more help, you can check out these resources

Blogs

• Stripe integration in Ionic 5 apps using Firebase
• Firebase integration in Ionic 5 apps
• Firebase Auth options with Ionic 5 — Email | Phone | Anonymous | Twitter | Facebook | Google
• More Ionic and Firebase related blog resources

Videos 

(Screens and features may differ slightly in the video due to version difference over the time)

• Grocery user app demo
• Grocery user app iOS build demo
• Grocery user app android build demo
• Grocery admin panel - Installation and setup
• Grocery user app - Installation and setup

Conclusion

In this article, we got to know about the features and design aspects of Ionic 5 Grocery shopping complete platform. An app starter like this is a sure shot way to save thousands of dollars on app development. Also, it reduces your conceptualization-to-market time by several folds. With this app starter, you get an awesome looking UI as well as Backend functionality for all three aspects of any Grocery Shopping platform, i.e. User, Delivery boy, and Admin. At the price which this app is offered, it can be surely called a steal-deal.