FoodTok - TikTok-Style Food Delivery App

A modern food delivery app that combines TikTok's engaging video feed experience with seamless food ordering, similar to DoorDash. Scroll through delicious food videos and order what you see instantly!

Features

TikTok-Style Video Feed

• Vertical scrolling video feed - Swipe up to see more delicious food
• Full-screen immersive videos - Each video showcases a food item
• Auto-play on scroll - Videos automatically play when in view

Food Ordering

• Order directly from videos - See something you like? Order it with one tap
• Restaurant information - View ratings, delivery time, and fees
• Add to cart - Build your order as you browse

Social Features

• Like functionality - Heart your favorite food videos
• Share options - Share dishes with friends
• Engagement metrics - See likes and comments

Shopping Cart

• Smart cart management - Add, remove, and adjust quantities
• Order summary - See subtotal, delivery fee, and service charges
• Easy checkout - Complete your order with one tap

Tech Stack

• React Native - Cross-platform mobile development
• Expo - Development and build tooling
• TypeScript - Type-safe code
• Expo AV - Video playback
• React Navigation - Screen navigation
• Expo Linear Gradient - Beautiful UI gradients

Project Structure

/src
  /components
    VideoFeedItem.tsx      # Main video feed component
  /screens
    FeedScreen.tsx         # Video feed screen
    CartScreen.tsx         # Shopping cart & checkout
  /types
    index.ts              # TypeScript interfaces
  /data
    foodItems.ts          # Sample food data

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo Go app (for testing on mobile)

Installation

1. Clone the repository

git clone [repository-url]
cd Grab

2. Install dependencies

npm install

3. Start the development server

npm start

4. Run on your device

• Scan the QR code with Expo Go (Android) or Camera app (iOS)
• Or press a for Android emulator
• Or press i for iOS simulator
• Or press w for web browser

How to Use

1. Browse Videos: Swipe up/down to scroll through food videos
2. Like Videos: Tap the heart icon to like a dish
3. Add to Cart: Tap "Order Now" to add items to your cart
4. View Cart: Tap the cart icon in the top-right corner
5. Checkout: Review your order and tap "Proceed to Checkout"

Features in Detail

Video Feed

• Displays food videos in a TikTok-style vertical scroll
• Shows restaurant name, rating, delivery time, and fees
• Includes food name, description, and price
• Interactive like, comment, and share buttons

Cart System

• Persistent cart across the app
• Quantity adjustment (+/-)
• Item removal
• Real-time price calculation
• Delivery and service fee breakdown

Future Enhancements

• User authentication
• Real payment integration
• Order tracking
• Restaurant profiles
• User reviews and comments
• Search and filters
• Favorites list
• Order history
• Push notifications
• Location-based restaurant discovery

License

MIT

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.