Build a ChatGPT Clone with React Native (Expo, SQLite, RevenueCat, Clerk, OpenAI)

Published: 21 May 2024
on channel: Simon Grimm
86,933
1k

🔐 Try Clerk today: https://go.clerk.com/XBc9sOr
🤑 Get IAP with Revenuecat: https://dub.sh/revenuecat

Join me as I build an epic ChatGPT Clone with React Native using Clerk & RevenueCat! In this exciting tutorial, you'll learn how to do the following:

Key Features:
🚀 Use Expo to set up the app and enable custom native modules
💫 Create animated intro screens with custom components
📦 Implement Clerk for user authentication with email
🔐 Protect pages with Expo Router and Clerk authentication
🎨 Customize a drawer menu with unique icons, sizes, and colors
🔄 Utilize the Zeego library for dynamic context menus and dropdowns
📸 Add an image viewer component with zoom and blur effects
🧠 Integrate OpenAI API for chat functionality and image generation
💬 Build a smooth chat UI with animated input components
🗄️ Store user API keys efficient with MMKV
🌐 Implement real-time data streaming from OpenAI
🗃️ Load and manage chat history with SQLite
💵 Incorporate in-app purchases with RevenueCat

A LOT OF FUN 🚀

LINKS
🔥 Learn React Native FAST: https://galaxies.dev
🔐 Try Clerk: https://go.clerk.com/tQXLCe8
🤑 Get IAP with Revenuecat: https://dub.sh/revenuecat

🔗 ChatGPT Clone Code: https://github.com/Galaxies-dev/chatg...

#############################

❤️ You can also find me on:
Twitter:   / schlimmson  
Instagram:   / simongrimm_  

#############################

00:00 About this clone
02:42 ChatGPT Clone Overview
06:50 App setup and Expo prebuild
17:46 Animated Intro Screen
29:38 Creating a Bottom Sheet and Modal
55:22 Authentication with Clerk
01:17:19 Creating a custom drawer navigation
01:47:52 Zeego header dropdown
02:03:34 Animated message input
02:34:00 Building the chat messages UI
03:04:51 Storing data with MMKV
03:25:15 Streaming OpenAI results
03:39:58 Image generation with Dall·E
03:56:29 Context menu with save, copy and share
04:12:45 Image viewer with controls
04:40:03 Custom blurred header with scrollview
04:52:03 Explore page with loading animations
05:08:44 Persisting chats with storage
05:37:11 Loading data from SQLite
05:57:28 RevenueCat in-app subscriptions
06:47:25 Breakdown


Watch video Build a ChatGPT Clone with React Native (Expo, SQLite, RevenueCat, Clerk, OpenAI) online without registration, duration hours minute second in high quality. This video was added by user Simon Grimm 21 May 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 86,933 once and liked it 1 thousand people.