diff --git a/src/App.js b/src/App.js
index 7965164..b9b4111 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 const NameList = () => {
-  const names = ['TicTacToe','TodoList'];
+  const names = ['TicTacToe','TodoList','FoodOrderer'];
 
   return (
     <div className="min-h-screen bg-gray-100 flex justify-center items-center p-4">
diff --git a/src/FoodOrderer.tsx b/src/FoodOrderer.tsx
new file mode 100644
index 0000000..1724c79
--- /dev/null
+++ b/src/FoodOrderer.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+interface ShopItem {
+  name: string,
+  need: number,    // 需求数量 
+  provide: number, // 提供的数量
+  imageUrl: string
+}
+
+const shopItems: ShopItem[] = [
+  {
+    name: "Apple",
+    need: 10,
+    provide: 5,
+    imageUrl: "https://example.com/images/apple.png"
+  },
+  {
+    name: "Orange",
+    need: 8,
+    provide: 10,
+    imageUrl: "https://example.com/images/orange.png"
+  },
+  {
+    name: "Milk",
+    need: 15,
+    provide: 20,
+    imageUrl: "https://example.com/images/milk.png"
+  },
+  {
+    name: "Bread",
+    need: 12,
+    provide: 6,
+    imageUrl: "https://example.com/images/bread.png"
+  }
+];
+
+
+function FoodList({list,setList}:{
+list: ShopItem[],
+setList: React.Dispatch<React.SetStateAction<ShopItem[]>> 
+}) {
+  
+  return(
+  <div>
+  {list.map((item) => 
+    <div className="flex">
+      
+    </div>
+  )}
+  </div>
+)}
+
+
+const FoodOrderer = () => {
+  const [items,setItems] = useState<ShopItem[]>(shopItems)
+  return (
+    <>
+      <FoodList list={items} setList={setItems} />
+    </>
+  )
+
+}
+
+export default FoodOrderer
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c5e33f1..f6111e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import "./styles.css";
 import TicTacToe from "./TicTacToe";
 import TodoList from "./TodoList";
 import NameList from "./App";
+import FoodOrderer from "./FoodOrderer";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 const root = createRoot(document.getElementById("root"));
@@ -20,6 +21,7 @@ root.render(
         <Route path="/" element={<NameList />} />
         <Route path="/TicTacToe" element={<TicTacToe />} />
         <Route path="/TodoList" element={<TodoList />} />
+        <Route path="/FoodOrderer" element={<FoodOrderer />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>