Awesome
Awesome Ionic
<div align="center"> <img width="100%" src="https://raw.githubusercontent.com/Cap-go/awesome-ionic/main/awesome_ionic.png" alt="Awesome ionic"> <br> </div> <br/> <div align="center"> ā” A curated list of awesome resources related to the <a href='https://www.ionicframework.com/'>Ionic</a> Framework. <br /> Ionic is an open-source mobile application framework that makes it easy to build cross-platform mobile apps with web technologies. <br/> <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FCap-go%2Fawesome-ionic%2Ftree%2Fmain&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a> </div> <div align="center"> <h2><a href="https://capgo.app/?ref=awesomelist_ionic"> ā”ļø Get Instant updates for your Capacitor App with Capgo š</a></h2> <h2><a href="https://capgo.app/consulting/?ref=awesomelist_ionic"> Fix your annoying bug now, Hire a Capacitor expert šŖ</a></h2> </div> <br> <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
- 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
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
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
UI Library
Menu, Tabs
Form / Input
Input - Date/Calendar
- Calendar
- Calendar
- Calendar
- Calendar (very powerful)
- Calendar - Fullcalendar
- Datepicker
- Datepicker (selectable range dates calendar)
- Datepicker
- Rating
- Inputfield Mask
Lists/Table
Images
- Signatur - Works perfect with Ionic.
- Image Fallback
- Lazy Load
- Image Loader
- Facebook Gallery
- Image Viewer
- Gallery Modal
- Image Zoom
Charts/Diagram
Video/Audio
Keyboards
Dialog
Frames
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
<a href="https://capgo.app/">Capgo ā Live updates for capacitor</a>