React Native Amazon Clone with Vapi, Clerk & Sentry

This is a React Native Amazon Clone with Vapi, Clerk & Sentry.

Make sure to also check out the API Project for this project.

Additional features:

• Expo Router file-based navigation
• Vapi for AI voice agents
• Sentry for error tracking
• Clerk Passkeys for passwordless authentication
• Zustand for state management
• NativeWind for styling
• TanStack Query for data fetching
• Reanimated for animations
• React Hook Form for form handling
• Zod for schema validation
• React Native MMKV for secure storage
• Filament for 3D rendering
• Bottom Sheet for bottom sheets
• Stripe React Native SDK for payment processing

🎥 Follow the video tutorial

Watch and build this Amazon Clone step by step:

TODO: Add video

Setup

Environment Setup

Make sure you have the Expo CLI installed.

For the best development experience, you should have Android Studio and Xcode (Mac only) installed. For more information on setting up your development environment, refer to the Expo documentation for Android Studio and the React Native documentation for Xcode.

App Setup

To build the app, follow these steps:

1. Clone the repository
2. Run npm install
3. Run npx expo prebuild
4. Run npx expo run:ios or npx expo run:android

Setup Environment Variables

Create a new file named .env in the root of your project and add the following content:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
EXPO_PUBLIC_API_URL=http://localhost:3000
EXPO_PUBLIC_VAPI_KEY=
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=
EXPO_PUBLIC_VAPI_WORKFLOW_ID=
EXPO_PUBLIC_VAPI_ASSISTANT_ID=

Replace the placeholders with your own values.

Vapi Setup

Create your Vapi account and then add a new Assistant with your preferred settings.

Copy the Assistant ID and add it to the .env file.

Create a new Workflow in the Vapi dashboard.

Copy the Workflow ID and add it to the .env file.

If you want to give your assistant access to a knowledge base, upload the dummy_items.json from our API to the knowledge base.

Sentry Setup

1. Create a new project on Sentry
2. Use the npx @sentry/wizard@latest -s -i reactNative command to setup Sentry for your project

App Screenshots

Demo

Sentry Screenshots

🚀 More

Take a shortcut from web developer to mobile development fluency with guided learning Enjoyed this project? Learn to use React Native to build production-ready, native mobile apps for both iOS and Android based on your existing web development skills.