ionic-react-ui-examples-collections.md

Ionic React UI Examples

• Switch Tab Bar

  • An animated switching tab bar
  • Included in this Ionic React Template/UI
    • Ionic Animations
    • Simple transition
    • Sleek style
  • Source Code - https://github.com/alanmontgomery/ionic-react-switch-tabs
  • Demo - https://ionic-react-switch-tabs.netlify.app/

• Poll App UI

  • A poll app with social sharing
  • Included in this Ionic React Template/UI
    • View Polls, View Poll, Add Poll
    • Vote for answer
    • View results / percent / counts
    • Social sharing / copy to clipboard
    • Dynamic color scheme
    • State management with Pullstate
    • Custom animations
    • SASS Modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-poll-app
  • Demo - https://ionic-react-poll-app.netlify.app/page/view

• WhatsApp UI Clone

  • A clone of the WhatsApp UI (IOS, dark mode)
  • Included in this Ionic React Template/UI
    • Status, Settings, Starred Messages, Chats, View Chat, View Contacts, Calls pages
    • Reply-To in chat message using Ionic Animations and gestures (both swipe and long press)
    • Star messages and view them in starred from settings
    • Notification badges (on chat list)
    • Read Receipts of chats
    • Notification counts
    • Send message
    • Camera functionality in chat to send photo (using CapacitorJS)
    • Gallery functionality in chat to send image from gallery
    • State management with Pullstate
    • Custom animations
    • SASS Modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-whatsapp-clone
  • Demo - https://ionic-react-whatsapp-clone.netlify.app/tabs/chats

• Onboarding UI

  • An effective way to welcome your users
  • Included in this Ionic React Template/UI
    • Programmatically control IonSlides
    • Show/Hide based on first/last slide
    • CSS modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-onboarding-ui
  • Demo - https://ionic-react-onboarding-ui.netlify.app/home

• Add To Cart

  • Add to cart component with animation
  • Included in this Ionic React Template/UI
    • Ionic Animations
    • Specify color of button (animation color too)
    • Specify Icon or text for 'add to cart' button
    • Specify a custom click
    • CSS modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-add-to-cart
  • Demo - https://ionic-react-add-to-cart.netlify.app/home

• Profile Dashboard UI

  • A profile dashboard style UI
  • Included in this Ionic React Template/UI
    • UI Only
    • Modern, stylish profile dashboard UI
    • Custom style header/toolbar
    • Background pattern in toolbar
    • ASS Modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-profile-dashboard-ui
  • Demo - https://ionic-react-profile-dashboard-ui.netlify.app/home

• Drawing Canvas App

  • A drawing canvas app with editable options
  • Included in this Ionic React Template/UI
    • Drawable canva (react-canvas-draw)
    • Ability to change color via swatch (react-color)
    • Change brush/pencil size
    • Undo last action
    • Clear all
    • CSS Modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-drawing-canvas
  • Demo - https://ionic-react-drawing-canvas.netlify.app/home

• Kanban project board

  • A kanban style project board with list view
  • Included in this Ionic React Template/UI
    • Board / List View achieved with IonSlides and IonReorder
    • Works on Desktop
    • Multiple Categories / Types
    • State management with Pullstate
    • Custom animations
    • Add Items, Move Items
    • SASS Modules & Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-kanban-board
  • Demo - https://ionic-kanban-board.netlify.app/page/kanban

• Fast Food Ordering App

  • A fast food ordering app UI with features
  • Included in this Ionic React Template/UI
    • Data fetching from JSON files
    • Color co-ordinated pages
    • Global state management with Pullstate
    • Custom animations
    • Fully functional add-to-cart and add-to-favourites
    • Total calculation in checkout
    • Ability to remove from cart
    • Category, Foods, Single product, Cart, Favourites pages
    • Similar or 'related' foods
    • Use of stock Ionic components
    • CSS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-fast-food-app
  • Demo - https://ionic-fast-food-app.netlify.app/home

• Movie App UI

  • An example of a movie app with search
  • Included in this Ionic React Template/UI
    • Custom PWA install button prompt through service worker
    • Custom Algolia Search widgets
    • Custom animations
    • SASS Modules
    • Ionic CSS utilities
    • Infinite Scroll
    • Youtube Search
  • Source Code - https://github.com/alanmontgomery/ionic-react-movie-app-with-algolia
  • Demo - https://movies-algolia.vercel.app/home

• Theme Switcher

  • Implementation of dynamic themes
  • Included in this Ionic React Template/UI
    • Perfect if your customers have a brand
    • Utilising Ionic CSS variables
    • API fetch (dummy JSON)
    • Examples of how stock components look
    • 6 example themes to demonstrate
    • Low-code
  • Source Code - https://github.com/alanmontgomery/ionic-react-theme-switcher
  • Demo - https://ionic-react-theme-switcher.netlify.app/info

• Notes app UI

  • A stylish, functional notes app
  • Included in this Ionic React Template/UI
    • Global state management with Pullstate
    • Custom animations
    • Custom inputs, cards and slides
    • Fully functional add note, complete note
    • Categories, color coded
    • Use of stock Ionic components
    • SASS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-notes
  • Demo - https://ionic-react-notes-app.netlify.app/

• Calculator UI

  • A fully functional calculator
  • Included in this Ionic React Template/UI
    • Fully functional Calculator
    • Custom buttons
    • History of calculations
    • Animations on button clicks
    • Automatic calculation
    • Use of stock Ionic components
    • CSS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-calculator
  • Demo - https://ionic-react-calculator.netlify.app/home

• Floating tab bar

  • A floating tab bar component
  • Included in this Ionic React Template/UI
    • Floating tab bar
    • Separated CSS included for floating tab bar
    • 3 tabs from tabs starter project
  • Source Code - https://github.com/alanmontgomery/ionic-floating-tabs
  • Demo - https://ionic-floating-tabs.netlify.app/tab1

• Login/Signup & Form Validation

  • Includes generic forms and validation
  • Included in this Ionic React Template/UI
    • Custom Hooks
    • Generic form building
    • Generic form validation
    • Error messages
    • Welcome/Login/Signup pages
    • Animations
    • SASS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-login
  • Demo - https://ionic-react-login.netlify.app/home

• Coffee ordering app

  • A custom app for orders
  • Included in this Ionic React Template/UI
    • Global state management with Pullstate
    • Dynamic search
    • Custom animations
    • Custom toolbar
    • Custom Icons
    • Fully functional add-to-cart and add-to-favourites
    • Total calculation in checkout
    • Ability to remove from cart
    • Home, View full range, Single coffee view, Cart, Favourites pages
    • Use of stock Ionic components
    • CSS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-ordering-app
  • Demo - https://ionic-ordering-app.netlify.app/tabs/home

• Custom Item List

  • A custom, creative item list with features
  • Included in this Ionic React Template/UI
    • Data fetching from MovieDB API in Movies page
    • Infinite scroll included for movie list and search
    • Custom animations
    • Custom Toolbar and Item
    • Removing an Item
    • Dynamic search list
    • Use of stock Ionic components
    • SASS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-react-item-list
  • Demo - https://ionic-react-item-list.netlify.app/home

• Instagram UI Clone

  • A clone of the Instagram feed and profiles
  • Included in this Ionic React Template/UI
    • Global state management with Pullstate
    • Custom animations
    • Instagram Feed UI / Profile UI's
    • Ability to 'like' a post, with animation of heart
    • Use of stock Ionic components
    • SASS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-instagram-clone
  • Demo - https://ionic-instagram-clone.netlify.app/home

• Banking App UI

  • A creative, custom banking example
  • Included in this Ionic React Template/UI
    • Global state management with Pullstate
    • Custom animations
    • Custom configurable CSS for Credit Card
    • Ability to add a card and view transactions
    • Account, Home (Cards), and Add Card pages
    • Use of stock Ionic components
    • CSS Modules
    • Ionic CSS utilities
    • No validation included on forms
  • Source Code - https://github.com/alanmontgomery/ionic-banking-ui
  • Demo - https://ionic-banking.netlify.app/home

• E-Commerce template

  • A fully functional template for e-commerce
  • Included in this Ionic React Template/UI
    • Data fetching from JSON files
    • Global state management with Pullstate
    • Custom animations
    • Fully functional add-to-cart and add-to-favourites
    • Total calculation in checkout
    • Infinite scroll
    • Ability to remove from cart
    • Category, Products, Single product, Cart, Favourites pages
    • Use of stock Ionic components
    • CSS Modules
    • Ionic CSS utilities
  • Source Code - https://github.com/alanmontgomery/ionic-ecommerce-example
  • Demo - https://ionic-ecommerce-example.netlify.app/home

• Profile UI

  • An example of a profile UI
  • Included in this Ionic React Template/UI
    • Profile & Posts
    • Custom toolbar
    • Ionic CSS Utilities
    • CSS styling modules
  • Source Code - https://github.com/alanmontgomery/ionic-profile-example
  • Demo - https://ionic-profile-example.netlify.app/home

• Facebook UI Clone

  • A clone of the facebook timeline and messenger
  • Included in this Ionic React Template/UI
    • Timeline UI
    • Messenger UI
    • Both linked together
    • Icons in toolbar
    • All stock components
    • Custom CSS
  • Source Code - https://github.com/alanmontgomery/ionic-facebook-clone
  • Demo - https://ionic-facebook-clone.netlify.app/timeline

• Ionic Storage UI

  • Ionic Storage built ontop of the famous 'list' starter template
  • Included in this Ionic React Template/UI
    • Config & create
    • Set, get, remove, clear
    • Updates to objects
    • Retaining data
  • Source Code - https://github.com/alanmontgomery/ionic-storage-example
  • Demo - https://ionic-storage-example.netlify.app/home

• Marvel Characters App

  • A PWA with custom install button, fetching data from API
  • Included in this Ionic React Template/UI
    • Data fetching from Marvel API
    • Skeleton elements for loading
    • Infinite Scroll to load in 20 items each threshold
    • Custom PWA experience with custom install button
  • Source Code - https://github.com/alanmontgomery/ionic-react-marvel-app
  • Demo - https://ionic-react-marvel-app.vercel.app/home

• Two Factor Auth UI

  • Get creative with your UI/UX for 2FA with a custom style and animated states
  • Included in this Ionic React Template/UI
    • Custom inputs
    • Custom buttons
    • Custom CSS animations
    • Inputs controlled by state
  • Source Code - https://github.com/alanmontgomery/ionic-2fa-example
  • Demo - https://ionic-react-2fa.netlify.app/home

• Custom tabs/side menu

  • Configurable, multiple side menu, custom tabs and more
  • Included in this Ionic React Template/UI
    • Custom page
    • Custom tabs with tab builder
    • Configurable side menu with Context API
    • Multiple side menus per page
    • Sub pages and routes
    • Lists with data
    • Dynamic search example
  • Source Code - https://github.com/alanmontgomery/ionic-react-tabs-menus-custom
  • Demo - https://ionic-react-tabs-menus-custom.netlify.app/tabs/tab1