INTRODUCING
#THEFUTUREISWRITTENINCODE

How To Build A Nuxt 3 Ionic Capacitor Starter App, Supabase Setup and Authentication #nuxt3 #nuxt #supabase #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ Ionic Framework - An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. - https://ionicframework.com/ Supabase - Supabase is an open source Firebase alternative. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage. - https://supabase.com/ This is a series of videos walking you through how to get started with building a mobile application with Nuxt 3 and Ionic Capacitor. In this video, we add Supabase Account Creation and Authentication to the project and deploy it to a mobile device We also touch on the following Nuxt 3 Topics - composables - https://v3.nuxtjs.org/guide/directory-structure/composables/ - plugins - https://v3.nuxtjs.org/guide/directory-structure/plugins - configuration - https://v3.nuxtjs.org/api/configuration/nuxt.config - middleware - https://v3.nuxtjs.org/guide/directory-structure/middleware Timestamps -------------------- 00:00 intro 01:43 Supabase Setup 05:00 Nuxt Config Changes to Access API Keys 06:50 Create Nuxt Plugin To Initialize Supabase Client 09:48 Create Composable to Access Supabase Client In App 13:18 Add Login Screen and Supabase Sign In API Call 23:05 Add Create Account Screen and Supabase Sign Up API Call 29:00 Turn Off Email Verification in Supabase, Missed This Earlier 32:58 Protected Routes Using Nuxt 3 Middleware 39:26 Ran Into Error With Provide and Inject 45:45 Deploy On Mobile Blog ------- https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0 Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3 Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps #supabase https://www.clearlyinnovative.com

How To Build A Nuxt3 Ionic Capacitor Starter App #nuxt3 #vuejs #ionic #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ Ionic Framework - An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. - https://ionicframework.com/ This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we add Ionic Vue Components to the Application to give it the mobile look and feel and then deploy to IOS. Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-2 Blog Post --------------- [Comming Soon] Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps https://www.clearlyinnovative.com

How To Build A Nuxt3 Ionic Capacitor Starter App #nuxt3 #vuejs #ionic #capacitor Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/ Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/ This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we create the basic project and then using the Ionic VS Code Extension, add IOS and Android libraries so we can deploy the application on mobile devices. In the next part of the video we will add server routes to nuxt and deploy a backend that can be connected to the mobile application for database access. Videos In Series -------------------------- Part 1 - https://youtu.be/tDYPZvjVTcc Part 2 - https://youtu.be/jwntqsrTXc4 Part 3 - https://youtu.be/SgnNFiMlHJE Source Code -------------------- https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app Blog Post --------------- https://dev.to/aaronksaunders/how-to-build-a-nuxt3-ionic-capacitor-starter-app-4d3k Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #vuejs #nuxt #nuxtjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps https://www.clearlyinnovative.com

Ionic Framework e2e Testing React Application Using Appium and WebdriverIO #ionic #react #webdriverio #appium Just a quick walkthrough video explaining the starter project for an Ionic Framework & Capacitor App written in reactjs demonstrating end to end testing Looking to integrate e2e testing an ionic-framework application and the sample provided by Ionic is written in Angular and it is based on Cordova and not capacitor so I have started this project to figure things out What's Here - sample based on the list template provided by ionic - source code is in react js - tests currently work in the android emulator, ios emulator and in the web browser - This is still a work in progress but it is based on the latest versions of Ionic and Capacitor so it should get on started better than the other sample The project hasn't been cleaned up, there are still some artifacts from the original Ionic Project Original Ionic Code - https://github.com/ionic-team/ionic-e2e-example Appium - https://appium.io/ WebdriverIO - https://webdriver.io/docs/api Source Code -------------------- https://github.com/aaronksaunders/ionic-e2e-react-webdriverio-appium

Using Ionic VS Code Extension To Add Capacitor To Vite ReactJS Project #ionic #capacitor #vite #reactjs Simple video walkthrough as I try to connect the Ionic VS Code Extension to add native functionality to a Vite ReactJS Application. I wanted to show how you can create native applications from web applications using Ionic Framework Capacitor. I did find some challenges, issues when using the extension. I will open issues in the GitHub repo and let you all know what I found from this exercise. A Visual Studio Code Extension for Ionic - Ionic Blog - https://ionicframework.com/blog/a-visual-studio-code-extension-for-ionic/ Original video "ViteJS, Ionic Framework Beta v6, ReactJS And Capacitor Mobile Device Deployment Tutorial" - https://youtu.be/uVjPBiNz5yk Chapters --------------- 00:00 - Introduction 01:56 - Run On The Web 05:06 - Debug On Web With Breakpoint 08:12 - Build App For Distribution 11:40 - Run On IOS 15:20 - Edits So Far To Get Things To Work 16:06 - Development Workflow With Plugin, Issues with Sync? 20:20 - Final Thoughts And Summary Things I Discovered ------------------------------- - how to debug on a native device - could not configure the build directory through the UI - why do I always have to specify the device when running the app - why does sync fail, it is missing some property - can we integrate build and run on device into one command Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #reactjs #javascript #ionic #ionicframework #capacitor #nativeapps #mobileapps https://www.clearlyinnovative.com

Remix Authentication Using Remix-Auth Package #remix #remixrun #reactjs This is a walkthrough of a sample application using the remix-auth package which is a passport-like framework for simplifying authentication of your remix application using specific packaged strategies. In this example, I am using the Form Strategy to show a simple login flow Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, What is Remix Auth 01:20 - Sample App Flow 03:10 - Walking through the code 04:10 - Checking if a user is authenticated, in protected pages 04:42 - Getting session information from the authenticator, in protected pages 05:30 - Logging out, session cleanup 06:10 - Getting Errors when logging In 06:50 - Logging In using the authenticator 08:10 - Setting Up The Authenticator 09:59 - Throwing Errors When Authenticating, Returning Successful Session Info 12:10 - Why this is awesome 13:10 - App Flow Review 16:01 - Redirecting from the login page if a session already exists 18:28 - Wrap Up Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Remix Auth - https://github.com/sergiodxa/remix-auth Remix Auth Form Strategy - https://github.com/sergiodxa/remix-auth-form Source Code - https://github.com/aaronksaunders/remix-auth-form-strategy Remix Playlist - https://buff.ly/3GuKVPS #reactremix #remixrun #authentication #remixauth #remixformstrategy #reactjs

Intro To ReactFire v4 - Login, Logout Create Account And Protected Routes #reactjs #reactfire #firebase #ionic #ionicframework This is a quick walkthrough of a code example using ReactFire v4 in an application. The application supports login, logout, create an account, and protected routes. We also walk through two approaches for protecting routes since the AuthCheck component that existed in v3 no longer exists in v4 or ReactFire. This is an updated version of a video I did over a year ago that covered v3 of ReactFire. The source code for this video and the two approaches for protecting routes is available in my git hub repo, links are included below For the UI of the application, I am using Ionic Framework, but the react code should work in any reactjs application Node Version Issue When Using Emulator - https://stackoverflow.com/questions/71189584/issue-starting-firebase-emulator-node-17 ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro 02:18 - Discuss Issue with Firebase Emulator and setting it up in code 04:00 - Setting Up ReactFire with Appropriate Providers 06:32 - Authentication, PrivateRoute vs AuthWrapper using signInCheck 09:05 - Login 10:39 - Create Account 13:22 - Display Current User & SignOut 14:40 - Wrap Up Links ---------- Previous Video - https://youtu.be/xOVqoVuY-5M Source Code - https://github.com/aaronksaunders/quick-intro-reactfire-v4/tree/main ReactFire - https://github.com/FirebaseExtended/reactfire ReactFire Overview - https://firebaseopensource.com/projects/firebaseextended/reactfire/ Firebase Emulator - https://firebase.google.com/docs/rules/emulator-setup 💥 Additional Content ----------------------------------- 🎓 Udemy Courses - https://www.udemy.com/user/aaronsaunders/ 🎓 Gumroad Courses/Content - https://www.gumroad.com/fiwic 💥 Social Media ------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders 🌐 www.fiwic.com

MongoDB Realm and React Native Getting Started - Using the Realm React Native Expo Started Template #mongodb #realmdb #reactnative Based On Expo Template Realm React Native Starter Application Simple Expo application to quickly get started with Realm, based on the starter template that is provided by Realm Timestamps -------------------- 00:00 - Intro, Overview 02:01 - Application Demo 05:35 - Walkthrough the Application Code 06:55 - Project Schema 07:27 - Task Schema and Relationship 15:22 - Checking The List For Changes ## 📝 Application Notes - Added relationships so there is a project and a project has multiple tasks associated with it - added an additional screen which lists the Projects - Added React Navigation so that we could move between the screens - Added a new screen that lists all of the Projects that are in the application - Added the project name to the task list - Added the number of tasks associated with the Project to the project list - Added try catch block to capture errors from the `realm.write` blocks - Added code to delete the child `Task` objects of the `Project` - I think that the introduction of the Realm Context is missing some helpful support documentation and links along with how to use the new `useQuery` function. - I also think that the documentation on relationships is extremely lacking and I did my best to create something that will show it better See the first video here - https://youtu.be/1Ys-dKX_OyU ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links -------- - React Native Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl1B3ydONg0RqjOM9-0oS0cm - Source Code https://github.com/aaronksaunders/ReactNativeRealm-Expo-Template - Realm Documentation https://docs.mongodb.com/realm/ - Vue JS Realm Series https://www.youtube.com/watch?v=HIIqSWB_4G8&t=1726s

Intro To Remix - Working with Nested Routes and Parameterized Routes #remix #remixrun #reactjs This video will walk through building an app that shows a list of teams and then a detailed view of each team. On that page, we will have a list of players, which when clicked will show a detailed view of the player. The parent view/container will hold the navigation. We also show how to use the OutletContext that is provided for you by react-router This will show how one can use nested routes and parameterized routes in remix Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, Video Overview What 01:09 - Starting with redirecting default route teams.tsx and rendering index.tsx in the teams directory 08:00 - Showing the list of teams and using the OutletContext 12:45 - Teams detail page using a parameterized route, and the information from the context to render a specific team and the teams players 21:34 - Rendering a player detail page using parameterized route, and outlet context 26:40 - Final Review of what we accomplished Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Source Code - https://stackblitz.com/edit/node-6sjyfk Remix Playlist - https://buff.ly/3GuKVPS Outlet Context React Router - https://reactrouterdotcom.fly.dev/docs/en/v6/api#useoutletcontext #reactremix #remixrun #sqlite #prisma