top of page
Green%20and%20Black%20Gaming%20Youtube%2

INTRODUCING
#THEFUTUREISWRITTENINCODE

Welcome to the official website of #TheFutureIsWrittenInCode

This program provides technology training to support individuals looking to up-skill for better employment opportunities or looking for entry level job opportunities in the innovation economy.

Take a look at the videos below, and browse through the new and exciting content. The videos are constantly being updated, so be sure to check back for more!

Basic To-Do App using AngularFire v17 Compat
16:59
Payload CMS Nuxt JS - Authentication in Nuxt Using a Custom Plugin
09:17
Aaron Saunders

Payload CMS Nuxt JS - Authentication in Nuxt Using a Custom Plugin

Payload CMS Nuxt JS - Authentication in Nuxt Using a Custom Plugin #payloadcms #nuxtjs #vuejs #webdevelopment This video covers one way to integrate Payload CMS SignIn, SignOut and Create Account in a Nuxt JS Application. Payload CMS - 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 - https://payloadcms.com/ ⚠️ Payload CMS 2.0 is coming out next week so I didn't want to go too deep here since this is v1. I will be updating all of the Payload CMS content to account for changes in v2 It includes the code for the necessary pages the custom plugin for connecting with Payload CMS to get current user and manage the user information; and the middleware for controlling access to application pages Payload CMS - 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 👉🏾 Setting Up Payload CMS - https://youtu.be/TDd9EedIrGY 💥 Chapters -------------------------- 00:00 - Introduction 01:07 - How it works, App Demo 02:15 - Looking at the code - Custom Plugin 04:36 - Auth Middleware to Control Page Access 05:25 - Index/ Home Page 07:33 - Login Page 08:50 - Wrap Up 💥 Links -------------------------- - Payload CMS - https://payloadcms.com/ - MongoDB Atlas - https://www.mongodb.com/atlas/database - MongoDB Compass - https://www.mongodb.com/products/tools/compass 🚀 Blog Post - https://dev.to/aaronksaunders/payload-cms-authentication-in-nuxt-using-a-custom-plugin-1gg5 💥 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 #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb
Payload CMS - Headless CMS with Vue - Deploy Mobile App with Ionic Capacitor
35:36
Aaron Saunders

Payload CMS - Headless CMS with Vue - Deploy Mobile App with Ionic Capacitor

Payload CMS Ionic Vue - Deploy To IOS and Android 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 4, we show how to get the application deployed on IOS and Android devices using Ionic Framework Capacitor Payload CMS - 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 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 - Intro 00:32 - Reviewing tools used in application 01:52 - Using vscode extension for setting up Ionic Capacitor project starting with IOS 03:09 - Setting up debuggung for IOS app using Safari 04:49 - Updating authservice and consolidating API calls 09:38 - Changing url to Payload CMS and resolving CORS 10:30 - Testing sign-in and getUser on IOS 12:31 - Using JWT for authentication with server API routes, Saving JWT locally 23:40 - Signout and clearing stored JWT 25:40 - Deploying and debuggung on Android 28:30 - Configuring android scheme, resolving CLEAR TEXT issue 31:00 - Setting localhost on Payload CMS server to support android 34:50 - Final test 💥 Links -------------------------- - Payload CMS - 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/ - Ionic Capacitor - https://capacitorjs.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 #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb #capacitor #mobileapp #mobileappsrt
Payload CMS - Headless CMS with Vue - Creating Customer Accounts
23:52
Aaron Saunders

Payload CMS - Headless CMS with Vue - Creating Customer Accounts

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 3, we show how to create a new user account and we do some refactoring on the API method calls Payload CMS - 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 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL 💥 Chapters -------------------------- 00:00 Introduction 00:52 Modify Customer Collection Access To Allow Create 02:47 Creating the SignUp Page 05:31 Adding Ionic DateTimeButton to CaptureBirthday 08:45 Writing HandleSignUp Function 11:40 Testing Signup UI, Minor Edits 13:02 Testing Signup Functionality 14:50 Signup Works Fine, But Doesn't Login User 15:35 Refactor To Include AuthService 21:44 Testing Complete SignUp Process with Login 23:01 Wrap Up 💥 Links -------------------------- - Payload CMS - 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 #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb
Payload CMS - Headless CMS with Vue - Getting Current User and Cookies
13:45
Aaron Saunders

Payload CMS - Headless CMS with Vue - Getting Current User and Cookies

In this video series, we will set up Payload CMS 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. Payload CMS - 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 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 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 -------------------------- - Payload CMS - 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 #payloadcms #vue #ionic #typescript #cms #nuxtjs
Payload CMS - Headless CMS with Vue - Getting Started
38:28
Aaron Saunders

Payload CMS - Headless CMS with Vue - Getting Started

Getting Started with Payload CMS & Vue JS - Free, Open Source, Typescript, Extensible - with paid cloud option In this video series, we will set up Payload CMS 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. Payload CMS - 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 - Creating a user/customer account - https://youtu.be/57RY3fbWOnU Part 4 - Get the application deployed on IOS and Android devices - https://youtu.be/34xt2A8Lbuo 💥 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 -------------------------- - Payload CMS - 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 #payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb
tRPC Alternative for Nuxt Application
27:40
Aaron Saunders

tRPC Alternative for Nuxt Application

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
tRPC Nuxt Part 3 - Database Queries and Nuxt UI
30:34
Aaron Saunders

tRPC Nuxt Part 3 - Database Queries and Nuxt UI

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
tRPC Nuxt - Part 2 - Adding Database
23:47
Aaron Saunders

tRPC Nuxt - Part 2 - Adding Database

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
Home: Videos
Videos Not For You?

If you like to have a combination of video and written content to help you learn and understand technology and coding, the we got you covered.

Many of the videos posted here have an accompanying blog post and source code to supplement the video content

Home: Instagram
Home: Contact

GET IN TOUCH

2301-D Georgia Ave Washington, DC 20001

bottom of page