···11+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22+33+# dependencies
44+/node_modules
55+/.pnp
66+.pnp.*
77+.yarn/*
88+!.yarn/patches
99+!.yarn/plugins
1010+!.yarn/releases
1111+!.yarn/versions
1212+1313+# testing
1414+/coverage
1515+1616+# next.js
1717+/.next/
1818+/out/
1919+2020+# production
2121+/build
2222+2323+# misc
2424+.DS_Store
2525+*.pem
2626+2727+# debug
2828+npm-debug.log*
2929+yarn-debug.log*
3030+yarn-error.log*
3131+.pnpm-debug.log*
3232+3333+# env files (can opt-in for committing if needed)
3434+.env*
3535+3636+# vercel
3737+.vercel
3838+3939+# typescript
4040+*.tsbuildinfo
4141+next-env.d.ts
+36
apps/app/README.md
···11+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
22+33+## Getting Started
44+55+First, run the development server:
66+77+```bash
88+npm run dev
99+# or
1010+yarn dev
1111+# or
1212+pnpm dev
1313+# or
1414+bun dev
1515+```
1616+1717+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
1818+1919+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
2020+2121+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
2222+2323+## Learn More
2424+2525+To learn more about Next.js, take a look at the following resources:
2626+2727+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
2828+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
2929+3030+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
3131+3232+## Deploy on Vercel
3333+3434+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
3535+3636+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+65
apps/app/app/(app)/home/home.tsx
···11+'use client';
22+33+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
44+import { Input } from "@/components/ui/input";
55+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
66+import { ClockIcon } from "lucide-react";
77+import { Separator } from "@/components/ui/separator";
88+import { useGetRecipesQuery } from "@/lib/queries/recipes";
99+import { RecipeCard } from "@/components/views/recipe-card";
1010+1111+export const Home = () => {
1212+ const { data } = useGetRecipesQuery();
1313+1414+ return (
1515+ <div className="p-4 flex flex-col gap-8">
1616+ <div className="flex flex-col gap-4 max-w-3xl items-center mx-auto py-16">
1717+ <h1 className="font-bold text-3xl">Welcome to Cookware!</h1>
1818+ <span className="text-xl">A little corner of the internet for you to share your recipes with the world.</span>
1919+ <Input placeholder="Search recipes..." className="w-full max-w-md" />
2020+ </div>
2121+2222+ <Separator />
2323+2424+ <h1 className="font-bold text-2xl text-center">Recently-added recipes</h1>
2525+2626+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
2727+2828+ {data && (
2929+ data.recipes.map(v => <RecipeCard key={v.cid} recipe={v} />)
3030+ )}
3131+3232+ {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(v => (
3333+ <Card key={v}>
3434+ <CardHeader>
3535+ <CardTitle>Featured Recipe {v}</CardTitle>
3636+ <CardDescription>A recipe to make some of the best food you've ever had!</CardDescription>
3737+ </CardHeader>
3838+3939+ <CardContent>
4040+ <img className="rounded-md ratio-[4/3] object-cover" src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:26tsx5juuss4yealylyfbj4h/bafkreia4wvg2y4rr6liuffdt4ckcskf4bvdmzbfdsv3ul6t442fu4jxy6m@jpeg" />
4141+ </CardContent>
4242+4343+ <CardFooter>
4444+ <div className="flex flex-col gap-2">
4545+ <div className="flex items-center gap-2 text-sm">
4646+ <Avatar className="!size-8">
4747+ <AvatarImage></AvatarImage>
4848+ <AvatarFallback>HM</AvatarFallback>
4949+ </Avatar>
5050+ <span>@hayden.moe</span>
5151+ </div>
5252+5353+ <div className="flex items-center gap-2 text-sm">
5454+ <ClockIcon className="!size-4" />
5555+ <span>15 mins</span>
5656+ </div>
5757+ </div>
5858+ </CardFooter>
5959+ </Card>
6060+ ))}
6161+6262+ </div>
6363+ </div>
6464+ );
6565+}
+17
apps/app/app/(app)/home/page.tsx
···11+import { GET_RECIPES_QO } from "@/lib/queries/recipes";
22+import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
33+import { Home } from "./home";
44+import { Client, simpleFetchHandler } from "@atcute/client";
55+66+export default async function HomeRoute() {
77+ const queryClient = new QueryClient();
88+ await queryClient.prefetchQuery(GET_RECIPES_QO(new Client({
99+ handler: simpleFetchHandler({ service: 'http://localhost:4000' }),
1010+ })));
1111+1212+ return (
1313+ <HydrationBoundary state={dehydrate(queryClient)}>
1414+ <Home />
1515+ </HydrationBoundary>
1616+ );
1717+};