INTRODUCING
#THEFUTUREISWRITTENINCODE

Intro To Using Pinia For State Management In VueJS #vuejs #pinia #vuex Pinia - The Vue Store that you will enjoy using... Intuitive, type safe, and flexible Store for Vue I guess this is the new goto for state management in Vue3 and what is really awesome is that it works great with vue devtools What's Covered ------------------------ - This is a simple application that allows you to add students to an array that is managed in the global store and then perform the traditional CRUD actions against the store. - We show how to subscribe to changes in the store for updating the user interface - We discuss some of the benefits of this approach and its integration of typescript and how great it works with the vue-devtools. Links -------- - Source Code: https://github.com/aaronksaunders/vite-pinia - Doc: https://pinia.esm.dev/

#mongodb #realmdb #reactnative MongoDB Realm and React Native Getting Started This is just a live recording of me following along the documentation to get started with Realm and React Native This is the first in a series of videos about using MongoDB Realm React Native specifically taking advantage of the offline and sync capabilities. I have used MongoDB realm once before in an Ionic Framework video series listed below, so you can take a look to get an idea of the direction I am heading with this video series In this first video, we are just following along with the documentation to get a react native application up and running with the realm library installed and do some basic CRUD actions without a React Native UI. As we move through the series we will fill out the app more and show how to integrate MongoDB Realm in a React Native application. Chapters --------------- 00:00 - Introduction 01:01 - Getting Started With Process, what I have done so far with the code 03:50 - Creating DataSchema 04:22 - Showing How to Open Realm 04:59 - Write an Object 07:55 - Read All Objects of A Specific Schema 09:25 - Read One Object 11:40 - Update an Object 13:52 - Delete an Object 17:09 - Wrap and What's Next Links -------- - React Native Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl1B3ydONg0RqjOM9-0oS0cm - Source Code https://github.com/aaronksaunders/MyReactNativeRealmApp/tree/master - Realm Documentation https://docs.mongodb.com/realm/ - Vue JS Realm Series https://www.youtube.com/watch?v=HIIqSWB_4G8&t=1726s

#ionic #reactnative #videotutorials Just a quick update on what is going on with the channel. I have for the longest time been creating Ionic Framework Videos and recently I have been doing more React Native tutorial content. This video explains why and what you should look forward to seeing in the future

React Native Mobile App Tutorial: Using Swipeable Component With FlatList #reactnative #supabase #flatlist #swipeable So the last video was supposed to be the last video, but I needed to figure out how to use the gesture library swipeable component so I figured I would do a video showing how to swipe to delete the row and then delete the record and image from the database. Chapters -------------- Video Series - React Native Refresher ------------------------------------------------------------ Part 1 - Intro to Working with React-Navigation - https://youtu.be/uqH00SEmKxg Part 2 - React Navigation Drawer Navigator And Authentication Flow - https://youtu.be/5e67b0PBcn4 Part 3 - Authentication And Supabase Login - https://youtu.be/aBuB-Q6vHDE Part 4 - Authentication, Supabase, And React Hook Form - https://youtu.be/ZU3lXTm9nVY Part 5 - Supabase Create Account, And React Hook Form - https://youtu.be/lu1JzyBfSOQ Part 6 - Expo Camera, Supabase Buckets and Image Upload - https://youtu.be/RmlekGDv8RU Part 7 - Expo Image Picker, Supabase Buckets and Image Upload - https://youtu.be/o-LR-rR5HAM Part 8 - Storybook - https://youtu.be/KRtCNDQFSCA * Part 9 - Supabase Realtime, ReactHookForm, Modal, FlatList, ImagePicker - https://youtu.be/NNtMJmw9ELI Links -------- - Sample Code: https://snack.expo.dev/@aaronksaunders/calm-beef-jerky - Swipeable Documentation: https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable

React Native Mobile WrapUp Tutorial: Supabase Realtime, ReactHookForm, Modal, FlatList, ImagePicker #reactnative #supabase #reacthookform #expo #flatlist #ImagePicker In the final video in the 9 part series, we put together everything we covered to show saving record to database, with reference to image uploaded using the ImagePicker to pick an image from the gallery or take a photo. We use reacthookform to validate the data and we use supabase realtime to get updates when the data in saved to the database Chapters -------------- 00:00 - Intro, Demo Of What We Are Building 02:51 - Setting Up Supabase, The SQL Commands 04:27 - Adding Supabase Functions To Supabase Service To Read/Write/Save Images 07:48 - Refactoring the Existing Components into Separate Files 11:58 - Creating Form Inside The Modal to Add Item With Image Using ReactHookForm 23:48 - Adding ImagePicker to Save URI informationTo Form 29:04 - Show Records In FlatList On HomeScreen 32:32 - Save Data Returned From The AddItemModal 36:12 - Finish The Render Function for the FlatList 38:07 - Integrating Supabase Realtime/Subscriptions To Update UI 40:13 - Render The Image Associated With Record From Supabase 42:06 - Changing the Code To Show Camera Use and Test On Device 47:32 - Final Test On Device Using Camera Video Series - React Native Refresher ------------------------------------------------------------ Part 1 - Intro to Working with React-Navigation - https://youtu.be/uqH00SEmKxg Part 2 - React Navigation Drawer Navigator And Authentication Flow - https://youtu.be/5e67b0PBcn4 Part 3 - Authentication And Supabase Login - https://youtu.be/aBuB-Q6vHDE Part 4 - Authentication, Supabase, And React Hook Form - https://youtu.be/ZU3lXTm9nVY Part 5 - Supabase Create Account, And React Hook Form - https://youtu.be/lu1JzyBfSOQ Part 6 - Expo Camera, Supabase Buckets and Image Upload - https://youtu.be/RmlekGDv8RU Part 7 - Expo Image Picker, Supabase Buckets and Image Upload - https://youtu.be/o-LR-rR5HAM Part 8 - Storybook - https://youtu.be/KRtCNDQFSCA * Part 9 - Supabase Realtime, ReactHookForm, Modal, FlatList, ImagePicker - https://youtu.be/NNtMJmw9ELI Links -------- - KeyboardAwareScrollView - https://www.npmjs.com/package/react-native-keyboard-aware-scrollview - ImagePicker - https://docs.expo.dev/versions/latest/sdk/imagepicker/ - ReactHookForm - https://react-hook-form.com/ - Supabase - https://supabase.io/

Running Basic Ionicframework React App on Android Emulator Using New 14 in MacBook Pro M1 chip - This thing is fast, and yes it works with Android Emulator despite the internet comments 🙌🏾 Check out my whole Ionic React Video Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl3OHIMYb1AzVG5wADUxOmUW Will be selling my older intel 16 in MacBook Pro, hit me if you are interested #reactjs #ionic #ionicframework #m1014 #android #androidemulator #shorts #short #youtubeshorts #youtube

Intro To MongoDB Realm with VueJS Ionic Framework And ViteJS Integrating Geospatial Queries In Google Maps #mongodb #vuejs #googlemaps #ionic in this video, we add a new collection to the database that contains the various locations of Tesla Superchargers I have used in DC region. We then do location-based queries to find the data and render it to a Google Map integrated into the VueJS Application. We do a simple proximity-based query looking for locations near a specific point, but we also do a more advanced query where we get the region displayed on the map and find all locations that are within the region. We are building the application using Vuejs, it is being packaged and developed using ViteJS and the UI Components are from Ionic Framework Part One - https://youtu.be/HIIqSWB_4G8 Part Two - https://youtu.be/Uq8DUd6jF2w * Part Three - https://youtu.be/kEqDNcvpAYw Helpful Links --------------------- Google Maps With VueJS & Ionic - https://www.youtube.com/playlist?list=PL2PY2-9rsgl3aJ8TKPwNiK1YInBcPtoRY Google Maps Javascript API - https://developers.google.com/maps/documentation/javascript/overview MongoDb Geospatial Queries - https://docs.mongodb.com/manual/geospatial-queries/ Newsletter ----------------- https://fiwic.ck.page/posts Courses & Content ------------------------------- 👉 udemy courses: https://www.udemy.com/user/aaronsaunders 👉 gumroad content: https://fiwic.gumroad.com/

Quick Intro to Storybook with React Native in A Simple Expo Application #storybook #reactnative #reactjs We start with a blank Expo application and show how to install and configure storybook with react-native to run on your mobile device. We then add a new story which is a calendar component that allows you to pick a date from the calendar and return the response to the parent of the component React Native Video Playlist ------------------------------------------- - https://youtube.com/playlist?list=PL2PY2-9rsgl0TTqJk3tCNJnBAjwHCjdYM Storybook Playlist ---------------------------- This playlist has a video for integrating storybooks into various #javascript frameworks #vuejs #reactjs #angular and #reactnative - https://buff.ly/3G0PJgm Links -------- - storybook https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/ - react-native calendars https://github.com/wix/react-native-calendars - code https://dev.to/aaronksaunders/quick-intro-to-storybook-with-react-native-ahf #react #native #mobileapps #reactnative #tutorial #calendar #javascript

Intro To MongoDB Realm with VueJS Ionic Framework And ViteJS, Refactoring Application State with Composition API #mongodb #vuejs #compositionapi #ionic 📺 See Part One Here - https://www.youtube.com/watch?v=HIIqSWB_4G8 The MongoDB Realm Web SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with MongoDB Realm services like Functions and authentication. The Web SDK supports both JavaScript and TypeScript applications. In this short video we are refactoring application state related to Realm and Mongodb into a separate composition function instead of using something like vuex for state manager. We start with the code from the previous video - https://www.youtube.com/watch?v=HIIqSWB_4G8 Currently, there is no solution for writing to the local database as a replacement for sqlite in an Ionic application. It looks like some people have started to build a plugin, but didn't get too far. We are building the application using Vuejs, it is being packaged and developed using ViteJS and the UI Components are from Ionic Framework Part One - https://youtu.be/HIIqSWB_4G8 * Part Two - https://youtu.be/Uq8DUd6jF2w Part Three - https://youtu.be/kEqDNcvpAYw Newsletter ----------------- https://fiwic.ck.page/posts Courses & Content ------------------------------- 👉 udemy courses: https://www.udemy.com/user/aaronsaunders 👉 gumroad content: https://fiwic.gumroad.com/ #ionic #capacitor #vuejs #ionicvue #mongodb #database #realm #composition #compositionapi #statemanagement