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!

Payload CMS Fullstack To Do App + Next.js: Authentication & Route Protection Tutorial
33:29
Aaron Saunders

Payload CMS Fullstack To Do App + Next.js: Authentication & Route Protection Tutorial

Payload CMS Authentication in Next.js: Login, Logout, Middleware, & API Security Learn how to add robust authentication and route protection to your Next.js 14 applications using Payload CMS! This in-depth tutorial builds on our previous to-do app example (link: https://www.youtube.com/watch?v=v_ga0nzm-wU) and walks you through implementing a complete login/logout system, securing routes, and handling API access. We'll cover: * Project Setup: Organizing your Next.js project for secure routes. * Login with Payload's REST API: Creating a login form and authenticating users (ensuring proper cookie handling!). * Implementing Logout: Building a logout button and clearing user sessions. * Two Powerful Route Protection Methods: * Direct User Checks: Fetching user data and redirecting unauthenticated users directly within your page components. * Next.js Middleware: Using middleware for efficient session validation and route-level protection. We'll discuss the pros and cons of each approach. * Handling API Routes: Configuring middleware to properly handle API requests and delegate security to Payload. * Debugging & Best Practices: We'll troubleshoot common issues and show you how to avoid performance problems. * Environment Variables: Understand how to set and use env variables, like `NEXT_PUBLIC_PAYLOAD_URL` and `NEXT_PUBLIC_SERVER_URL` By the end of this video, you'll have a secure, functional to-do app and a solid understanding of how to implement authentication in your own Next.js and Payload CMS projects. ⏱️ Chapters ================= 0:00:00 Introduction & Overview 0:01:28 Project Setup & Organization 0:03:20 Creating the Login Page 0:05:20 Implementing Login Functionality (REST API) 0:10:12 Implementing Logout Functionality (REST API, and Client Component LogoutButton) 0:13:33 Route Protection: Direct User Check (getUser) 0:15:21 Creating the getUser Utility Function 0:16:50 Applying getUser to Protect Pages 0:20:33 Route Protection: Middleware 0:21:13 Creating the Middleware File (middleware.ts) 0:22:02 Middleware Logic: Redirects & Session Check 0:24:10 Middleware Configuration (matcher) and Handling API Routes in Middleware 0:26:04 Debugging App After Changes & Bug Fixes (Media Upload & Env Variables) 0:31:00 Wrap Up and summary of features 🔗 Helpful Links: ================= * Related Blog Post - https://dev.to/aaronksaunders/authentication-with-payload-cms-and-nextjs-client-vs-server-approaches-c5a * Previous To-Do App Video: https://www.youtube.com/watch?v=v_ga0nzm-wU * Source Code: [Link to GitHub Repository] * Next.js Authentication Guide: https://nextjs.org/docs/pages/building-your-application/authentication * Payload CMS REST API Docs: https://payloadcms.com/docs/rest-api/overview #nextjs #payloadcms #authentication #routeprotection #middleware #webdev #javascript #tutorial #coding #security #nextjs14 #todoapp #restapi #cookies
How to Add Images to Your Payload CMS Admin Collection List View in 5 Minutes!
04:31
Aaron Saunders

How to Add Images to Your Payload CMS Admin Collection List View in 5 Minutes!

How to Add Images to Your Payload CMS Admin Collection List View in 5 Minutes! #payloadcms #nextjs #headlesscms 🖼️ How to Add Images to Your Payload CMS Admin Collection List in 5 Minutes! 🚀 One of the best features of Payload CMS is how easily you can customize the admin panel to fit your needs. In this quick tutorial, I'll show you how to add images to the collection list view—making it easier to visually manage content at a glance! 🔹 What you’ll learn: ✅ How to modify the admin collection list view ✅ Display images alongside collection items ✅ Enhance the user experience for content editors If you're using Payload CMS, this simple customization will make your workflow even smoother. ⏱️ Chapters ================= 00:00 - App Demo 🔗 Helpful Links ================= - Payload Concepts - https://payloadcms.com/docs/getting-started/concepts - Local API - https://payloadcms.com/docs/local-api/overview - Custom Components - https://payloadcms.com/docs/fields/overview#custom-components - Next Image URL Error - https://nextjs.org/docs/messages/next-image-unconfigured-host 🖥️ Source Code ================= - https://github.com/aaronksaunders/payload-custom-cell-image-component-1-2025 MORE ABOUT PAYLOAD -------------------------------------- Payload is the Next.js fullstack framework. Write a Payload Config and instantly get: - A full Admin Panel using React server / client components, matching the shape of your data and completely extensible with your own React components - Automatic database schema, including direct DB access and ownership, with migrations, transactions, proper indexing, and more - Instant REST, GraphQL, and straight-to-DB Node.js APIs - Authentication which can be used in your own apps - A deeply customizable access control pattern - File storage and image management tools like cropping / focal point selection - Live preview - see your frontend render content changes in realtime as you update Lots more 🔥 Recent Payload Content ———————————————— - Basic Todo App with Payload CMS - https://youtu.be/v_ga0nzm-wU - Quick Payload 3 Custom Component Example - https://youtu.be/W_Da3Sp4Lgw - Real Time Chat (Server Side Events ) - https://youtu.be/9ll-8KkRWjo - Payload CMS And React Router 7 - https://youtu.be/KGJa08OBlSw - Custom Dynamic Select Component - https://youtu.be/yJFbOzPD0oA ⚡ Like & Subscribe for more dev tips! ⚡ Looking for help with your project - https://www.clearlyinnovative.com/valued-experience #PayloadCMS #WebSockets #RealTimeData #FullStackDevelopment #JavaScript #NodeJS #CMS #WebDev #nextjs #reactjs
Need Real-Time Data in Payload CMS? Watch This NOW!
18:14
Aaron Saunders

Need Real-Time Data in Payload CMS? Watch This NOW!

🔥 Watch how I implemented WebSockets for real-time updates in Payload CMS! No more manual refreshes—data updates instantly across all clients. Perfect for live dashboards, chat apps, and more! 💡 Want to add real-time features to your Payload CMS project? This video shows one solution! Videos Mention in Video - Basic Todo App with Payload CMS - https://youtu.be/v_ga0nzm-wU - Real Time Chat (Server Side Events ) - https://youtu.be/9ll-8KkRWjo ⏱️ Chapters ================= 00:00 - App Demo 02:15 - The Websocket Plugin ( real-time data ) 05:55 - Handle depth and relationships when constructing message response 08:35 - The Application Integration 11:46 - Dealing with Plugin Initialization Issue 13:15 - Processing Messaging from Websocket Server 14:53 - onMessage 16:17 - Talking about the process 🔗 Helpful Links ================= - Payload Concepts - https://payloadcms.com/docs/getting-started/concepts - Local API - https://payloadcms.com/docs/local-api/overview - REST API - https://payloadcms.com/docs/rest-api/overview 🖥️ Source Code ================= - https://github.com/aaronksaunders/my-payload-todo-1-2025 MORE ABOUT PAYLOAD -------------------------------------- Payload is the Next.js fullstack framework. Write a Payload Config and instantly get: - A full Admin Panel using React server / client components, matching the shape of your data and completely extensible with your own React components - Automatic database schema, including direct DB access and ownership, with migrations, transactions, proper indexing, and more - Instant REST, GraphQL, and straight-to-DB Node.js APIs - Authentication which can be used in your own apps - A deeply customizable access control pattern - File storage and image management tools like cropping / focal point selection - Live preview - see your frontend render content changes in realtime as you update Lots more 🔥 Recent Payload Content ———————————————— - Add Images To Admin Collection View - https://youtu.be/d1MN2W5fVEE?si=5nWOnSMsftMgbTna - Basic Todo App with Payload CMS - https://youtu.be/v_ga0nzm-wU - Quick Payload 3 Custom Component Example - https://youtu.be/W_Da3Sp4Lgw - Real Time Chat (Server Side Events ) - https://youtu.be/9ll-8KkRWjo - Payload CMS And React Router 7 - https://youtu.be/KGJa08OBlSw - Custom Dynamic Select Component - https://youtu.be/yJFbOzPD0oA ⚡ Like & Subscribe for more dev tips! ⚡ Looking for help with your project - https://www.clearlyinnovative.com/valued-experience #PayloadCMS #WebSockets #RealTimeData #FullStackDevelopment #JavaScript #NodeJS #CMS #WebDev #nextjs #reactjs
Build a Fullstack Todo App with Image Upload Using Payload CMS 3 🚀 | Not Just for Websites!
26:51
Aaron Saunders

Build a Fullstack Todo App with Image Upload Using Payload CMS 3 🚀 | Not Just for Websites!

🚀 Building a Full-Stack Todo App with Next.js 14 and Payload CMS| Not Just for Websites! In this tutorial, we build a modern Todo application that showcases the power of Next.js 14 and Payload CMS. Key Features: ✅ Server Actions for form handling ✅ Image upload functionality ✅ Full CRUD operations ✅ Server-side rendering ✅ TypeScript integration ✅ Responsive design ✅ Media management with Payload CMS ✅ Clean and maintainable code structure Tech Stack: - Next.js 14 - Payload CMS - TypeScript - SQLite Database - Server Components - Server Actions - next/image optimization The application allows users to: • Create todos with titles, descriptions, and images • Mark todos as complete/incomplete • View detailed todo information • Upload and manage images • Navigate between todos • Responsive layout for all devices *SEE PART 2 - Authentication and Route Protection* - https://youtu.be/9SZYwfkerZY ⏱️ Chapters ================= 00:00 - Introduction, and Why I made this Video 01:00 - Getting Started, npx create-payload-app 02:25 - Creating default admin user to access system, default collections 03:10 - Default Next Project Structure 03:52 - Default User Collection Explained 04:18 - Default Media Collection Explained 05:00 - Create the Todos Collection 06:34 - Quick look at database tables created by Payload 07:05 - The default REST API & Admin Console for Creating Todos 08:55 - Adding Media/Image association with the Todos 11:20 - Show Payload CMS Data in the Next JS Application, Local API 14:05 - Get Todo by id, and Show in Page, Local API 16:10 - Rendering the associated Media Object in User Interface 17:37 - Using REST API 19:36 - Create a Todo in Next JS 14 Application, Next Server Action 22:25 - Create a Todo n Next JS 14 Application including uploading the media object 25:30 - Update Application to revalidate and redirect to update data on Home page 26:28 - Wrap Up, Whats Next 🔗 Helpful Links ================= - Payload Concepts - https://payloadcms.com/docs/getting-started/concepts - Local API - https://payloadcms.com/docs/local-api/overview - REST API - https://payloadcms.com/docs/rest-api/overview 🖥️ Source Code ================= - https://github.com/aaronksaunders/my-payload-todo-1-2025 MORE ABOUT PAYLOAD -------------------------------------- Payload is the Next.js fullstack framework. Write a Payload Config and instantly get: - A full Admin Panel using React server / client components, matching the shape of your data and completely extensible with your own React components - Automatic database schema, including direct DB access and ownership, with migrations, transactions, proper indexing, and more - Instant REST, GraphQL, and straight-to-DB Node.js APIs - Authentication which can be used in your own apps - A deeply customizable access control pattern - File storage and image management tools like cropping / focal point selection - Live preview - see your frontend render content changes in realtime as you update Lots more 🔥 Recent Payload Content ———————————————— - Need Real-Time Data (websockets) in Payload CMS? Watch This NOW! https://youtu.be/l3InbfMi2yE - Quick Payload 3 Custom Component Example - https://youtu.be/W_Da3Sp4Lgw - Real Time Chat - https://youtu.be/9ll-8KkRWjo - Payload CMS And React Router 7 - https://youtu.be/KGJa08OBlSw - Custom Dynamic Select Component - https://youtu.be/yJFbOzPD0oA ⚡ Looking for help with your project - https://www.clearlyinnovative.com/valued-experience #nextjs #PayloadCMS #FullStackDevelopment #crudapp #fullstack #reactjs
SIMPLE File Upload with Expo and Appwrite | Universal App
12:40
Aaron Saunders

SIMPLE File Upload with Expo and Appwrite | Universal App

Get Appwrite Storage Upload WORKING with React Native Expo | Universal Native App - File Upload with Expo and Appwrite ### Cross-platform file upload solution using Expo and Appwrite, supporting iOS, Android, and Web platforms. Appwrite -------------- Build your entire backend within minutes and scale effortlessly using Appwrite's open-source platform. Add Authentication, Databases, Functions, Storage, and Messaging to your projects using the frameworks and languages of your choice. Expo --------- An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web. ⏱️ Chapters ================= 00:00 - Intro and App Demo 01:54 - See Uploaded File in Appwrite Storage Console 02:40 - Code - Basic overview of UI and Using Expo Image Picker 03:40 - Code - Upload file using Web API 05:13 - Code - Upload file using React Native API 06:13 - RANT - Appwrite React Native upload documentation needs improvement 08:05 - Code - AppwriteClientFactory - making the the app work on web ios and android 11:00 - Code - AppwriteClientFactory - Adding support for another Appwrite Service "Account" Technologies Used - Expo - Appwrite Web SDK - TypeScript - React Native - Expo Image Picker - React Native Appwrite SDK 🔗 Helpful Links ================= - Setting Up Appwrite - https://cloud.appwrite.io/console/ - Appwrite React Native - https://appwrite.io/docs/quick-starts/react-native - Expo - https://docs.expo.dev/ 🖥️ Source Code ================= - https://github.com/aaronksaunders/expo-upload-image-appwrite-universal-2025 ⚡ Looking for help with your project - https://www.clearlyinnovative.com/valued-experience #appwrite #expo #reactnative #fileupload #storage
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

Subscribe Form

©2020 by @aaronksaunders

#TheFutureIsWrittenInCode

bottom of page