INTRODUCING
#THEFUTUREISWRITTENINCODE

React Native Mobile Apps, Working With React Navigation Auth, Supabase And React Hook Form Pt 2 #reactnative #supabase #reacthookform In this video we add a form for login and use React Hook form to manage the form and yup for form validation. We use the form data to call the Supabase signIn function to authenticate the user. There are a few special libraries from npm that are used to make all this work and we cover them all in the video Join with me on my journey of refreshing my memory with React Native and building mobile applications Video Series - React Native Refresher ------------------------------------------------------------ Part 1 - https://youtu.be/uqH00SEmKxg Part 2 - https://youtu.be/5e67b0PBcn4 Part 3 - https://youtu.be/aBuB-Q6vHDE ** Part 4 - https://youtu.be/ZU3lXTm9nVY Chapters -------------- 00:00 - Introduction 00:23 - Fixing Up Login Screen, Using React Hook Form and Yup 11:45 - Making API Call To Supabase For Login 21:20 - Wrap Up And Whats's Next Links ---------- - https://supabase.io/ - https://react-hook-form.com/ - https://www.npmjs.com/package/react-native-dotenv - https://www.npmjs.com/package/@react-native-async-storage/async-storage - https://reactnavigation.org/docs/drawer-navigator - https://reactnavigation.org/docs/getting-started - https://docs.expo.dev/get-started/create-a-new-app/ #reactjs #reactnative #learning #reactnavigation #authentication #login #createaccount #expo

Getting Started with ViteJS, Ionic Framework Beta v6, ReactJS And Capacitor #ionic #vitejs #reactjs #capacitorjs Since Ionic has announced the beta for v6, I wanted to see if I can start using Ionic with ViteJS. Even if you don't use the Ionic ReactJS components, this video shows you how you can deploy you ViteJS application to mobile devices In this video, the approach I took is to follow the instructions for creating a ReactJS project in ViteJS and then add in the Ionic packages with npm and then pasted in the required styles and it worked!! Chapters --------------- 00:00 - Intro 00:45 - Start basic Vite App 03:18 - Add Ionic React Components 04:51 - Deploy on Device Using Ionic Capacitor 08:45 - Deploy Using Ionic Capacitor Live Reload 10:43 - Wrap Up ViteJS Playlist - https://www.youtube.com/watch?v=uVjPBiNz5yk&list=PL2PY2-9rsgl0X4kLC_NZREKAhZWzN9pxs&index=1 Source ----------- - https://dev.to/aaronksaunders/vitejs-ionic-framework-beta-v6-reactjs-and-capacitor-mobile-device-deployment-53e3 Links --------- - Ionic V6 Beta Announcement - https://ionicframework.com/blog/annou... - ViteJS - https://vitejs.dev/

React Native Mobile Apps, Working With React Navigation Authentication And Supabase Login Pt 1 #reactnative #supabase #authentication In this video we build upon the last and add Supabase to the project. We implement an authentication check for the application when it first starts up and redirects to the un protected pages if there is no session and then to the protected pages if there is a session. We also added the supabase signOut function to show the app redirecting back to the unprotected AuthenticationSack once the session was gone. Join with me on my journey of refreshing my memory with React Native and building mobile applications Video Series - React Native Refresher ------------------------------------------------------------ Part 1 - https://youtu.be/uqH00SEmKxg Part 2 - https://youtu.be/5e67b0PBcn4 ** Part 3 - https://youtu.be/aBuB-Q6vHDE Part 4 - https://youtu.be/ZU3lXTm9nVY Chapters -------------- 00:00 - Introduction 00:52 - Setting Up Supabase Project - using react-native-dotenv 02:10 - Creating Supabase service file to hold client information - using AsyncStorage 07:23 - Getting Supabase Session Information When Application Starts 11:10 - Using Supabase in Drawer/SideMenu for Displaying Email and Accessing the Logout Functionality 13:00 - Wrap Up and Whats Next LINKS ---------- - https://supabase.io/ - https://www.npmjs.com/package/react-native-dotenv - https://www.npmjs.com/package/@react-native-async-storage/async-storage - https://reactnavigation.org/docs/drawer-navigator - https://reactnavigation.org/docs/getting-started - https://docs.expo.dev/get-started/create-a-new-app/ #reactjs #reactnative #learning #reactnavigation #authentication #login #createaccount #expo

Working With react Navigation Drawer Navigator & Authentication Flow #reactnative #reactnavigation #authentication In this video we create a custom drawer with header and logout button. We add an Authentication Navigation Stack for managing protected screens and public screens. Finally we prepare the code for the next part where we introduce Supabase for Authentication and user management and React Hook Form with Yup for validation Join with me on my journey of refreshing my memory with React Native and building mobile applications Video Series - React Native Refresher ------------------------------------------------------------ Part 1 - https://youtu.be/uqH00SEmKxg ** Part 2 - https://youtu.be/5e67b0PBcn4 Part 3 - https://youtu.be/aBuB-Q6vHDE CHAPTERS ------------------ 00:00 - Introduction, What We Are Doing 02:24 - Custom Drawer Content 09:53 - New Stack For User Authentication 13:52 - Adding State Variable To Track Authentication State 14:53 - Wrap Up and Whats Next - Supabase Integration For Authentication LINKS ---------- - https://reactnavigation.org/docs/drawer-navigator - https://reactnavigation.org/docs/getting-started - https://docs.expo.dev/get-started/create-a-new-app/ #reactjs #reactnative #learning #reactnavigation #authentication #login #createaccount #expo

SEE FULL VIDEO - https://www.youtube.com/watch?v=m_K4scUBGyE SEE BLOG POST - https://dev.to/aaronksaunders/using-vue-query-hooks-for-firebase-database-and-image-storage-mutations-and-queries-in-vuejs-1nc9 I love ReactQuery so I thought it would be great to checkout Vue Query and put together a quick code walkthrough of a simple project. I used Firebase because I already had a project in place, but it could have been any database provider, Supabase might be next !! Vue Query: Fetch, cache, and update server data using queries and mutations | VueJS Tutorial #learning #youtubeshorts #shorts #vuejs

Using ViteJS Vue Query Hooks For Firebase Database and Image Storage, Mutations and Queries in VueJS #firebase #vuequery #vite Vue Query package provides hooks for fetching, caching and updating asynchronous data in Vue. Based on react-query. All main concepts are inherited from the main package. Please also check the react query docs I love ReactQuery so I thought it would be great to checkout Vue Query and put together a quick code walkthrough of a simple project. I used Firebase because I already had a project in place, but it could have been any database provider, Supabase might be next !! Vue Query: Fetch, cache, and update server data using queries and mutations | VueJS Tutorial 00:00 Intro 01:32 Setting Up Vue Vite Project 07:40 Saving Firebase Credentials in .env 11:20 Vue Query and useQuery to List Firebase Collection 18:02 Vue Query and useQuery to Get Document From Firebase Collection 24:32 Vue Query and useMutation to Add Document To Firebase Collection and Firebase Storage 34:00 Vue Query and useMutation to Delete Document From Firebase CollectionStorage 38:00 Wrap Up LINKS ---------- - https://github.com/DamianOsipiuk/vue-query - https://react-query.tanstack.com/overview - https://firebase.com #firebase #vuequery #vite #vue #vuejs

#reactjs #reactnative #learning #reactnavigation #drawernavigation Working with React-Navigation DrawerNavigator and StackNavigator created a sample template application showing how to use a Drawer Navigator with Stack Navigator in React Native. In this example I am used the latest version of react navigation for react-native. Walking through the code explaining what I have written instead of typing and talking, please let me know your thoughts. Join with me on my journey of refreshing my memory with React Native and building mobile applications Video Series - React Native Refresher ------------------------------------------------------------ ** Part 1 - https://youtu.be/uqH00SEmKxg Part 2 - https://youtu.be/5e67b0PBcn4 Part 3 - https://youtu.be/aBuB-Q6vHDE CHAPTERS ------------------ 00:00 Introduction, What We Are Doing 01:16 React Navigation Overview, Application Stack Graphic 02:35 Brief Overview of Expo, See Link Below For More 03:36 Beginning Of The Coding 09:53 Wrap Up LINKS ---------- - https://reactnavigation.org/docs/drawer-navigator - https://reactnavigation.org/docs/getting-started - https://docs.expo.dev/get-started/create-a-new-app/ SOURCE CODE ------------------------- - https://snack.expo.dev/@aaronksaunders/ludicrous-bagel #reactjs #reactnative #learning #reactnavigation

Link To Full Video - https://youtu.be/uqH00SEmKxg Working with React-Navigation DrawerNavigator and StackNavigator created a sample template application showing how to use a Drawer Navigator with Stack Navigator in React Native. In this example I am used the latest version of react navigation for react-native. Walking through the code explaining what I have written instead of typing and talking, please let me know your thoughts. Join with me on my journey of refreshing my memory with React Native and building mobile applications #reactjs #reactnative #learning #youtubeshorts #shorts #javascript #tutorials

React Hook Form and Ionic Framework together again, I use this combination all the time, check out my other video on building mobile apps with reactjs ionic framework and react hook form #ionic #reactjs #reacthookform