INTRODUCING
#THEFUTUREISWRITTENINCODE

In this video series, we will set up PayloadCMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. In this video, Part 2, we will handle checking for existing user's session and discussing the payload-token cookies that is being used. PayloadCMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Coming Soon - creating a user/customer account Part 4 - Coming Soon - Migrating to the mobile app, managing JWT for authenticated access 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 Introduction - Working with http-only cookies, getting current user 01:25 Modifying Code in Home Page to Check for User 05:30 Checking onMount in HomePage.vue for the user 10:21 Adding Credentials Included to Ensure we get the cookies/credentials 11:48 Checking for Cookie in Browser's Chrome Developer Tools 13:22 Setting CORS and CSRF in payload.config.ts 💥 Links -------------------------- - PayloadCMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - Coming Soon 💥 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

Getting Started with PayloadCMS & Vue JS - Free, Open Source, Typescript, Extensible - with paid cloud option In this video series, we will set up PayloadCMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can login using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework. PayloadCMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms Ionic Framework - The mobile SDK for the Web. An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework The Series ========== Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - https://youtu.be/TDd9EedIrGY?si=ls9YV1s49MSqZS4p Part 2 will handle checking for existing user's session, and discussing cookies - https://youtu.be/Tj7eM7tEiwM Part 3 - Coming Soon - creating a user/customer account Part 4 - Coming Soon - Migrating to the mobile app, managing JWT for authenticated access 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Introduction 01:23 - About PayloadCMS 04:22 - Project Setup and Installation 10:30 - Launching Admin Console - REST API, GraphQL API Exposed 13:00 - Looking At A Collection from the Source Code - Users.ts 14:00 - Create New Collection - Customers.ts 19:02 - Looking In the MongoDB at our Collections 19:41 - About the Vue Application, Ionic Framework and Mobile App 20:20 - Client/Website/Mobile App Project Setup 22:40 - Walkthrough of the template App Created 23:09 - Adding Routes for Create Account & Login 23:40 - Creating SignIn and SignUp Pages and Explaining UI Components 24:45 - The SignIn Page UI / template section 26:50 - The SignIn Page Code / script section 30:20 - PayloadCMS Documentation - Login 31:44 - Integrating PayloadCMS Login REST API 35:47 - Resolving CORS Issues Using payload.config.ts 37:30 - Login Working, AuthToken and Cookie 💥 Links -------------------------- - PayloadCMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass - Ionic Framework - https://ionicframework.com/ 🚀 SOURCE CODE - https://github.com/aaronksaunders/payload-vue-ionic-video 🚀 BLOG POST - https://dev.to/aaronksaunders/getting-started-with-payloadcms-vue-js-46mn 💥 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

#nuxtjs #typescript #trpc Build a full-stack typescript nuxt application without the boilerplate code of tRPC using the nuxt-remote-fn module we will build a simple nuxt application to save and retrieve data from a sqlite database through a typesafe server-side API. ## Links - FULL VIDEO - https://youtu.be/37VR1hfHq1o - BLOG - https://dev.to/aaronksaunders/full-stack-nuxt-typescript-app-without-trpc-3io7 - CODE - https://github.com/aaronksaunders/remote-fn-nuxt-youtube-app - nuxt-remote-fn - https://github.com/wobsoriano/nuxt-remote-fn - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3

A tRPC Alternative for a Nuxt FullStack Typesafe Application #nuxt #vue #trpc Build a full-stack typescript nuxt application without the boilerplate code of tRPC using the nuxt-remote-fn module we will build a simple nuxt application to save and retrieve data from a sqlite database through a typesafe server-side API. 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - introduction 02:08 - Project Setup 03:20 - Create and Test A Simple Remote Function 06:50 - More Complex Example 07:25 - Create SQLite Service For Database Interaction 08:18 - Create Remote Function to Add To Database 12:41 - Create Remote Function to Query Database 14:57 - Using useAsyncData when Querying Database on Client 17:55 - Getting Typed Results from Remote Function to Query Database 20:20 - Demonstrating Type safety of Remote Function to Add To Database 23:30 - Handling Error from Remote Functions 26:40 - Wrap Up 💥 Links -------------------------- - Nuxt tRPC Video Series - https://www.youtube.com/watch?v=XX-4A4xkRB8 - blog - https://dev.to/aaronksaunders/full-stack-nuxt-typescript-app-without-trpc-3io7 - nuxt-remote-fn - https://github.com/wobsoriano/nuxt-remote-fn - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3 💥 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 #typescripttutorial #nuxtjs #typescript #sqlite #sqlite3 #bettersqlite

Getting Started with tRPC Nuxt Part 3 - Finalizing Database Queries and Adding Nuxt UI - Build A Full-Stack Typescript Application #tRPC #nuxt #vuejs tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. Experience the full power of TypeScript inference to boost productivity for your NUXT full-stack application. 💥 This is the third video in the series ---------------------------------------------------------------- Part One - https://youtu.be/XX-4A4xkRB8 Part Two - https://youtu.be/qkH-nxVglXY Part Three - https://youtu.be/5jIPf5naq38 In this video, we are adding a UI for the application using Nuxt UI and connecting the application to the tRPC API for creating new thought entries using NuxtUI Form and displaying query of all thoughts using Nuxt UI Data Table 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Introduction 01:06 - Cleanup From Last Video - Setting Appropriate Type On Return Value 02:00 - Setup for Nuxt UI In Project 03:04 - UContainer Integration 03:50 - UTable Integration, Data Table for List Of Thoughts 06:08 - UCard 07:25 - UForm Integration, Form for Adding Thoughts 12:59 - USelect - Provide the predefined moods in the form 16:00 - Using Information From Form to Make Call Using tRPC to Save New Thought 21:12 - Update Data Table using refresh() from the useQuery Call 22:25 - UModal - Creating A Modal Alert 29:56 - Wrap Up 💥 Links -------------------------- - trpc-nuxt - https://trpc-nuxt.vercel.app/ - trpc - https://trpc.io/ - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3 - Nuxt UI - https://ui.nuxtlabs.com/getting-started 💥 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

Getting Started with tRPC Nuxt Part 2 - Adding Database - Build A Full-Stack Typescript Application #tRPC #nuxt #vuejs tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. Experience the full power of TypeScript inference to boost productivity for your NUXT full-stack application. 💥 This is the second video in the series ---------------------------------------------------------------- Part One - https://youtu.be/XX-4A4xkRB8 Part Two - https://youtu.be/qkH-nxVglXY Part Three - https://youtu.be/5jIPf5naq38 In this video, we are separating routers and adding SQLite, Better SQLite 3, Database to the application to show access to context and simple querying. 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Introduction 00:20 - Separating Routers 05:42 - Add Database To Context 06:50 - Install Better SQLite and Setup Database Table 08:55 - See Database In Route/Query Context 09:30 - Create Route/Endpoint For Adding Thought to Database 18:40 - Fix Error on How I was Importing better-sqlite3 20:42 - Create Route/Endpoint For Listing Thoughts From Database 23:30 - Wrap Up / What's Next 💥 Links -------------------------- - trpc-nuxt - https://trpc-nuxt.vercel.app/ - trpc - https://trpc.io/ - better-sqlite-3 - https://github.com/WiseLibs/better-sqlite3 SEE SOURCE CODE IN BLOG POST - https://dev.to/aaronksaunders/build-a-full-stack-typescript-application-with-nuxt-and-trpc-4kdd 💥 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

Getting Started with tRPC Nuxt Part 1 - Build A Full-Stack Typescript Application #tRPC #nuxt #vuejs Move Fast and Break Nothing. End-to-end typesafe APIs made easy. Experience the full power of TypeScript inference to boost productivity for your NUXT full-stack application. Walkthrough of getting a Nuxt 3 application up and running with tRpc using the trpc nuxt module. 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 This is the first video in the series ---------------------------------------------------------------- Part One - https://youtu.be/XX-4A4xkRB8 Part Two - https://youtu.be/qkH-nxVglXY Part Three - https://youtu.be/5jIPf5naq38 💥 Chapters -------------------------- 00:00 - Introduction 02:09 - Setting Up Project 03:35 - Project Configuration / Adding Boilerplate Files From tRPC 07:42 - Setting Up API Routes for tRPC 10:01 - Creating the Plugin for tRPC 11:42 - Nuxt server API catch-all route for tRPC 13:00 - Create Basic UI to Get Results From "hello" route 17:13 - Wrap Up and References 💥 Links -------------------------- - SOURCE CODE - https://github.com/aaronksaunders/trpc-nuxt-video-app - trpc-nuxt documentation - https://trpc-nuxt.vercel.app/ - trpc documentation - https://trpc.io/ 💥 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

Expo Router Tabs with Supabase Authentication Flow #reactnative #supabase #expo Learn to use Supabase with Expo Router by building a simple authentication flow based on a Tab-based application template. In this tutorial, we’ll be using Expo, Supabase, and Expo Router. I stuck to the basics like the other related videos in this series so you can build your own idea based on this video FULL Video - https://youtu.be/6IzrH-1M0uE Series Playlist - https://www.youtube.com/playlist?list=PL2PY2-9rsgl3fgR9Nh4Ee_U2xyb3RLhQd

Expo Router Tabs with Supabase Authentication Flow #reactnative #supabase #expo Learn to use Supabase with Expo Router by building a simple authentication flow based on a Tab-based application template. In this tutorial, we’ll be using Expo, Supabase, and Expo Router. I stuck to the basics like the other related videos in this series so you can build your own idea based on this video 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Intro 01:18 - Review of Tabs Sample App 03:26 - Installation of NPM Packages, and Project Setup 05:22 - Creating Supabase Client 08:43 - Index Page with control flow to Either Tabs or Login Page 09:11 - Creating Auth Segment and Associated Auth Pages 19:40 - Listen for auth State and Check For Existing Session When App Starts 21:55 - Show Existing User & Logout on Settings Tab 28:34 - Final Review of Approach 💥 Links -------------------------- - Expo Router Tabs Video - https://youtu.be/ZCj85YJZF04 - Expo Router Doc - https://docs.expo.dev/routing/installation/#manual-installation - Supabase Blog - https://supabase.com/docs/guides/getting-started/tutorials/with-expo - Expo Router Supabase Authentication Flow and Tab Navigation -https://dev.to/aaronksaunders/expo-router-supabase-authentication-flow-and-tab-navigation-54co 💥 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