Awesome Ionic

<img width="100%" src="https://raw.githubusercontent.com/Cap-go/awesome-ionic/main/awesome_ionic.png" alt="Awesome ionic">
<br>

Contents

• Current Ionic version
• Official Resources
• Ionic Fundamentals
• Theming
• Components tutorials
• Authentication
• Unit Testing
• Ionic Native / Cordova Plugins
• Payment Gateway Integrations
• Backend as a Service
• i18n & l10n
• Tools
• Video Tutorials
• Books
• Boilerplate/Demo Apps
• Components
  • Libraries
  • Animations
  • UI Library
  • Menu, Tabs
  • Form / Input
  • Input - Date/Calendar
  • Lists/Table
  • Images
  • Charts/Diagram
  • Video/Audio
  • Keyboards
  • Dialog
  • Frames
• Open Source Projects
• Contribute
• Author

Current Ionic version

Official Resources

• Site
• Blog
• Documentation
• Getting Started Guide
• Ionic Native
• Community Forum
• Ionic YouTube Channel
• Showcase
• GitHub Repo
• Awesome Capacitor

Ionic Fundamentals

• Beginners Guide to Getting Started with Ionic
• Ionic First Look Series: Your First Ionic App Explained
• How to Convert an Ionic 1 Application to Ionic
• A Simple Guide to Navigation in Ionic
• 10 Minutes with Ionic: Adding Pages and Navigation
• How to Create a Data Model in Ionic
• Ionic and External Libraries
• Understanding Zones and Change Detection in Ionic & Angular 2
• Understanding Ionic: Pipe
• How to Manipulate Data in Ionic: Part 1
• How to Manipulate Data in Ionic: Part 2
• Filtering, Mapping, and Reducing Arrays in Ionic
• Build a basic mobile app with Ionic 4
• Read SMS in Ionic 4 apps
• Geolocation, geocoding and reverse geocoding in Ionic 4
• RTL (right-to-left) layout in Ionic 4 apps
• Push notifications in Ionic 4 apps
• Google Vision in Ionic 4 apps
• Add headless ButterCMS to your Ionic App by Mike Hartington

Theming

• A Guide to Styling an Ionic Application
• Best practice when adding FontAwesome to an ionic2 app
• A List of Common CSS Utility Attributes in Ionic
• 5 Animation Packages You Can Immediately Use Inside Your Ionic App

Components tutorials

• How to Create a Sliding Delete Button for Lists
• Creating a Sliding Introduction Component in Ionic
• How to Create a Custom Loading Component in Ionic
• Build a Simple Progress Bar Component in Ionic
• Create a News Feed with 360-Degree Photo Viewing in Ionic
• Build a Tap to Reveal Component in Ionic

Authentication

• Twitter Login in Ionic 4 App using Firebase
• Facebook Login in Ionic 4 App using Firebase
• Google Login in Ionic 4 App using Firebase
• Anonymous Login in Ionic 4 App using Firebase
• Basic Email Login in Ionic 4 App using Firebase
• Add Touch ID Authentication To An Ionic Mobile App
• Using An Oauth 2.0 Service Within An Ionic Mobile App
• Ionic and Auth0
• Authenticate Ionic with WordPress

Unit Testing

• How to Unit Test an Ionic Application
• Test Driven Development in Ionic: An Introduction to TDD

Ionic Native / Cordova Plugins

• Playing music in Ionic 4 apps
• How to implement health plugin - Pedometer in Ionic 4
• Using Cordova Plugins in Ionic with Ionic Native
• 10 Minutes with Ionic: Using the Camera with Ionic Native
• Determine Network Availability
• Monetize With Google Admob In An Ionic Mobile App
• Show Native Toast Notifications In An Ionic Mobile App
• Use SQLite In Ionic Instead Of Local Storage
• Launch Websites With Ionic Using The InAppBrowser
• Add Barcode Scanning Functionality To Your Ionic App
• Use Google Analytics In An Ionic Android And iOS App
• Share Things On Social Media Via An Ionic Mobile App
• How To Use PouchDB + SQLite For Local Storage In Ionic
• Adding Background Geolocation to an Ionic Application
• Getting Familiar with Local Notifications in Ionic
• Create a Nearby Places List with Google Maps in Ionic – Part 1
• Create a Nearby Places List with Google Maps in Ionic – Part 2

Payment Gateway Integrations

• Ionic 4 Stripe Payment Integration
• Ionic 4 PayPal Payment Integration
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration

Backend as a Service

• 10 Minutes with Ionic: Calling an API
• Using Http to Fetch Remote Data from a Server in Ionic
• Posting data from Ionic app to a PHP server
• Make HTTP Requests In An Ionic Android And iOS App

i18n & l10n

• Internationalize and Localize Your Ionic 4 App
• attranslate - Semi-automated translation of JSON and other resource files.

Tools

• Ionic2-vscode
• Vim-ionic2
• Capacitor safe area simulator - Chrome extension to simulate safe area in the browser, it support Ionic, Knsta UI and Tailwind Capacitor.

Video Tutorials

• Build a Todo App from Scratch with Ionic
• Ionic: How to Use Google Maps & Geolocation
• Build a Custom Flash Card Component in Ionic
• Hacking CSS in Ionic
• Learn Ionic 3 From Scratch

Books

• Building Mobile Apps with Ionic
• Ionic Blueprints
• Hybrid Mobile Development with Ionic

Boilerplate/Demo Apps

• Ionic 4 Full Starter App and PWA
• Ionic 3 Starter App Template
• Ion2FullApp - Ionic 3 Template
• Ionic Boilerplate
• Cordova File Transfer
• Update your App
• NFC Demo
• Fullscreen Content
• Card Layout
• Ionic 2
• Ionic 2 Advanced Components
• OCR Scan App
• Ionic 4 Payment Gateway Starter - Stripe
• Ionic 4 Payment Gateway Starter - Paypal
• Ionic 4 Payment Gateway Starter - Razorpay
• Ionic 4 Payment Gateway Starter - Apple Pay
• Ionic 5 Complete App and PWA Starter
• Ionic 5 Complete Taxi Booking Platform Starter
• Ionic 5 Grocery Shopping Starter with Admin Panel
• Ionic 5 Tinder Starter
• Ionic 5 Spotify Starter
• Ionic 5 Food Delivery App Starter
• Ionic 5 Carpooling App Starter
• Ionic 5 Google Vision Starter
• Ionic 5 Firebase Full App Starter
• Ionic 6 vue Firebase Full App Starter
• Ionic 6 React Full App Starter
• Ionic 6 Capacitor Full App Starter

Components

Libraries

• Capacitor Tailwind - A Tailwind CSS plugin for Capacitor.
• Ionic Blocks - A collection of free and premium Ionic components.

Animations

• Lottie Animation
• Lottie Animation

UI Library

• Ionic 4 UI Component Library

Menu, Tabs

• Scrollabel Tabs
• Circular Tabs
• Fab Toolbar
• Multi Level Sidemenu
• Popover Sidemenu
• Drop down Title

Form / Input

• Autocomplete
• Form Generator based on JSON
• Dynamic Forms
• Form Builder
• Sidemenu tabs
• Selectable
• Masks

Input - Date/Calendar

• Calendar
• Calendar
• Calendar
• Calendar (very powerful)
• Calendar - Fullcalendar
• Datepicker
• Datepicker (selectable range dates calendar)
• Datepicker
• Rating
• Inputfield Mask

Lists/Table

• Sortable/Filter Tables
• Smart table (sorting, filtering)
• Flexible and Light Table

Images

• Signatur - Works perfect with Ionic.
• Image Fallback
• Lazy Load
  
• Image Loader
• Facebook Gallery
• Image Viewer
• Gallery Modal
• Image Zoom

Charts/Diagram

• Charts
• D3 Service
• D3 Barchart
• D3 Line/Bar/Pie Charts

Video/Audio

• Video Editor
• Simple Audioplayer

Keyboards

• Digit Keyboard

Dialog

• Dialogbox with Counter

Frames

• ng Lightning (for Salesforce Apps)

Open Source Projects

• Ionic Conference App
• IonicRealty
• Ionic Firebase Chat App
• Ionic Ecommerce App
• Ionic Conference App based on Lanyrd API
• Ionic Stock Tracking App
• Ionic Wordpress Client
• Ionic Media Player
• Ionic Social App
• Ionic 5 WhatsApp clone
• Ionic 5 Social Network Starter
• Ionic Push Notification
• Ionic Weather app
• Ionic Reddit Reader
• Ionic aiEyes - Azure Computer Vision API
• Ionic Soundboard
• Firebase push notifications in Ionic 4
• Receive SMS automatically in Ionic 4
• Playing music in Ionic 4
• Ionic 4 Stripe Payment Integration
• Ionic 4 PayPal Payment Integration
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration
• Ionic 4 Twitter login with Firebase
• Ionic 4 Facebook login with Firebase
• Translation in Ionic 4 - Internationalization and localization
• Ionic 4 Free chat themes

Contribute

Contributions welcome! Read the contribution guidelines first.

Author

Capgo — Live updates for capacitor

ionic.md Github