Welcome to the first part of this exciting full-stack app tutorial for 2025! 🚀 In this video series, we’ll build a complete app using Payload CMS as the backend and React Native Expo as the frontend.
This is the first two videos, there will be two more released before end of the month
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
Part 1 - Setting Up Payload CMS & Building Your First Expo Integration
This part focuses on setting up the backend, working with collections, intro to configuring access rules, and querying data in the Expo app. By the end, you'll have a solid foundation for building powerful apps with modern tools. Let’s dive in! 💻📱
⏱️ Chapters
=================
00:00 - Intro
02:11 - Setting up Payload CMS
04:01 - Creating the first user
04:43 - Reviewing default user collection & adding custom fields
06:30 - Database migration tips for adding fields
09:54 - Creating a Notes collection
12:29 - Adding Notes to the Payload config (payload-config.ts)
14:04 - Admin UI & adding a note
14:53 - Automatic API endpoint generation overview
16:04 - Adding test data for Notes & Users
17:26 - Wrapping up the Payload CMS backend
17:51 - Setting up the Expo app
20:56 - Cleaning up the default Expo template
22:18 - Querying Payload from Expo to fetch all Notes
24:20 - Access rules for the Notes collection in Payload CMS
26:42 - Rendering results with a FlatList in Expo
27:44 - Creating new notes with access rules
28:59 - Fixing UI errors in FlatList
29:24 - Wrapping up & previewing what’s next: Authentication & access rules
Part 2 - Integrating Expo Sign-In, Sign-Out and Sign-up with Payload CMS
Welcome to the second part of this exciting full-stack app tutorial for 2025! 🚀 In this video series, we’ll build a complete app using Payload CMS as the backend and React Native Expo as the frontend.
This part focuses on setting up React Native Expo, specifically Expo Router Authentication flow in the application along with Creating Accounts in Payload CMS 💻📱
⏱️ Chapters
=================
00:00 - Introduction, Review Part 1
01:57 - Overview of Authentication Flow with Expo Router Approach (See Links for Template)
06:22 - Adding Payload API To Application Context - Getting Current User
13:26 - Adding Payload API To Application Context - User Login API and Login Screen
19:15 - Adding Payload API To Application Context - User Sign Up API and Sign-Up Screen
20:30 - Adding Payload API To Application Context - User Sign Out API and Update Tab Two with Sign Out Button
23:30 - Adding Payload API To Application Context - Finishing Up Sign Up, now that we can sign out!!
25:44 - Updating Payload CMS Access Rules for User so we can Sign-Up a User
26:40 - Sign-Up doesn't Sign-Up a User By Default and try Again
Top comments (0)