Stories App

Introduction

This project demonstrates the integration of PixiJS within an Ionic React Progressive Web Application (PWA). It serves as a showcase for developers interested in leveraging the powerful graphics rendering capabilities of PixiJS in combination with the robust framework of Ionic React to create engaging PWA experiences. Specifically, this demo focuses on using the device's camera, loading images, and utilizing PixiJS features to display content within a canvas.

• Presentation: https://slides.com/juandavidnicholls/pixi-react/

Table of Contents

• Introduction
• Features
• Installation
• Usage
• Dependencies
• License

Features

• Utilization of Ionic React to create a seamless PWA experience.
• Integration of PixiJS for advanced graphics rendering within a canvas.
• Camera functionality to capture images directly from the device.
• Demonstrates loading and displaying images using PixiJS.
• Integration of the Giphy SDK to display a grid of images for selection.
• Ability to add selected images from the Giphy grid as stickers to the canvas.
• Drag and drop functionality for stickers within the canvas.

Installation

To get started with this project, follow these steps:

npm ci

Usage

After installation, you can run the project using:

npm run dev

This will start the development server and open the application in your default web browser.

Dependencies

• Ionic React: Used to create a seamless PWA experience.
• PixiJS: Integrated for advanced graphics rendering within a canvas.
• Capacitor Plugins: Leveraged to provide native device features such as camera functionality, haptic feedback, and file system access.
• Giphy SDK: Integrated to display a grid of images for selection. Users can add selected images from the Giphy grid as stickers to the canvas.
• React Router: Used for routing and navigation within the application.
• React Hook Resize Observer: Used to observe changes in the size of the browser window or elements within the application.
• Lodash: A utility library used for simplifying complex operations and providing helpful utility functions.
• Blob Util: Used for working with Blob objects, specifically for converting base64 strings to blobs.

License

This project is licensed under the MIT License.

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Donate Ethereum, ADA, BNB, SHIBA, USDT/USDC, DOGE, etc:

Wallet address: jdnichollsc.eth

Please let us know your contributions! 🙏

Happy coding 💯

Made with ❤️