INTRODUCING
#THEFUTUREISWRITTENINCODE

Using Supabase with React Router v7 Framework #supabase #reactrouter #authentication Description: 🔥 Learn how to build a production-ready React application with server-side rendering using React Router v7 and Supabase! In this tutorial, we'll cover: ✨ Server-side rendering with React Router v7 🔐 User authentication with Supabase 📝 Complete CRUD operations 🎨 Styling with TailwindCSS 🚀 Hot Module Replacement ⚡ TypeScript implementation 🔄 Data loading and mutations 🔗 Helpful Links ================= Supabase SSR - https://supabase.com/docs/guides/auth/server-side/creating-a-client React Router v7 - https://reactrouter.com/home #ReactJS #Supabase #WebDevelopment #Programming #FullStack #JavaScript #TypeScript #ReactRouter #WebDev #CodingTutorial

You Won't Believe How Easy React Native Firebase Auth is with Expo Router! #firebase #reactnative #expo Hey there! In this video, I walk you through setting up Firebase and Expo authentication for a mobile app. We cover Firebase Auth setup, login/logout functionalities, and creating user accounts. I showcase the app layout, context creation, and integrating Tailwind CSS. Follow along to understand the basics and get started with authentication! ⏱️ Timestamps ================= 00:00 - Introduction 01:23 - Quick App Demo 02:18 - Following Approach From Documentation 03:01 - Code - Application Context 05:16 - Code - Firebase Config, Using Web Client API 06:10 - Code - Metro Config Changes for Firebase and Nativewind 07:13 - Code - Firebase Service, Using Web Client API 07:55 - How Auth Guard is Working With _layout file 09:20 - Code - (app)/_layout and (app)/index 10:14 - Code - Create Account, Sign Up, Sign In 11:40 - Code - Drawer with Nested Tabs 14:30 - Issues with Version Mismatch 15:30 - Wrap Up 🔗 Helpful Links ================= Expo Documentation - https://docs.expo.dev/ Firebase Documentation - https://firebase.google.com/docs NativeWind Documentation - https://www.nativewind.dev/getting-started/expo-router Expo Router Documentation - https://docs.expo.dev/router/introduction/ 🖥️ Source Code ================= - https://github.com/aaronksaunders/firebase-exporouter-app

Quick tips on my approach for protecting routes in react router v6, remember the loaders fire off and run in parallel so you need to protect all of the router loaders or you will have problems. I do it with a higher order function The logic flow is straightforward: Check for token If no token → redirect to login If token exists → run the original loader function The output of this function will either be: A redirect response (when no token is found) Or whatever response the original loader function returns (when token exists) Source Code - https://github.com/aaronksaunders/rrv6-auth-app-1 #reactrouterv6 #reactrouter #authentication #reactjs #javascript #shorts #shortvideo #ytshorts

React Router v7 + Remix - An Authentication Example #reactrouter #remix_run #reactjs Remember v7 is pre-release and on the dev branch I had an issue in the full-length video where the routing was not working correctly and was unable to get type information from actionData, loaderData and route parameters. Thanks to the community, someone stepped up and submitted two PRs which and merged immediately and my problems were solved React Router v7 with Supabase Video - https://youtu.be/thysQ_FSWfQ This project demonstrates a basic authentication system using React Router v7, showcasing its new features and file-based routing system. The real focus is walking through the app to show how similar it is to building a remix application in the past, it looks like the migration process will not be so bad 🔗 Helpful Links ================= React Router v7 Doc - https://reactrouter.com/dev/guides 🖥️ Source Code ================= UPDATED - Authentication Example - https://github.com/aaronksaunders/react-router-v7-auth-app-1 App - https://github.com/aaronksaunders/react-router-v7-vite-drizzle-1

React Router v7 + Remix - An Authentication Example #reactrouter #remix_run #reactjs Remember v7 is pre-release and on the dev branch This project demonstrates a basic authentication system using React Router v7, showcasing its new features and file-based routing system. The real focus is walking through the app to show how similar it is to building a remix application in the past, it looks like the migration process will not be so bad React Router v7 with Supabase Video - https://youtu.be/thysQ_FSWfQ ⏱️ Timestamps ================= 00:00 - Introduction 01:05 - Check Out first Sample Project 01:40 - App In This Video 02:20 - Starting the App and Demo 03:10 - Looking At the Source Code 04:05 - Home Page 06:05 - Login Page 08:40 - session.server Library, focuses on session management for login 10:55 - Logout Page/Route 12:45 - Thoughts So Far On Rebranding 🔗 Helpful Links ================= React Router v7 Doc - https://reactrouter.com/dev/guides 🖥️ Source Code ================= Authentication Example - https://github.com/aaronksaunders/react-router-v7-auth-app-1 App - https://github.com/aaronksaunders/react-router-v7-vite-drizzle-1

First Look at the Alpha Version of Tanstack Start Authentication, Learn Along With Me #tanstack #javascript #prisma3d Get a first look at Tanstack Start Authentication Example integrated with Prisma ORM in this video. Learn along with me about the Tanstack Start fullstack framework, router, and how to start creating an application demonstrating Login, LogOut and Account Creation. --- TANSTACK START: Full-stack React framework powered by TanStack Router Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router, Vinxi, and Vite. Ready to deploy to your favorite hosting provider. -- 📺 Video Series ================= Getting Started - https://youtu.be/oOqjZWpb-EI Authentication - https://youtu.be/kpjU2nMbZdw Source Code ================= 🖥️ https://github.com/aaronksaunders/tanstack-start-auth-1 ⏱️ Timestamps ================= 00:00 - Introduction, starting with doc examples 02:17 - Walkthrough of App 04:00 - Code - Looking at Prisma Configuration 05:20 - Code - __root.tsx, Getting Session Information 08:17 - Code - index.tsx, Basic Home Page when not Authenticated 09:20 - Code - LoginPage and LoginComponent 14:30 - Code - _authed and whats going on with the file and directory 17:32 - Code - AuthHomePage, when you are logged in 19:36 - Code - Create Account, Server Function, Zod Integration 24:42 - Wrap Up, What's Next 🔗 Helpful Links ================= - TanStack Start https://tanstack.com/start - TanStack Router https://tanstack.com/router - Prisma ORM https://www.prisma.io/

First look at the Alpha Version of Tanstack Start, Learn Along With Me #tanstack #drizzle #javascript Get a first look at Tanstack Start integrated with Drizzle ORM in this video Learn along with me about the Tanstack Start fullstack framework, router, and how to start with the alpha version. I am looking at the Router integration and the Server Functional calls and building the app for SSR with Vinxi --- TANSTACK START: Full-stack React framework powered by TanStack Router Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router, Vinxi, and Vite. Ready to deploy to your favorite hosting provider. -- Source Code ================= https://github.com/aaronksaunders/tanstack-start-drizzle-app Video Series ================= Getting Started - https://youtu.be/oOqjZWpb-EI Authentication - https://youtu.be/kpjU2nMbZdw Timestamps ================= 00:00 - Introduction 01:50 - Looking At The App 02:45 - Code - Drizzle Integration 03:51 - Code - Default Files from Tanstack Start 05:00 - Code - Looking at A Route 06:34 - Code - Server Functions 08:43 - Code - Nested Routes and Route Params 11:14 - Code - Form Mutation on a Route 12:35 - Code - Building for SSR Helpful Links ================= - TanStack Start https://tanstack.com/start - TanStack Router https://tanstack.com/router - Drizzle ORM https://orm.drizzle.team/ Remix Project Mentioned in Video - https://github.com/aaronksaunders/react-router-v7-vite-drizzle-1

Testing out the new React Router v7, ie next version of Remix using Vite by trying to build a simple application. This is a contact management application built with React Router and Drizzle ORM. It allows users to view, add, edit, and delete contacts. FULL SOURCE CODE - https://github.com/aaronksaunders/react-router-v7-vite-drizzle-1 #reactrouter #vitejs #reactjs

Basic To-Do App using AngularFire v17 Compat #angular #angularfire #firebse Hey there! I've been busy at work and needed a break, but I'm back with a video on creating a basic to-do app using AngularFire v17 compat. In this video, I'll show you how to use AngularFire with Ionic Framework and use compatibility mode to keep your API consistent with v6. I'll also cover observables, even though they're not my favorite. The app allows you to add, edit, and delete tasks. Check it out if you're interested in learning more about AngularFire and creating a to-do app with Angular! Source Code Included - https://github.com/aaronksaunders/ionic-angularfire-compat-things 💥 Chapters -------------------------- 00:00 Introduction 02:40 App Demo 04:25 Thing Service 06:24 Deleting and Updating 08:16 Authentication 10:57 Thing List Component 13:04 Modal Setup Support Create and Update 15:44 Modal Confirmation Action 💥 Links -------------------------- - AngularFire https://github.com/angular/angularfire - AngularFire Compat - https://github.com/angular/angularfire/tree/master/samples/compat - Firebase https://firebase.google.com/ - Ionic https://ionicframework.com/docs/angular/overview 💥 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