I’m building an app with shadcn ui including data fetching with json server. The end result only gives out one card instead of multiple i expect it to be. And even first card doesnt show with correct details (from json file)

import{
  Card, 
  CardHeader, 
  CardFooter, 
  CardTitle, 
  CardDescription, 
  CardContent
} from '@/components/ui/card'

interface Recipe {
  title: string,
  image: string,
  time: number,
  description: string,
  vegan: boolean,
  id: string
}


async function getRecipes(): Promise<Recipe[]> {
  const result = await fetch('http://localhost:4000/recipes');
  return result.json()
  
}


export default async function Home() {
  const recipes = await getRecipes()
  
  return (
    <main> 
      <div className="grid grid-cols-3 gap-8">
        {recipes.map(recipe =>(
          <Card key={recipe.id}>
            <CardHeader>
            <div>
              <CardTitle>{recipe.title}</CardTitle>
              <CardDescription>{recipe.time} mins to cook </CardDescription>
            </div>
            </CardHeader>
            <CardContent>
              <p>{recipe.description}</p>
            </CardContent>
            <CardFooter>
              <button> View Recipe</button>
              {recipe.vegan && <p>Vegan!</p>}
            </CardFooter>
          </Card>
        ))}
      </div>
    </main>
  )
}

I felt like this is correct way to data fetch, but it doesnt work yet
Page.tsx

{
    "recipes":[
        {
            "id": "1",
            "title": "Recipe1",
            "image": "Recipe1",
            "time": 10,
            "description": "Recipe1 description.",
            "vegan": true
        },

        {
            "id": "2",
            "title": "Recipe2",
            "image": "Recipe2.jpg",
            "time": 20,
            "description": "Recipe1 description.",
            "vegan": false
        }






    ]

My json file (_data/db.json), it doesnt output with multiple cards , and first card doesnt come up with Recipe1 title, “10 time” either.