Build a Threads Clone with React Native (Convex, Clerk, Sentry, Expo)

The video introduces building a Threads clone with React Native, Convex (backend), Clerk (authentication), Sentry (error monitoring), and Expo Router. It covers initial app setup, including installing Expo CLI, creating a new Expo app, and performing a pre-build for a custom development client, essential for integrating native modules not supported by Expo Go.

This section guides through setting up Clerk for user authentication, including installing `clerk-expo` and `expo-secure-store`, configuring environment variables, and wrapping the app with `ClerkProvider`. It then details building the login UI with social login options (Google, Facebook) and handling authentication flows.

Learn to integrate Convex as the backend. This involves installing `convex`, creating a new project in the Convex dashboard, running `npx convex dev`, and defining the database schema (e.g., users, messages) in `schema.ts`. Initial data is imported, and the first query function (`getAllUsers`) is implemented to retrieve data.

This part focuses on securely connecting Clerk authentication with Convex. It covers creating a JWT template in Clerk, configuring Convex's authentication with Clerk's issuer URL, and setting up a Convex HTTP action to synchronize user data (e.g., creating a user in Convex when a user signs up in Clerk) using Clerk webhooks.

The video demonstrates building a custom tab bar using Expo Router, including creating different tab screens (Feed, Search, Create, Favorites, Profile). It also implements a protected routing mechanism so only authenticated users can access certain parts of the app, automatically redirecting them to the login screen if not signed in.

This section integrates Sentry for application monitoring. It covers installing `sentry-react-native`, configuring the Sentry DSN in environment variables, and initializing Sentry in the app's root layout. Features like tracing, error capturing, user feedback, and session replays are explored, demonstrating how Sentry can pinpoint errors to specific code lines.

Building a flexible and reusable user profile component is the focus. It details retrieving user information from Convex based on a `clerkID` or a Convex `userID`, ensuring type safety. The component is designed to dynamically display different elements (e.g., back button, specific user data) depending on whether it's viewing the current user's profile or another's.

Learn to update user profile information. This involves creating an `edit-profile` modal page, passing existing user data as query parameters, and implementing a Convex mutation (`updateUser`) to persist changes to the database. Crucially, it demonstrates how to secure this mutation using Convex's internal identity checks to prevent unauthorized updates.

This part extends profile updates to include image uploads. It covers installing `expo-image-picker`, adding functionality to select an image from the device library, and then uploading it to Convex storage via a generated upload URL. The process ensures the image URL is correctly stored in the user's database record and displayed in the app.

The video moves to creating new threads. It involves developing a `ThreadComposer` component that acts as a modal for writing messages. A Convex mutation (`addThread`) is created to save new thread messages to the database, including handling content and optional media files. The UI allows for entering text, attaching images, and has a 'cancel' button with an alert prompt.

This section enhances the `ThreadComposer` to support multiple media files. It integrates `expo-image-picker` to select images, displays them horizontally within the composer, and allows users to remove them. When a thread is posted, all selected images are uploaded to Convex storage, and their IDs are linked to the thread message.

Building the main feed. This involves using a `FlatList` to display threads, implementing an infinite scroll with `usePaginatedQuery` from Convex to load more items, and adding a 'pull to refresh' functionality. It also reuses the `ThreadComposer` in a 'preview' mode at the top of the feed and dynamically shows/hides the tab bar during scrolling using `react-native-reanimated`.

Further refines the `Thread` component by adding functionality to display associated images and enabling users to 'like' threads. It covers correctly resolving image URLs from Convex storage and implementing a Convex mutation (`likeThread`) to update the like count for a given thread, including basic security checks.

Integration of `react-native-image-zoom-viewer` to allow users to zoom into thread images. This involves creating a new modal page (`/modal/image/[url]`) that opens when an image in a thread is tapped, displaying the image with zoom capabilities.

Implement detailed views for threads and user profiles. Users can navigate to a thread's details page by tapping on it in the feed, showing the full thread content. Tapping on a thread's creator's name or image navigates to their profile page, leveraging the reusable profile component and dynamically displaying a back button.

Building the commenting functionality. This involves creating a `reply` modal page that displays the original thread and the `ThreadComposer` in a 'reply' mode. A Convex mutation (`addThread`) is updated to handle replies by associating them with a `threadId` and incrementing the original thread's comment count. Comments are then fetched and displayed on the thread's details page.

Integration of push notifications using Expo Notifications. It covers setting up a custom hook (`usePush`) to register for push tokens, saving these tokens to the user's Convex profile, and configuring EAS for iOS push notifications. A Convex internal action (`sendPushNotification`) is created to send notifications to the original thread creator when a comment is left.

The final feature is a user search page. It demonstrates how to add a search index to the Convex users schema and implement a Convex query (`searchUsers`) to efficiently search for users by username. The UI includes a search bar in the header and a `FlatList` to display search results. Users can navigate to a profile directly from the search results.