A feature-rich React Native clone of the Wolt food delivery app, showcasing modern mobile development practices with React Native, Expo, and TypeScript.
Note: This is a clone app with dummy data for demonstration purposes only. No real backend is connected.
Sponsored by: Sentry - Application monitoring and error tracking | CodeRabbit - AI-powered code reviews
- User Authentication: Apple and Google sign-in integration
- Restaurant Discovery: Browse restaurants and stores with beautiful UI
- Search & Filter: Find exactly what you're looking for with advanced filters
- Interactive Map: Explore restaurants and delivery zones on an interactive map
- Menu Navigation: Browse detailed menus with categories and items
- Shopping Cart: Add items, manage quantities, and see real-time totals
- Checkout Flow: Complete order flow with delivery scheduling
- Location Selection: Choose delivery locations with address management
- Smooth Animations: Fluid transitions and gestures powered by Reanimated
- Tab Navigation: Bottom tabs for easy navigation between sections
- Expo Router - File-based routing and navigation
- React Native Reanimated - Smooth animations and transitions
- React Native Gesture Handler - Touch interactions
- Expo Maps - Interactive maps integration
- Expo Linear Gradient - Beautiful gradient effects
- Zustand - State management for cart and user data
- MMKV - The fastest key/value storage for React Native
- Sentry - Error tracking and performance monitoring
Watch and build this Wolt Clone step by step:
Make sure you have the Expo CLI installed.
For the best development experience, install:
- Android Studio for Android development
- Xcode (Mac only) for iOS development
-
Clone the repository
git clone <repository-url> cd wolt
-
Install dependencies
bun install # or npm install -
Prebuild the native code
bunx expo prebuild
-
Run the app
# iOS bunx expo run:ios # Android bunx expo run:android
-
Create a project on Sentry
-
Run the setup wizard:
bunx @sentry/wizard@latest -s -i reactNative
-
Follow the prompts to configure Sentry for your project
app/
├── (app)/
│ ├── (public)/ # Public routes (authentication)
│ └── (auth)/ # Protected routes
│ ├── (tabs)/ # Bottom tab navigation
│ │ ├── restaurants/ # Restaurant browsing
│ │ ├── stores/ # Store browsing
│ │ ├── search/ # Search functionality
│ │ ├── discovery/ # Discovery feed
│ │ └── profile/ # User profile
│ ├── (modal)/ # Modal screens
│ │ ├── location/ # Location picker
│ │ ├── filter/ # Filter options
│ │ ├── map/ # Map view
│ │ └── [id]/ # Restaurant/menu details
│ └── order/ # Order flow
│ ├── index/ # Cart view
│ ├── schedule/ # Delivery scheduling
│ └── checkout/ # Checkout
components/ # Reusable components
constants/ # Theme, colors, fonts
assets/ # Images and static files
- Beautiful animated welcome screen with infinite scroll
- Apple and Google OAuth integration
- Alternative login options
- Categorized restaurant and store listings
- Horizontal scrolling sections
- Restaurant cards with ratings and delivery info
- Filter by cuisine, price range, and dietary preferences
- Detailed restaurant information
- Menu organized by categories
- Item customization options
- Add to cart with quantity selection
- Persistent cart state with Zustand
- Item quantity management
- Real-time price calculations
- Delivery scheduling options
- Order summary and confirmation
- Location-based restaurant discovery
- Interactive map with restaurant markers
- Search with autocomplete
- User profile management
- Smooth page transitions and animations
Sentry provides real-time error tracking and performance monitoring that helps developers see what actually matters, solve issues faster, and learn continuously about their applications.
CodeRabbit offers AI-powered code reviews that provide instant feedback, catch bugs early, and help maintain code quality across your entire team.
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.
