1. The main menu page showing categories like Burgers, Pizza, etc. with menu items and prices
2. A cart section that's currently empty

3. Different modal dialogs for:

   • Choosing service type (Pickup, Dine-In, Delivery)
   • Booking a table with date/time selection
   • Table selection for dine-in
   • Delivery area selection with a map
   • Order timing selection (Now/Later)

The API data is a JSON response from the endpoint "https://www.foodchow.com/api/FoodChowWD/GetRestaurantMenuWDWidget_multi" with ShopId=3161. The data contains:

• Categories (Burgers, Pizza, Une Entrée, Frankie, JUICE, etc.)

• Menu items with details like:

  • Name, description, price
  • Vegetarian/non-vegetarian status
  • Size options (when applicable)
  • Customization options
  • Preference options

I need to create a React application that integrates with this API to recreate a similar food ordering experience. I'll use Next.js with the App Router to build this application, focusing on:

1. Fetching and displaying menu categories and items
2. Implementing the cart functionality
3. Creating the service selection modals (pickup, dine-in, delivery)
4. Building the order flow

I'll use Tailwind CSS for styling and shadcn/ui components where appropriate to match the design shown in the screenshots. </Thinking>

Food Ordering App with FoodChow API Integration

I'll create a React application that integrates with the FoodChow API to build a restaurant menu and ordering system similar to the one shown in your screenshots.

export default function Home() { const [menuData, setMenuData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [selectedCategory, setSelectedCategory] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [cart, setCart] = useState([]);

useEffect(() => { const loadMenuData = async () => { try { setLoading(true); const data = await fetchMenuData(); setMenuData(data); if (data?.CategoryList?.length > 0) { setSelectedCategory(data.CategoryList[0].CategryId); } } catch (err) { setError('Failed to load menu data'); console.error(err); } finally { setLoading(false); } };

}, []);

const addToCart = (item) => { setCart(prevCart => { const existingItem = prevCart.find(cartItem => cartItem.ItemId === item.ItemId && cartItem.SizeId === item.SizeId );

};

const handleSearch = (query) => { setSearchQuery(query); };

const filteredItems = selectedCategory && menuData?.CategoryList ? menuData.CategoryList.find(cat => cat.CategryId === selectedCategory)?.ItemListWidget.filter( item => item.ItemName.toLowerCase().includes(searchQuery.toLowerCase()) ) : [];

if (loading) return <div className="flex justify-center items-center min-h-screen">Loading...</div>; if (error) return <div className="flex justify-center items-center min-h-screen text-red-500">{error}</div>; if (!menuData) return <div className="flex justify-center items-center min-h-screen">No menu data available</div>;

return ( <main className="min-h-screen bg-white"> <RestaurantHeader restaurantInfo={menuData} />

); } </tsx>

export default function RestaurantHeader({ restaurantInfo }) { return ( <div className="bg-white border-b p-4"> <div className="container mx-auto flex flex-col md:flex-row justify-between items-center"> <div className="flex items-center gap-4"> <img src="/placeholder.svg?height=80&width=80" alt="Restaurant Logo" className="w-16 h-16 rounded-full" /> <div> <h1 className="text-2xl font-bold text-gray-800">FoodChow Demo India</h1> <p className="text-gray-600">Valsad, Gujarat, India</p> <div className="flex items-center mt-1"> <span className="text-green-600 font-medium">Restaurant Is Open</span> <span className="mx-2">•</span> <span className="text-gray-600">Timing 07:00 AM - 11:00 PM</span> </div> </div> </div>

); } </tsx>

export default function MenuCategories({ categories, selectedCategory, onSelectCategory }) { return ( <div className="flex flex-col"> {categories.map((category) => ( <button key={category.CategryId} className={cn( "text-left p-3 hover:bg-blue-50 transition-colors", selectedCategory === category.CategryId ? "bg-blue-500 text-white" : "text-gray-700" )} onClick={() => onSelectCategory(category.CategryId)} > {category.CategryName} </button> ))} </div> ); } </tsx>

export default function MenuItems({ items, onAddToCart, categoryName }) { if (!items || items.length === 0) { return ( <div className="p-6 text-center text-gray-500"> No items found in this category </div> ); }

return ( <div> <div className="p-4 border-b"> <h2 className="text-xl font-bold">{categoryName}</h2> <p className="text-sm text-gray-500">{items.length} items</p> </div>

); } </tsx>

export default function Cart({ cart, setCart }) { const removeFromCart = (itemId, sizeId) => { setCart(prevCart => prevCart.filter(item => !(item.ItemId === itemId && item.SizeId === sizeId) )); };

const updateQuantity = (itemId, sizeId, newQuantity) => { if (newQuantity <= 0) { removeFromCart(itemId, sizeId); return; }

};

const calculateTotal = () => { return cart.reduce((total, item) => { const price = item.IsSizeAvailable === 1 && item.SizeListWidget?.length > 0 ? item.SizeListWidget[0].Price : item.Price; return total + (price * item.quantity); }, 0); };

return ( <div> <h2 className="text-xl font-bold text-blue-600 mb-4">Your Cart</h2>

); } </tsx>

export default function SearchBar({ onSearch }) { const [query, setQuery] = useState('');

const handleSubmit = (e) => { e.preventDefault(); onSearch(query); };

return ( <form onSubmit={handleSubmit} className="relative"> <input type="text" placeholder="Search for dishes" className="w-full p-3 pr-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" value={query} onChange={(e) => setQuery(e.target.value)} /> <button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-blue-500" > <Search size={20} /> </button> </form> ); } </tsx>

export default function ServiceModal({ isOpen, onClose }) { const [selectedService, setSelectedService] = useState(null);

if (!isOpen) return null;

return ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="bg-white rounded-lg w-full max-w-md"> <div className="flex justify-between items-center p-4 border-b"> <h2 className="text-xl font-bold">Choose A Service</h2> <button onClick={onClose} className="text-gray-500 hover:text-gray-700"> <X size={24} /> </button> </div>

); }

function ServiceOption({ icon, name, selected, onClick }) { return ( <button className={p-4 rounded-lg border ${ selected ? 'border-blue-500 bg-blue-50' : 'border-gray-200' } flex flex-col items-center justify-center transition-colors} onClick={onClick} > {icon} <span className="mt-2 font-medium">{name}</span> </button> ); } </tsx>

} catch (error) { console.error('Error fetching menu data:', error); throw error; } } </tsx>

const inter = Inter({ subsets: ['latin'] })

export const metadata = { title: 'FoodChow Demo - Food Ordering App', description: 'Order delicious food online from FoodChow Demo', }

export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}> <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange > {children} </ThemeProvider> </body> </html> ) } </tsx>

Features Implemented

This food ordering application includes the following features based on the FoodChow API:

1. Restaurant Header - Displays restaurant information, contact details, and timing
2. Category Navigation - Left sidebar with all food categories from the API
3. Menu Items Display - Shows items for the selected category with descriptions and prices
4. Search Functionality - Allows searching for dishes within the selected category
5. Shopping Cart - Tracks added items with quantity controls and total calculation
6. Service Selection Modal - For choosing between pickup, dine-in, and delivery options

How It Works

1. The application fetches menu data from the FoodChow API when it loads
2. Users can browse categories, search for items, and add them to their cart
3. The cart updates in real-time, showing the total price
4. Users can select their preferred service type (pickup, dine-in, delivery)

Next Steps

To enhance this application further, you could:

1. Implement the booking functionality for table reservations
2. Add the delivery address selection with map integration
3. Create item customization modals for items with preferences/options
4. Build the checkout process with payment integration
5. Add user authentication for order history

You can deploy this application to Vercel by clicking the "Deploy" button in the top right corner of the UI.