Learn to develop a complete AI-powered meditation mobile application using React Native, Expo Router, and modern development tools in this comprehensive tutorial. Master the implementation of user authentication through Clerk, create stunning animated gradients using React Native Skia, and integrate ElevenLabs AI agents for interactive meditation sessions. Explore database management with Appwrite for storing user session data and conversation history. Build advanced UI components including parallax scroll views, custom buttons, and session summary screens while implementing features like WebRTC for real-time communication, client-side tools for device brightness control, and server-side API routes. Discover how to deploy your application using EAS hosting, manage environment variables securely, and create dynamic meditation sessions with AI-generated content. The tutorial covers project setup, authentication flow implementation, protected routes configuration, animated UI elements, AI agent integration, database design, and deployment strategies, providing hands-on experience with cutting-edge mobile development technologies and AI integration patterns.

Syllabus

00:00:00 – Intro / Live Demo
00:06:33 – Creating Project
00:07:49 – Resetting Project
00:09:19 – Running Project
00:10:19 – Implementing Authentication
00:11:42 – Clerk Expo UI Overview
00:13:36 – Setting Up Clerk Dashboard
00:15:03 – Enabling Native Application in Clerk
00:16:40 – Creating a Development Build
00:19:59 – Implementing Clerk Native UI
00:23:15 – Expo Router Authentication
00:26:23 – Adding Token Cache
00:26:45 – Installing Expo Secure Store
00:27:18 – Configuring Clerk Publishable Key
00:30:03 – Adding Clerk Wrapper Component
00:31:30 – Expo Router Protected Routes
00:36:47 – Implementing Auth Screens
00:40:32 – Testing Authentication Flow
00:45:25 – Styling Auth Screens
00:46:47 – Implementing Animated Gradient with Skia
00:47:48 – Installing React Native Skia
00:52:06 – Changing Gradient Size
00:56:20 – Animating Gradient in Y Axis
01:04:17 – Animated Gradient from A to B
01:06:52 – Animating Gradient Radius
01:16:30 – Adding Gradient Pulse Animation
01:23:00 – Testing Gradient Animation States
01:26:55 – ElevenLabs Intro
01:28:12 – ElevenLabs Dashboard Overview
01:28:54 – Creating a New AI Agent
01:35:15 – Adding Agent Environment Variable
01:35:37 – Installing ElevenLabs Dependencies
01:36:34 – Adding ElevenLabs Provider
01:37:32 – Implementing Agent Conversation
01:38:15 – Adding WebRTC Plugins
01:39:28 – Generating App Icon with AI
01:42:26 – Creating Agent Session Screen
01:48:04 – Start Conversation Function
01:49:24 – End Conversation Function
01:50:18 – Starting an Agent Session
01:52:32 – Agent Dynamic Variables
01:53:44 – Adding Meditation Sessions List
02:00:33 – Using Route Params to Get Session
02:03:15 – Testing Agent with Dynamic Session Params
02:03:55 – Improving Session Screen UI
02:06:50 – Creating a Button Component
02:18:01 – Getting Conversation ID
02:18:30 – Integrating Client Tools Brightness
02:22:15 – Configuring Brightness Tool in ElevenLabs
02:27:42 – Adding Agent Server-Side Tools
02:31:47 – Creating Session Summary Screen
02:35:28 – Adding Server-Side ElevenLabs API Key
02:36:57 – Adding Conversation Types
02:37:52 – Creating Conversations API Route
02:44:00 – Deploying API Route to EAS Hosting
02:46:46 – Testing Summary Screen API
02:48:28 – Displaying Session Summary
02:51:16 – Parallax Scroll View Component
03:09:03 – Adding Explore Session Section
03:14:30 – Appwrite Overview
03:15:48 – Creating a New Appwrite Project
03:16:18 – Appwrite Project ID Env Variable
03:17:00 – Creating Database
03:17:40 – Appwrite New Database Terminology
03:18:46 – Creating a Sessions Table
03:20:32 – Database Permissions
03:22:25 – Installing Appwrite Dependencies
03:23:25 – Appwrite Configuration File
03:26:35 – Adding Types for Sessions Data
03:29:01 – Fetching User Sessions
03:32:34 – Saving User Sessions to Database
03:37:01 – Adding a Refresh Sessions Button
03:38:45 – Render Users Session History
03:43:13 – Minor UI Improvements
03:43:38 – Displaying User Card
03:45:07 – Recap