Initial commit: WaMarket MVP

Marketplace inversée (Next.js 16 App Router + Supabase Cloud) : auth, schéma + RLS, publication de besoins avec upload d'images, feed avec filtres, offres, acceptation via RPC, messagerie temps réel, dashboards, et Dockerfile pour déploiement Coolify.
2026-07-30 14:33:17 +00:00
commit af81124d48
82 changed files with 16824 additions and 0 deletions
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export default function AuthCodeErrorPage() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 px-4 py-20 text-center sm:px-6 sm:py-32">
+      <h1 className="text-2xl font-semibold">Lien invalide ou expiré</h1>
+      <p className="max-w-sm text-muted-foreground">
+        Ce lien de confirmation n&apos;est plus valide. Réessaie de te
+        connecter ou de t&apos;inscrire.
+      </p>
+      <Button asChild>
+        <Link href="/auth/login">Retour à la connexion</Link>
+      </Button>
+    </div>
+  );
+}
@@ -0,0 +1,21 @@
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { type NextRequest } from "next/server";
+import { redirect } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const token_hash = searchParams.get("token_hash");
+  const type = searchParams.get("type") as EmailOtpType | null;
+  const next = searchParams.get("next") ?? "/dashboard/my-needs";
+
+  if (token_hash && type) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.verifyOtp({ type, token_hash });
+    if (!error) {
+      redirect(next);
+    }
+  }
+
+  redirect("/auth/auth-code-error");
+}
@@ -0,0 +1,9 @@
+import { LoginForm } from "@/components/auth/login-form";
+
+export default function LoginPage() {
+  return (
+    <div className="flex items-center justify-center px-4 py-16 sm:px-6 sm:py-24">
+      <LoginForm />
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+import { SignupForm } from "@/components/auth/signup-form";
+
+export default function SignupPage() {
+  return (
+    <div className="flex items-center justify-center px-4 py-16 sm:px-6 sm:py-24">
+      <SignupForm />
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+import { verifySession } from "@/lib/dal";
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  await verifySession();
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
+      {children}
+    </main>
+  );
+}
@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { verifySession } from "@/lib/dal";
+import { createClient } from "@/lib/supabase/server";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+const STATUS_LABEL: Record<string, string> = {
+  open: "Ouvert",
+  closed: "Fermé",
+  fulfilled: "Pourvu",
+};
+
+export default async function MyNeedsPage() {
+  const user = await verifySession();
+  const supabase = await createClient();
+
+  const { data: needs } = await supabase
+    .from("needs")
+    .select("id, title, city, status, created_at, categories(name)")
+    .eq("author_id", user.id)
+    .order("created_at", { ascending: false });
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">Mes besoins</h1>
+        <Button asChild>
+          <Link href="/needs/new">Nouveau besoin</Link>
+        </Button>
+      </div>
+
+      {!needs || needs.length === 0 ? (
+        <p className="mt-6 text-muted-foreground">
+          Tu n&apos;as pas encore publié de besoin.
+        </p>
+      ) : (
+        <div className="mt-6 flex flex-col gap-3">
+          {needs.map((need) => {
+            const category = Array.isArray(need.categories)
+              ? need.categories[0]
+              : need.categories;
+            return (
+              <Link key={need.id} href={`/needs/${need.id}`}>
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">{need.title}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {need.city}
+                        {category?.name ? ` · ${category.name}` : ""}
+                      </p>
+                    </div>
+                    <Badge
+                      className="w-fit"
+                      variant={need.status === "open" ? "default" : "outline"}
+                    >
+                      {STATUS_LABEL[need.status] ?? need.status}
+                    </Badge>
+                  </CardContent>
+                </Card>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { verifySession } from "@/lib/dal";
+import { createClient } from "@/lib/supabase/server";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+const STATUS_LABEL: Record<string, string> = {
+  pending: "En attente",
+  accepted: "Acceptée",
+  rejected: "Refusée",
+  withdrawn: "Retirée",
+};
+
+export default async function MyOffersPage() {
+  const user = await verifySession();
+  const supabase = await createClient();
+
+  const { data: offers } = await supabase
+    .from("offers")
+    .select("id, title, price, status, created_at, need_id, needs(title, city)")
+    .eq("merchant_id", user.id)
+    .order("created_at", { ascending: false });
+
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold">Mes offres</h1>
+
+      {!offers || offers.length === 0 ? (
+        <p className="mt-6 text-muted-foreground">
+          Tu n&apos;as pas encore envoyé d&apos;offre.
+        </p>
+      ) : (
+        <div className="mt-6 flex flex-col gap-3">
+          {offers.map((offer) => {
+            const need = Array.isArray(offer.needs)
+              ? offer.needs[0]
+              : offer.needs;
+            return (
+              <Link key={offer.id} href={`/needs/${offer.need_id}`}>
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">{offer.title}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {need?.title} · {need?.city} · {offer.price} €
+                      </p>
+                    </div>
+                    <Badge
+                      className="w-fit"
+                      variant={
+                        offer.status === "accepted" ? "default" : "outline"
+                      }
+                    >
+                      {STATUS_LABEL[offer.status] ?? offer.status}
+                    </Badge>
+                  </CardContent>
+                </Card>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-geist-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { getCurrentUser } from "@/lib/dal";
+import { Navbar } from "@/components/layout/navbar";
+import { Footer } from "@/components/layout/footer";
+import { Toaster } from "@/components/ui/sonner";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "WaMarket",
+  description: "Postez un besoin, recevez des offres de commerçants près de chez vous.",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const user = await getCurrentUser();
+
+  return (
+    <html
+      lang="fr"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="flex min-h-full flex-col">
+        <Navbar user={user} />
+        <div className="flex-1">{children}</div>
+        <Footer />
+        <Toaster />
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,58 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { verifySession } from "@/lib/dal";
+import { createClient } from "@/lib/supabase/server";
+import { ChatWindow } from "@/components/messages/chat-window";
+
+export default async function ConversationPage({
+  params,
+}: {
+  params: Promise<{ conversationId: string }>;
+}) {
+  const user = await verifySession();
+  const { conversationId } = await params;
+  const supabase = await createClient();
+
+  const { data: conversation } = await supabase
+    .from("conversations")
+    .select(
+      "id, author_id, merchant_id, needs(title), author:profiles!conversations_author_id_fkey(full_name), merchant:profiles!conversations_merchant_id_fkey(full_name)"
+    )
+    .eq("id", conversationId)
+    .single();
+
+  if (!conversation) {
+    notFound();
+  }
+
+  const { data: messages } = await supabase
+    .from("messages")
+    .select("id, conversation_id, sender_id, body, created_at")
+    .eq("conversation_id", conversationId)
+    .order("created_at", { ascending: true });
+
+  const isAuthor = conversation.author_id === user.id;
+  const other = isAuthor ? conversation.merchant : conversation.author;
+  const otherName = Array.isArray(other) ? other[0]?.full_name : other?.full_name;
+  const need = Array.isArray(conversation.needs)
+    ? conversation.needs[0]
+    : conversation.needs;
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <Link href="/messages" className="text-sm text-muted-foreground underline">
+        ← Toutes les conversations
+      </Link>
+      <h1 className="mt-2 text-2xl font-semibold">{otherName ?? "Utilisateur"}</h1>
+      <p className="text-sm text-muted-foreground">{need?.title}</p>
+
+      <div className="mt-6">
+        <ChatWindow
+          conversationId={conversationId}
+          currentUserId={user.id}
+          initialMessages={messages ?? []}
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { verifySession } from "@/lib/dal";
+import { createClient } from "@/lib/supabase/server";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default async function MessagesPage() {
+  const user = await verifySession();
+  const supabase = await createClient();
+
+  const { data: conversations } = await supabase
+    .from("conversations")
+    .select(
+      "id, created_at, author_id, merchant_id, needs(title), author:profiles!conversations_author_id_fkey(full_name), merchant:profiles!conversations_merchant_id_fkey(full_name)"
+    )
+    .order("created_at", { ascending: false });
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <h1 className="text-2xl font-semibold">Messages</h1>
+
+      {!conversations || conversations.length === 0 ? (
+        <p className="mt-6 text-muted-foreground">
+          Aucune conversation pour le moment. Elles apparaissent ici une fois
+          qu&apos;une offre est acceptée.
+        </p>
+      ) : (
+        <div className="mt-6 flex flex-col gap-3">
+          {conversations.map((conv) => {
+            const isAuthor = conv.author_id === user.id;
+            const other = isAuthor ? conv.merchant : conv.author;
+            const otherName = Array.isArray(other)
+              ? other[0]?.full_name
+              : other?.full_name;
+            const need = Array.isArray(conv.needs) ? conv.needs[0] : conv.needs;
+
+            return (
+              <Link key={conv.id} href={`/messages/${conv.id}`}>
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="min-w-0 py-4">
+                    <p className="truncate font-medium">
+                      {otherName ?? "Utilisateur"}
+                    </p>
+                    <p className="truncate text-sm text-muted-foreground">
+                      {need?.title}
+                    </p>
+                  </CardContent>
+                </Card>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-5 w-24 animate-pulse rounded-md bg-muted" />
+      <div className="mt-3 h-8 w-3/4 animate-pulse rounded-md bg-muted" />
+      <div className="mt-2 h-5 w-32 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-32 w-32 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-24 w-full animate-pulse rounded-md bg-muted" />
+    </div>
+  );
+}
@@ -0,0 +1,155 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import Image from "next/image";
+import { createClient } from "@/lib/supabase/server";
+import { getCurrentUser } from "@/lib/dal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { OfferForm } from "@/components/offers/offer-form";
+import { OfferList } from "@/components/offers/offer-list";
+
+export default async function NeedDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const supabase = await createClient();
+  const user = await getCurrentUser();
+
+  const { data: need } = await supabase
+    .from("needs")
+    .select(
+      "id, title, description, city, region, budget_min, budget_max, status, author_id, categories(name), need_images(storage_path, position)"
+    )
+    .eq("id", id)
+    .single();
+
+  if (!need) {
+    notFound();
+  }
+
+  const images = [...(need.need_images ?? [])].sort(
+    (a, b) => a.position - b.position
+  );
+  const isOwner = user?.id === need.author_id;
+  const category = Array.isArray(need.categories)
+    ? need.categories[0]
+    : need.categories;
+
+  const { data: offers } = await supabase
+    .from("offers")
+    .select(
+      "id, title, description, price, status, merchant_id, profiles(full_name), offer_images(storage_path, position)"
+    )
+    .eq("need_id", id)
+    .order("created_at", { ascending: true });
+
+  const offerList = offers ?? [];
+  const myOffer = user ? offerList.find((o) => o.merchant_id === user.id) : undefined;
+
+  function getOfferImageUrl(path: string) {
+    return supabase.storage.from("offer-images").getPublicUrl(path).data
+      .publicUrl;
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="flex items-center gap-2">
+        {category?.name && <Badge variant="secondary">{category.name}</Badge>}
+        <Badge
+          variant={need.status === "open" ? "default" : "outline"}
+        >
+          {need.status}
+        </Badge>
+      </div>
+      <h1 className="mt-3 text-2xl font-semibold">{need.title}</h1>
+      <p className="mt-1 text-muted-foreground">
+        {need.city}
+        {need.region ? `, ${need.region}` : ""}
+      </p>
+      {(need.budget_min || need.budget_max) && (
+        <p className="mt-1 text-sm">
+          Budget : {need.budget_min ?? "?"}€ – {need.budget_max ?? "?"}€
+        </p>
+      )}
+
+      {images.length > 0 && (
+        <div className="mt-6 flex flex-wrap gap-3">
+          {images.map((img) => {
+            const { data } = supabase.storage
+              .from("need-images")
+              .getPublicUrl(img.storage_path);
+            return (
+              <div
+                key={img.storage_path}
+                className="relative h-32 w-32 overflow-hidden rounded-md border"
+              >
+                <Image
+                  src={data.publicUrl}
+                  alt={need.title}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <p className="mt-6 whitespace-pre-wrap">{need.description}</p>
+
+      <div className="mt-10 border-t pt-6">
+        {isOwner ? (
+          <>
+            <h2 className="text-lg font-semibold">Offres reçues</h2>
+            <OfferList
+              offers={offerList}
+              needId={need.id}
+              needStatus={need.status}
+              isOwner
+              getImageUrl={getOfferImageUrl}
+            />
+          </>
+        ) : !user ? (
+          <p className="text-sm text-muted-foreground">
+            <Link href="/auth/login" className="underline">
+              Connecte-toi
+            </Link>{" "}
+            pour proposer une offre sur ce besoin.
+          </p>
+        ) : myOffer ? (
+          <>
+            <h2 className="text-lg font-semibold">Ton offre</h2>
+            <OfferList
+              offers={[myOffer]}
+              needId={need.id}
+              needStatus={need.status}
+              isOwner={false}
+              getImageUrl={getOfferImageUrl}
+            />
+          </>
+        ) : need.status === "open" ? (
+          <>
+            <h2 className="text-lg font-semibold">Proposer une offre</h2>
+            <div className="mt-4">
+              <OfferForm needId={need.id} />
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Ce besoin n&apos;accepte plus d&apos;offres.
+          </p>
+        )}
+      </div>
+
+      {isOwner && (
+        <p className="mt-4 text-xs text-muted-foreground">
+          <Button asChild variant="link" className="h-auto p-0 text-xs">
+            <Link href="/messages">Voir mes conversations</Link>
+          </Button>
+        </p>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-8 w-40 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-10 w-full animate-pulse rounded-md bg-muted" />
+      <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-56 animate-pulse rounded-xl bg-muted" />
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-8 w-56 animate-pulse rounded-md bg-muted" />
+      <div className="mt-2 h-5 w-72 animate-pulse rounded-md bg-muted" />
+      <div className="mt-8 flex flex-col gap-5">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="h-10 w-full animate-pulse rounded-md bg-muted" />
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,21 @@
+import { verifySession } from "@/lib/dal";
+import { getCategories } from "@/lib/data/categories";
+import { NeedForm } from "@/components/needs/need-form";
+
+export default async function NewNeedPage() {
+  await verifySession();
+  const categories = await getCategories();
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <h1 className="text-2xl font-semibold">Publier un besoin</h1>
+      <p className="mt-1 text-muted-foreground">
+        Décris ce que tu cherches, les commerçants pourront te faire des
+        offres.
+      </p>
+      <div className="mt-8">
+        <NeedForm categories={categories} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,118 @@
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/server";
+import { getCategories } from "@/lib/data/categories";
+import { NeedFilters } from "@/components/needs/need-filters";
+import { NeedCard } from "@/components/needs/need-card";
+import { Button } from "@/components/ui/button";
+
+const PAGE_SIZE = 12;
+
+export default async function NeedsFeedPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    q?: string;
+    city?: string;
+    category?: string;
+    page?: string;
+  }>;
+}) {
+  const { q, city, category, page } = await searchParams;
+  const currentPage = Math.max(1, Number(page) || 1);
+  const from = (currentPage - 1) * PAGE_SIZE;
+  const to = from + PAGE_SIZE - 1;
+
+  const supabase = await createClient();
+  const categories = await getCategories();
+
+  let query = supabase
+    .from("needs")
+    .select(
+      "id, title, city, region, budget_min, budget_max, created_at, categories(name), need_images(storage_path, position)",
+      { count: "exact" }
+    )
+    .eq("status", "open")
+    .order("created_at", { ascending: false })
+    .range(from, to);
+
+  if (q) {
+    query = query.ilike("title", `%${q}%`);
+  }
+  if (city) {
+    query = query.ilike("city", `%${city}%`);
+  }
+  if (category) {
+    const matchedCategory = categories.find((c) => c.slug === category);
+    if (matchedCategory) {
+      query = query.eq("category_id", matchedCategory.id);
+    }
+  }
+
+  const { data: needs, count } = await query;
+  const total = count ?? 0;
+  const hasNextPage = to + 1 < total;
+
+  function getImageUrl(path: string) {
+    return supabase.storage.from("need-images").getPublicUrl(path).data
+      .publicUrl;
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+        <h1 className="text-2xl font-semibold">Besoins</h1>
+        <Button asChild>
+          <Link href="/needs/new">Publier un besoin</Link>
+        </Button>
+      </div>
+
+      <div className="mt-6">
+        <NeedFilters
+          categories={categories}
+          defaultValues={{ category, city, q }}
+        />
+      </div>
+
+      {needs && needs.length > 0 ? (
+        <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {needs.map((need) => (
+            <NeedCard key={need.id} need={need} getImageUrl={getImageUrl} />
+          ))}
+        </div>
+      ) : (
+        <p className="mt-12 text-center text-muted-foreground">
+          Aucun besoin ne correspond à ta recherche.
+        </p>
+      )}
+
+      {(currentPage > 1 || hasNextPage) && (
+        <div className="mt-8 flex justify-center gap-2">
+          {currentPage > 1 && (
+            <Button asChild variant="outline">
+              <Link
+                href={{
+                  pathname: "/needs",
+                  query: { q, city, category, page: currentPage - 1 },
+                }}
+              >
+                Précédent
+              </Link>
+            </Button>
+          )}
+          {hasNextPage && (
+            <Button asChild variant="outline">
+              <Link
+                href={{
+                  pathname: "/needs",
+                  query: { q, city, category, page: currentPage + 1 },
+                }}
+              >
+                Suivant
+              </Link>
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 bg-muted/30 px-4 py-20 text-center sm:px-6 sm:py-32">
+      <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+        WaMarket
+      </h1>
+      <p className="max-w-md text-base text-muted-foreground sm:text-lg">
+        Postez un besoin, recevez des offres de commerçants près de chez vous.
+      </p>
+      <div className="flex w-full max-w-xs flex-col gap-3 sm:w-auto sm:flex-row">
+        <Button asChild size="lg" className="w-full sm:w-auto">
+          <Link href="/needs/new">Publier un besoin</Link>
+        </Button>
+        <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">
+          <Link href="/needs">Voir les besoins</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}