Build an AI-Powered Meditation App with React Native

Build an AI-Powered Meditation App with React Native

Code with Beto via YouTube Direct link

00:00:00 – Intro / Live Demo

1 of 76

1 of 76

00:00:00 – Intro / Live Demo

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Build an AI-Powered Meditation App with React Native

Automatically move to the next video in the Classroom when playback concludes

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.