INTRODUCING
#THEFUTUREISWRITTENINCODE

According to Twitter/X/Social Media… Mobile App devs, and I guess web developers are dead and no longer needed. I still think we have a few years left to live off the crumbs of the new AI Tools 😬 #ai #development #programming #entrepreneurs #productmangement

New four part series on creating react native expo mobile applications with payload cms as your application platform with built in content management console!! #payload #payloadcms #reactnative #mobileapps #mobileapps #tutorial #expo #voding #programmer #mobileappdevelopment

Build a React Native App with Payload CMS in Under 2 Hours! Part 4 #payloadcms #reactnative #authentication #expo 🚀 Payload CMS Collection Access Control, UI Clean Up and Series Wrap Up Part 1 - Setting Up Payload CMS & Building Your First Expo Integration - https://youtu.be/pzhndffizf0 Part 2 - Integrating Expo Sign-In, Sign-Out and Sign-up with Payload CMS - https://youtu.be/0omP6W_8cF8 Part 3 - Payload Relations, Saving Objects and Uploading Media from Mobile App https://youtu.be/cWxPX2u5zw4 This video is the fourth in a series demonstrating how to use Payload CMS as a backend for a React Native Expo application. i discuss final refinements made to both the backend (Payload) and frontend of the application. The refinements include: * Backend Refinements: Adding access rules to the notes collection. Moving access rules into a separate module. Adding a private flag to the collection view. * Frontend Refinements: Fixing Expo App Issues Removing the note ID from the Expo App UI. Adding owner information to notes. Cleaning up date formatting. Fixing tab icons and page titles. Updating the profile page. Removing JSON. Listing user information. Listing counts for all docs, public docs, and private docs. 🔗 Helpful Links ================= - Payload Concepts - https://payloadcms.com/docs/getting-started/concepts - Expo - https://expo.dev/ - Expo Router - https://docs.expo.dev/router/introduction/ - Expo Image Picker - https://docs.expo.dev/versions/latest/sdk/imagepicker/ 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY #ReactNative #PayloadCMS #FullStackDevelopment #Expo #MobileApps #exporouter #fullstack

AI-powered website and app builders are getting a lot of hype right now, especially for non-technical founders. While these tools can help speed up development and iteration, they are not a complete solution. For non-technical founders, relying solely on these tools can be a trap—leading to limitations, scalability issues, and technical debt down the line. However, when used by experienced developers, AI can accelerate the build process, streamline workflows, and enhance product iterations. The key is understanding where AI fits into the process—it’s a tool, not a replacement for real technical expertise. #Startup #Entrepreneurship #Founders #AI #WebDevelopment #mobiledevelopment

Level up your @payloadcms skills! I've created a tutorial showing how to implement a custom tag input using array fields and a custom React component. Add, remove, and manage tags with ease! 🔥 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY #payloadcms #nextjs #cms #headlesscms #reactjs

Payload CMS: How To Create Custom Array Field for Tags #payloadcms #customcomponents #nextjs Learn how to implement a custom tagging system in Payload CMS using the array field and a custom React component! This video walks you through building a dynamic tag input where users can add, remove, and manage tags directly within the Payload admin panel. We'll cover: - Defining the Array Field: Setting up the tags field in your User collection with the type: 'array' configuration. - Custom Component Creation: Building a React component (CustomTagsArrayFieldClient) to handle tag input, display, and deletion. We leverage Payload's hooks (useField, useForm, useFormFields) to interact with the form data. - Adding and Removing Tags: Implementing logic to add new tags (with Enter key or button click) and remove existing tags using callbacks. - Data Structure: How the tag data is structured and retrieved via the API. - Rendering the Tags: Using React's map function to display the tags dynamically. This tutorial provides a practical example of extending Payload's functionality with custom field components. Full source code is provided [Link to Source Code - e.g., GitHub Gist, Pastebin, or your website]. 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY

How to Make Custom Fields Talk To Each Other using Payload React Hooks in Client Custom TextField Component Payload CMS: Create Dynamic Custom Fields that Update in Real-time! (React Hooks Tutorial) Learn how to build powerful, interactive custom fields in Payload CMS! This tutorial dives deep into creating custom fields that can dynamically update based on other field values. We'll cover: - The difference between server components and client components in Payload. - How to use React Hooks (useField, useFormFields) to manage field state and trigger updates. - Fetching sibling data within custom fields. - Optimizing your custom fields to minimize unnecessary re-renders. - Seeing real-time updates on the client-side and how to handle server-side updates. - A practical example of building a "Full Name" field that auto-populates from "First Name" and "Last Name". Whether you're new to Payload or an experienced developer looking to extend its capabilities, this video will give you the tools you need to create more dynamic and user-friendly content management experiences. Links: - Payload CMS Documentation: [https://payloadcms.com/] - React Hooks Documentation: [https://payloadcms.com/docs/admin/react-hooks] - Source Code: [https://github.com/aaronksaunders/payload-custom-text-field-1-2025] Chapters: 00:00 - Introduction: Custom Fields in Payload 00:10 - Project Overview and Demo 01:30 - Whats in the Documentation 02:20 - Source - User Collection 03:01 - Source - CustomFullNameTextFieldClient.tsx, Client Side 06:15 - Using useField Hook and useFormFields Hook Key Takeaways 08:06 - Source - CustomFullNameTextFieldServer.tsx Server-side Updates and Payload API 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY #payloadcms #nextjs #webdevelopment #payload #coding - Make Your PayloadCMS Fields Work Together Like Magic! Custom Fields

A quick demo of app showing Custom TexField Components in a Payload CMS Admin UI. The custom component is used to create a fullname field derived from the first name field and the last name field. 🔥 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY #payloadcms #nextjs #customcomponents #cms #headlesscms

Firebase Auth + Payload CMS: Client-Side Integration (Proof of Concept) This video demonstrates a *rough, proof-of-concept* integration of Firebase Authentication with Payload CMS, focusing on the client-side implementation. I walk through how to use Firebase's various sign-in methods (email/password in this example), take the resulting Firebase token, and use it to authenticate against a Payload CMS instance. I'll show you how to: * Set up a Firebase project and service account. * Create a custom authentication strategy in Payload. * Verify Firebase tokens on the server using Firebase Admin. * Create and manage Payload users based on Firebase authentication. * Implement token revocation (logout) with a custom Payload endpoint. * Secure Payload collections using the custom auth strategy. * Use Next.js for the front end. Source Code - https://github.com/aaronksaunders/payload-firebase-auth-2025 This is a work in progress, and I'm looking for feedback! Source code will be linked below. Let me know your thoughts in the comments. 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 * Custom Text Field Components - https://youtu.be/EX_DeZtuOqc * Firebase Auth Integration - https://youtu.be/VVODoojcoik * Custom List View Component - https://youtu.be/6avHMMyM8Eg * Fullstack ToDo with Payload CMS - https://youtu.be/9SZYwfkerZY #payloadcms #firebase #authentication #nextjs #webdev #cms #javascript #fullstack #payload #webdevelopment